Increase column width dynamically

Increase column width dynamically

Posted by: 16pa1a0576 on 19 May 2021, 11:36 pm EST

• 

  16pa1a0576

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 May 2021, 11:36 pm EST

  Hi, I have customized the column header by keeping an icon in it. I am displaying that icon based on condition, so if the column name is having high length, the icon is getting over the name. What i need is, based on condition, if icon is displayed, then i have to increase column width.
  
  Could you please help me ?
  
  Thanks.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 20 May 2021, 9:05 pm EST

  Hi,

  For this you need to override the getAutoFitWidth method on CellType Class and return the calculated width for the column and whenever you need to auto-fit the column you just call the sheet.autoFitColumn method. Please refer to the following code snippet and attached sample that demonstrates the same.

  
  spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
  ComboBoxCellType.prototype.getAutoFitWidth = function (hitInfo) {
    return (
      this.iconWidth +
      getTextWidth(this.selectedOption.text, this.select.style.font) 
    );
  };
  
  function getTextWidth(text, fontStyle) {
    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");
    ctx.font = fontStyle;
    var txt = text;
    return Math.ceil(ctx.measureText(txt).width);
  }
   let headerCellType = new ComboBoxCellType([
      { text: "The is the long text", value: "text2" },
      { text: "the is the much more longer text", value: "text2" },
      {
        text: "This is longest text to demonstrates the autoFit feature",
        value: "text3"
      }
    ]);
    sheet1.setCellType(0, 0, headerCellType, 1);
  
  
    document.getElementById("autoFit").addEventListener("click", () => {
      sheet1.autoFitColumn(0);
    });
  
  

  sample: https://codesandbox.io/s/great-hodgkin-lcmd5?file=/src/index.js:304-377

  Regards
  
  Avinash