Flexgrid: Auto adjust header width according to header text

Originally Posted 23 October 2016, 9:34 pm EST

  • Originally Posted 23 October 2016, 9:34 pm EST


    I'm using wijmo 5 flexgrid with angular2 typescript and facing an issue of width of the header as columns are dynamic.

    autoSizeColumn method within initialized event is working, but after using that the data is not loading into a grid.


    initialized(s, e) {
    s.autoSizeColumns(0, s.columns.length - 1, false, 20);

    Does it work for Wijmo 5.20161.138 eval? or there is any other option for that?

    [cell-edit-ended] ="initialized(flex,$event)"

    I used cell-edit-ended, but the data is not loading by that too.
  • Reply


    It's rather difficult to say something because 138 is a rather old build. I would suggest you to try to call autoSizeColumns inside setTimeout(..., 0).

  • Marked as Answer


    Hello Alex,

    Thanks, "setTimeout(…, 0)" function works for me.
  • Reply


    I want to adjust column header width according to column header text and i am using

    but this is not working.
    If i am setting true to false then it is working according to cell text.
  • Reply


    The 3rd parameter in the autoSizeColumns method denotes whether the columns indices provided are of regular columns or header columns. This means that setting it to true will auto-size the columns in rowHeaders of the FlexGrid.
    If you wish to auto-size the columns only based on the text in the header, then you may manually set the size of the column according to its scrollWidth:
    grid.columnHeaders.columns.forEach(col => {
    var ele = grid.columnHeaders.getCellElement(0, col.index);
    col.size = ele.scrollWidth + 10;


Need extra support?

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

Learn More

Forum Channels