Adding Custom FlexGrid Filter Buttons in Angular

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. Import the FlexGrid modules and define the data.
2. Create the FlexGrid and enable filtering.
3. Add a custom button and handle its click event.
4. Load the Wijmo stylesheet.

Getting Started

Import the FlexGrid modules and define the data

import { Component } from '@angular/core';
import { WjGridModule } from '@mescius/wijmo.angular2.grid';
import { WjGridFilterModule } from '@mescius/wijmo.angular2.grid.filter';
import { FlexGridFilter } from '@mescius/wijmo.grid.filter';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WjGridModule, WjGridFilterModule],
  templateUrl: './app.component.html'
})
export class AppComponent {
  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
    }
  ];

}

• WjGridModule provides the grid and column components, while WjGridFilterModule provides the filtering component. The data array supplies the rows displayed in the grid.

Create the FlexGrid and enable filtering

<wj-flex-grid
  [itemsSource]="data"
  [autoGenerateColumns]="false">

  <wj-flex-grid-filter
    #filter
    (initialized)="initFilter(filter)">
  </wj-flex-grid-filter>

  <wj-flex-grid-column
    binding="id"
    header="ID"
    [width]="80">
  </wj-flex-grid-column>

  <wj-flex-grid-column
    binding="country"
    header="Country"
    [width]="150">
  </wj-flex-grid-column>

  <wj-flex-grid-column
    binding="downloads"
    header="Downloads"
    format="n0"
    [width]="150">
  </wj-flex-grid-column>

  <wj-flex-grid-column
    binding="sales"
    header="Sales"
    format="n2"
    [width]="150">
  </wj-flex-grid-column>

  <wj-flex-grid-column
    binding="expenses"
    header="Expenses"
    format="n2"
    [width]="150">
  </wj-flex-grid-column>
</wj-flex-grid>

• The grid binds to the component’s data array and displays the specified columns. Adding wj-flex-grid-filter enables column filtering. Its initialized event calls initFilter, which registers the editor customization handler.

Add a custom button and handle its click event

initFilter(filter: FlexGridFilter): void {
  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.

Load the Wijmo stylesheet

Add the following import to the application’s global styles.css file:

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

• This stylesheet supplies the default appearance of the grid, filter editor, and wj-btn button class. The custom button’s spacing is set directly in the event handler.

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!