Disabling FlexGrid Filter Icon in React

Background:

Wijmo's FlexGridFilter icon is fully customizable. You can adjust the appearance or change the icon entirely using CSS. Additionally, you can add further customization using built in events to alter the behavior of the icon.

Steps to Complete:

1. Add a checkbox that controls whether the filter icon is disabled (optional).
2. Handle the grid’s formatItem event and add a CSS class (e.g. disabled-icon) to the column header cells you want to disable when the checkbox is checked.
3. Add CSS that targets the filter element (.wj-elem-filter) inside those header cells and turns off pointer events.

Getting Started:

Add a checkbox that controls whether the filter icon is disabled (optional)

In React, you can bind the checkbox to component state (e.g. disableFilterIcon) and use it inside the grid’s formatItem handler.

import React, { useState } from "react";

export function DisableToggle() {
  const [disableFilterIcon, setDisableFilterIcon] = useState(false);

  return (
    <label style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>
      <input
        type="checkbox"
        checked={disableFilterIcon}
        onChange={(e) => setDisableFilterIcon(e.target.checked)}
      />
      Disable Filter Icon
    </label>
  );
}

Handle the grid’s formatItem event and add a CSS class (e.g. disabled-icon) to the column header cells you want to disable when the checkbox is checked

Wijmo React components expose the same FlexGrid events (including formatItem) through JSX props, so you can toggle a CSS class on header cells.

import React, { useCallback, useState } from "react";
import * as wjCore from "@mescius/wijmo";

import { FlexGrid, FlexGridColumn } from "@mescius/wijmo.react.grid";
import { FlexGridFilter } from "@mescius/wijmo.react.grid.filter";

type RowItem = { id: number; country: string; sales: number; expenses: number };

export default function App() {
  const [disableFilterIcon, setDisableFilterIcon] = useState(false);

  const data: RowItem[] = [
    { id: 1, country: "US", sales: 12000, expenses: 8000 },
    { id: 2, country: "Germany", sales: 9000, expenses: 7000 },
  ];

  const onFormatItem = useCallback(
    (s: any, e: any) => {
      if (e.panel !== s.columnHeaders) return;

      const col = e.getColumn();
      const shouldDisable =
        disableFilterIcon && (col.binding === "id" || col.binding === "sales");

      wjCore.toggleClass(e.cell, "disabled-icon", shouldDisable);
    },
    [disableFilterIcon]
  );

  return (
    <>
      <label style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>
        <input
          type="checkbox"
          checked={disableFilterIcon}
          onChange={(e) => setDisableFilterIcon(e.target.checked)}
        />
        Disable Filter Icon (ID + Sales)
      </label>

      <FlexGrid itemsSource={data} formatItem={onFormatItem}>
        <FlexGridFilter />
        <FlexGridColumn header="ID" binding="id" />
        <FlexGridColumn header="Country" binding="country" />
        <FlexGridColumn header="Sales" binding="sales" />
        <FlexGridColumn header="Expenses" binding="expenses" />
      </FlexGrid>
    </>
  );
}

Add CSS that targets the filter element (.wj-elem-filter) inside those header cells and turns off pointer events

Add global CSS that disables pointer events for the filter icon element within header cells that have the disabled-icon class.

/* styles.css (or any global stylesheet) */
.disabled-icon .wj-elem-filter {
  pointer-events: none;
  opacity: 0.2 !important;
}

And that's it! If implemented correctly, your FlexGrid filter icon is now disabled.

Happy coding!