Add CSS Class to Column Header in FlexGrid

Add CSS Class to Column Header in FlexGrid

Posted by: peter.denoyelles on 7 February 2019, 2:38 am EST

• 

  peter.denoyelles

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 7 February 2019, 2:38 am EST

  I apologize if this has been answered before but I’m struggling with adding a class to the nth columns header in a FlexGrid.

  This is what I’ve tried so far:

  flexGrid.columnHeaders.columns[n].cssClass = "custom-css-class"
  

  However, when doing this, it will only add the custom class to all of the data rows below the column header, and not to the column header itself.

  I’ve also tried:

  flexGrid.columnHeaders.columns[n].cssClassAll = "custom-css-class"
  

  but this does not update the column header element either.

  Any help is appreciated!

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 7 February 2019, 3:54 pm EST

  Hi,

  ‘cssClassAll’ property is only added in the latest version(5.20183.568). Please make sure that you are using the latest version.
  
  For older versions, we need to use formatItem event instead. Please refer to the following code snippet:

  grid.formatItem.addHandler(function(s,e){
    if(e.panel.cellType != wijmo.grid.CellType.ColumnHeader){
      return;
    }
    if(e.col == 2){
      wijmo.addClass(e.cell, 'my-header-format-item');
    }
  });
  

  You may also refer to the following sample which demonstrates both the approaches:
  
  https://stackblitz.com/edit/js-5egugj?file=index.js

  ~Sharad

• 

  peter.denoyelles

  • Post Options:
  • Link
    Copy

  Posted 19 February 2019, 1:02 am EST

  Thanks Sharad!