Adding Custom FlexGrid Filter Buttons in JavaScript

Background

The 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. Add a container for the FlexGrid.
2. Import the Wijmo controls and styles.
3. Create the FlexGrid and enable filtering.
4. Add a custom button and handle its click event.

Getting Started

Add a container for the FlexGrid

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

• This element hosts the FlexGrid control. The JavaScript code uses its ID to locate the container and initialize the grid.

Import the Wijmo controls and styles

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

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

• The imports provide the FlexGrid control and its column filtering functionality. The stylesheet supplies the default appearance of Wijmo controls, including the custom button’s wj-btn class.

Create the FlexGrid and enable filtering

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
  }
];

const grid = new FlexGrid('#theGrid', {
  itemsSource: data,
  autoGenerateColumns: false,
  columns: [
    { binding: 'id', header: 'ID', width: 80 },
    { binding: 'country', header: 'Country', width: 150 },
    {
      binding: 'downloads',
      header: 'Downloads',
      format: 'n0',
      width: 150
    },
    {
      binding: 'sales',
      header: 'Sales',
      format: 'n2',
      width: 150
    },
    {
      binding: 'expenses',
      header: 'Expenses',
      format: 'n2',
      width: 150
    }
  ]
});

const filter = new FlexGridFilter(grid);

• The grid displays the sample data using explicitly defined columns. Creating a FlexGridFilter for the grid enables column filtering. Users can click a column’s filter icon to open its filter editor.

Add a custom button and handle its click event

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!