Styling the Filter Icon When it is Active in JavaScript

Background:

The Wijmo FlexGrid visually indicates which columns are filtered by applying special CSS classes to the filter icon and the column header cell. You can customize these styles using CSS, and you can also use the grid’s formatItem event to add a CSS class to the column when its filter is active.

Steps to Complete:

1. Style the active filter icon using the .wj-filter-on class.
2. Initialize the Grid and Enable Filtering.
3. Detect when a column’s filter is active and apply styling to the header cell.

Getting Started:

Style the active filter icon using the .wj-filter-on class

When a filter is applied to a column, FlexGrid adds a special class (.wj-filter-on) to the filter icon element. You can target that class in CSS to change the icon’s color, size, or other visual attributes.

/* Make the active filter icon orange */
.wj-flexgrid .wj-cell.wj-filter-on .wj-elem-filter {
  color: orange !important;
}

/* Optionally scale the icon larger when active */
.wj-flexgrid .wj-cell.wj-filter-on .wj-glyph-filter {
  transform: scale(1.25);
}

• .wj-filter-on is automatically applied by FlexGrid when a column filter is active.

Initialize the Grid and Enable Filtering

This creates a FlexGrid instance and attaches a FlexGridFilter so filter icons and functionality are available.

<div id="theGrid"></div>

import * as wjcGrid from '@mescius/wijmo.grid';
import { FlexGridFilter } from '@mescius/wijmo.grid.filter';

const data = getData();

const grid = new wjcGrid.FlexGrid('#theGrid', {
  itemsSource: data,
  allowSorting: true
});

// Enable filtering
const filter = new FlexGridFilter(grid);

• The FlexGridFilter adds filter icons to the column headers.
• When a filter is active, the grid applies .wj-filter-on to the corresponding header cell.

Detect when a column’s filter is active and apply styling to the header cell

The formatItem event runs whenever a cell is rendered. By checking whether the header cell contains .wj-filter-on, you can assign a custom CSS class to the column, allowing you to highlight the entire header when its filter is active.

grid.formatItem.addHandler((s, e) => {
  if (e.panel === s.columnHeaders) {
    if (e.cell.classList.contains('wj-filter-on')) {
      s.columns[e.col].cssClass = 'filtered-col';
    } else {
      s.columns[e.col].cssClass = '';
    }
  }
});

• e.panel === s.columnHeaders ensures the logic runs only for header cells.
• If the header cell has .wj-filter-on, the corresponding column gets a custom class (filtered-col).
• This allows further visual customization via CSS.

Add CSS for header highlighting (optional)

Here’s an example of styling the filtered column header.

.wj-flexgrid .filtered-col {
  color: red !important;
  font-weight: bold;
}

With this JavaScript setup:

• The filter icon changes appearance when a filter is active.
• The header cell of the filtered column can be styled independently (e.g., bold or colored).
• Users can quickly identify which columns currently have filters applied.

Happy coding!