Flexgrid: Auto adjust header width according to header text

Flexgrid: Auto adjust header width according to header text

Posted by: sbanerjee on 14 September 2017, 2:47 am EST

• 

  sbanerjee

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 2:47 am EST

  Hello,

  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]="initialized(flex,$event)"
  
   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.

• 

  c1_alexi

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:47 am EST

  Hello

  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).

  Thanks,
  
  Alex

• 

  sbanerjee

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:47 am EST

  Hello Alex,

  Thanks, “setTimeout(…, 0)” function works for me.

• 

  meghas

  • Post Options:
  • Link
    Copy

  Posted 1 April 2020, 2:19 am EST

  Hello,

  I want to adjust column header width according to column header text and i am using
  
  this.flexgrid.autosizeColumns(1,10,true);

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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 1 April 2020, 9:16 pm EST

  Hi,

  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;
  });
  

  https://stackblitz.com/edit/angular-22ao5c

  Regards,
  
  Ashwin