Adding Style to FlexGrid Filter Icon and Column When Filter is Active

Background:

Wijmo FlexGrid's filter icon can be fully customized and styled. For additional functionality and customization you can utilize a few FlexGrid methods.

Steps to Complete:

1. Style the active filter icon use the ".wj-filter-on class".

2.Determine if a columns filter is active and add a style to the column.

Getting Started:

Style the active filter icon use the ".wj-filter-on class"

To style the filter icon when a filter is active use the ".wj-filter-on class" and add desired styles:

.wj-flexgrid .wj-cell.wj-filter-on .wj-elem-filter {
  color: orange !important;
}

Determine if a columns filter is active and add a style to the column

Use the formatItem event and the addHandler method to determine the column header you wish to customize and use the addClass method to set the CSS:

grid.formatItem.addHandler((s, e) => {
  if (e.panel == s.columnHeaders) {
    let col = e.getColumn();
    if (wjCore.hasClass(e.cell, "wj-filter-on")) {
      col.cssClass = "filtered-col";
    } else {
      col.cssClass = null;
    }
  }
});

.wj-flexgrid .wj-cell.wj-filter-on .wj-glyph-filter {
    transform: scale(1.25)
}

.wj-flexgrid .wj-cell.wj-filter-on .wj-elem-filter {
  color: orange !important;
}

.wj-flexgrid .wj-colheaders .wj-header.wj-cell.wj-filter-on {
  color: seagreen !important;
}

.filtered-col{
  color: red !important;
}

An app example showcasing this can be found here.

Happy coding!