Adding Custom FlexGrid Filter Buttons in React

Background

Wijmo’s FlexGrid filter editor provides built-in buttons for applying, clearing, and closing column filters. You can add custom buttons to this editor and handle their click events to perform additional actions.

To customize the editor, handle the filterChanging event of FlexGridFilter. Inside the event handler, use the activeEditor property to access the current filter editor, create a button, and append it to the editor’s button area.

Steps to Complete

1. Import the FlexGrid components and styles.
2. Define the grid’s data.
3. Create a FlexGrid with column filtering.
4. Add a custom button and handle its click event.

Getting Started

Import the FlexGrid components and styles

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

import '@mescius/wijmo.styles/wijmo.css';

• The imports provide the grid, column definitions, and column filtering component. The stylesheet supplies the default appearance of Wijmo controls, including the custom button’s wj-btn class.

Define the grid’s data

const data = [
  {
    id: 1,
    country: 'US',
    downloads: 12000,
    sales: 8500,
    expenses: 3200
  },
  {
    id: 2,
    country: 'Germany',
    downloads: 9500,
    sales: 7200,
    expenses: 2800
  },
  {
    id: 3,
    country: 'UK',
    downloads: 15000,
    sales: 9100,
    expenses: 4100
  },
  {
    id: 4,
    country: 'Japan',
    downloads: 11000,
    sales: 6800,
    expenses: 2500
  }
];

• The data array supplies the rows displayed in the grid. Each object contains values for the ID, country, downloads, sales, and expenses columns.

Create a FlexGrid with column filtering

export default function App() {
  return (
    <FlexGrid
      itemsSource={data}
      autoGenerateColumns={false}
    >
      <FlexGridColumn
        binding="id"
        header="ID"
        width={80}
      />

      <FlexGridColumn
        binding="country"
        header="Country"
        width={150}
      />

      <FlexGridColumn
        binding="downloads"
        header="Downloads"
        format="n0"
        width={150}
      />

      <FlexGridColumn
        binding="sales"
        header="Sales"
        format="n2"
        width={150}
      />

      <FlexGridColumn
        binding="expenses"
        header="Expenses"
        format="n2"
        width={150}
      />

      <FlexGridFilter initialized={initializeFilter} />
    </FlexGrid>
  );
}

• The grid binds to the data array and displays the specified columns. Adding FlexGridFilter inside the grid enables column filtering. Its initialized callback registers the handler that adds the custom button to each filter editor.

Add a custom button and handle its click event

function initializeFilter(filter) {
  filter.filterChanging.addHandler((sender) => {
    const editor = sender.activeEditor;

    if (!editor) {
      return;
    }

    const host = editor.hostElement;

    // Avoid adding the button twice to the same editor.
    if (host.querySelector('.custom-filter-button')) {
      return;
    }

    const buttonArea =
      host.firstElementChild?.lastElementChild;

    if (!buttonArea) {
      return;
    }

    const button = document.createElement('button');

    button.type = 'button';
    button.className = 'wj-btn custom-filter-button';
    button.textContent = 'Custom Btn';
    button.style.marginLeft = '10px';

    button.addEventListener('click', () => {
      window.alert('Custom Btn Clicked!');
      sender.closeEditor();
    });

    buttonArea.appendChild(button);
  });
}

• The filterChanging handler accesses the active editor whenever a user opens a column filter. It creates a button with Wijmo’s wj-btn styling and appends it to the existing button area.
• The click handler displays a message and calls closeEditor() to close the popup. Replace the alert with your application’s custom action. Closing the editor does not apply pending filter changes.
• The duplicate check prevents multiple custom buttons from being added to the same editor. The button-area lookup follows the DOM structure used in the support sample, so check it when upgrading Wijmo or using a customized editor template.

With this setup, each FlexGrid column filter editor includes a custom button with its own click handler, allowing you to add application-specific actions alongside the built-in filter controls.

Happy coding!