Identifying and Clearing Applied FlexGrid Filters in JavaScript

Background

In a JavaScript application, you can identify the columns where filters are applied by reading the filterDefinition property of FlexGridFilter. Since filterDefinition is stored as a JSON string, parse it with JSON.parse.

Sorting information is available from the grid’s collectionView.sortDescriptions collection.

Steps to Complete

1. Install and import the Wijmo grid packages.
2. Create the grid host elements.
3. Define the grid data and columns.
4. Initialize the FlexGrid and FlexGridFilter.
5. Read applied filters from filterDefinition.
6. Read applied sorting from sortDescriptions.
7. Clear a specific column’s filter and sort.
8. Clear all filters and sorting.
9. Add the Button Events.

Getting Started

Install and import the Wijmo grid packages

npm install @mescius/wijmo.grid @mescius/wijmo.grid.filter @mescius/wijmo.styles

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

import * as wjcGrid from '@mescius/wijmo.grid';
import * as wjcGridFilter from '@mescius/wijmo.grid.filter';

• wijmo.grid provides FlexGrid, and wijmo.grid.filter provides FlexGridFilter.

Create the grid host elements

<p id="filterStatus">Filters (0): None</p>
<p id="sortStatus">Sorts (0): None</p>

<div id="columnButtons"></div>

<button id="clearAllButton" type="button">
  Clear All Filters and Sorting
</button>

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

• The theGrid element is used as the host element for the Wijmo FlexGrid.

Define the grid data and columns

const columns = [
  { binding: 'id', header: 'Id' },
  { binding: 'country', header: 'Country' },
  { binding: 'date', header: 'Date' },
  { binding: 'amount', header: 'Amount' },
  { binding: 'active', header: 'Active' }
];

const data = getData(20);

function getData(count) {
  const countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');

  return Array.from({ length: count }, (_, index) => ({
    id: index,
    country: countries[index % countries.length],
    date: new Date(2026, index % 12, (index % 28) + 1),
    amount: Math.round(Math.random() * 10000),
    active: index % 4 === 0
  }));
}

• The binding values are used by both filterDefinition and sortDescriptions.

Initialize the FlexGrid and FlexGridFilter

const flex = new wjcGrid.FlexGrid('#theGrid', {
  autoGenerateColumns: false,
  columns,
  itemsSource: data,
  allowSorting: wjcGrid.AllowSorting.MultiColumn
});

const gridFilter = new wjcGridFilter.FlexGridFilter(flex);

gridFilter.filterApplied.addHandler(refreshGridState);
flex.sortedColumn.addHandler(refreshGridState);

• FlexGridFilter adds Excel-style filtering to the grid. The event handlers update the displayed filter and sort information whenever the user changes the grid state.

Read applied filters from filterDefinition

function getFilterDefinition() {
  if (!gridFilter.filterDefinition) {
    return { filters: [] };
  }

  return JSON.parse(gridFilter.filterDefinition);
}

function getColumnHeader(binding) {
  const column = flex.getColumn(binding);
  return column ? column.header : binding;
}

• Each item in filterDefinition.filters represents a column with an active filter.

Read applied sorting from sortDescriptions

function refreshGridState() {
  const filterDefinition = getFilterDefinition();

  const filteredColumns = (filterDefinition.filters || []).map(filter =>
    getColumnHeader(filter.binding)
  );

  const sortedColumns = [];
  const sorts = flex.collectionView.sortDescriptions;

  for (let i = 0; i < sorts.length; i++) {
    const sort = sorts[i];
    const direction = sort.ascending ? 'ascending' : 'descending';
    sortedColumns.push(`${getColumnHeader(sort.property)} (${direction})`);
  }

  document.querySelector('#filterStatus').textContent =
    `Filters (${filteredColumns.length}): ${filteredColumns.join(', ') || 'None'}`;

  document.querySelector('#sortStatus').textContent =
    `Sorts (${sortedColumns.length}): ${sortedColumns.join(', ') || 'None'}`;
}

• This updates the number of applied filters and shows the filtered and sorted column names.

Clear a specific column’s filter and sort

function clearColumnFilterAndSort(binding) {
  const filterDefinition = getFilterDefinition();

  filterDefinition.filters = (filterDefinition.filters || []).filter(
    filter => filter.binding !== binding
  );

  gridFilter.filterDefinition = JSON.stringify(filterDefinition);

  const sorts = flex.collectionView.sortDescriptions;

  for (let i = sorts.length - 1; i >= 0; i--) {
    if (sorts[i].property === binding) {
      sorts.splice(i, 1);
    }
  }

  refreshGridState();
}

• This clears only the selected column’s filter and sort.

Clear all filters and sorting

function clearAllFiltersAndSorts() {
  flex.collectionView.sortDescriptions.clear();
  gridFilter.clear();

  refreshGridState();
}

• This resets the grid to an unfiltered and unsorted state.

Add the Button Events

const buttonHost = document.querySelector('#columnButtons');

columns.forEach(column => {
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = `Clear ${column.header}`;
  button.addEventListener('click', () => {
    clearColumnFilterAndSort(column.binding);
  });

  buttonHost.appendChild(button);
});

document
  .querySelector('#clearAllButton')
  .addEventListener('click', clearAllFiltersAndSorts);

refreshGridState();

With this setup, the JavaScript application can show the number of active filters, display the filtered and sorted column names, clear one column’s filter and sort, or clear all filters and sorting from the grid.

Happy coding!