Increase column width dynamically

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

  • 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.
  • Marked as Answer

    Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels