Add CSS Class to Column Header in FlexGrid

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

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

    Replied 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
  • Replied 19 February 2019, 1:02 am EST

    Thanks Sharad!
Need extra support?

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

Learn More

Forum Channels