Adding Custom FlexGrid Filter Buttons in Vue

Background

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 and register the FlexGrid components.
2. Create a FlexGrid with column filtering.
3. Add a custom button and handle its click event.

Getting Started

Import and register the FlexGrid components

<script>
import {
  WjFlexGrid,
  WjFlexGridColumn
} from '@mescius/wijmo.vue2.grid';

import {
  WjFlexGridFilter
} from '@mescius/wijmo.vue2.grid.filter';

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

export default {
  components: {
    WjFlexGrid,
    WjFlexGridColumn,
    WjFlexGridFilter
  },

  data() {
    return {
      items: [
        {
          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
        }
      ]
    };
  },

  methods: {
    // Add the initializeFilter method from Step 3 here.
  }
};
</script>

• The imports provide the grid, column definitions, and filtering component. Registering them makes them available in the template. The items array supplies the grid’s data, and the stylesheet provides the default appearance of Wijmo controls.

Create a FlexGrid with column filtering

<template>
  <wj-flex-grid
    :items-source="items"
    :auto-generate-columns="false"
  >
    <wj-flex-grid-column
      binding="id"
      header="ID"
      :width="80"
    />

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

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

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

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

    <wj-flex-grid-filter
      :initialized="initializeFilter"
    />
  </wj-flex-grid>
</template>

• The grid binds to the items array and displays the specified columns. Adding wj-flex-grid-filter inside the grid enables column filtering. Its initialized callback registers the handler that customizes the filter editor.

Add a custom button and handle its click event

methods: {
  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!