Identifying and Clearing Applied FlexGrid Filters in Angular

Background

In some Angular applications, you may need to show how many filters are currently applied to a Wijmo FlexGrid, display the column names that are filtered, and allow users to clear filtering or sorting from a specific column.

You can get the active filter information from the filterDefinition property of FlexGridFilter. Since this value is stored as a JSON string, parse it with JSON.parse. Sorting information is available from the grid’s collectionView.sortDescriptions.

Steps to Complete

1. Install and import the Wijmo Angular grid modules.
2. Create the grid data and column definitions.
3. Store references to the FlexGrid and FlexGridFilter.
4. Read filtered columns from filterDefinition.
5. Read sorted columns from sortDescriptions.
6. Clear a specific column’s filter and sort, or clear all filters and sorting.
7. Clear All Filters and Sorting.
8. Add the Angular Markup.

Getting Started

Install and import the Wijmo Angular grid modules

npm install @mescius/wijmo.angular2.all

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import '@mescius/wijmo.styles/wijmo.css';

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

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

• These imports provide the Angular wj-flex-grid and wj-flex-grid-filter components.

Create the grid data and column definitions

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

data = this.getData(20);

private getData(count: number): unknown[] {
  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 important because both filters and sorts are tracked by column binding.

Store references to the FlexGrid and FlexGridFilter

private flex?: wjcGrid.FlexGrid;
private gridFilter?: wjcGridFilter.FlexGridFilter;

onGridInitialized(grid: wjcGrid.FlexGrid): void {
  this.flex = grid;
  this.refreshGridState();
}

onFilterInitialized(filter: wjcGridFilter.FlexGridFilter): void {
  this.gridFilter = filter;
  this.refreshGridState();
}

• The grid reference gives access to sorting, while the filter reference gives access to filterDefinition.

Read filtered columns from filterDefinition

type FilterDefinition = {
  defaultFilterType?: number;
  filters?: Array<{ binding: string; [key: string]: unknown }>;
};

filteredColumns: string[] = [];

private getFilterDefinition(): FilterDefinition {
  if (!this.gridFilter?.filterDefinition) {
    return { filters: [] };
  }

  return JSON.parse(this.gridFilter.filterDefinition);
}

• Each item in filters represents one filtered column.

Read sorted columns from sortDescriptions

sortedColumns: string[] = [];

refreshGridState(): void {
  if (!this.flex || !this.gridFilter) {
    return;
  }

  const filterDefinition = this.getFilterDefinition();

  this.filteredColumns = (filterDefinition.filters ?? []).map(filter =>
    this.getColumnHeader(filter.binding)
  );

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

  for (let i = 0; i < sorts.length; i++) {
    const sort = sorts[i];
    const direction = sort.ascending ? 'ascending' : 'descending';

    this.sortedColumns.push(
      `${this.getColumnHeader(sort.property)} (${direction})`
    );
  }
}

private getColumnHeader(binding: string): string {
  return this.flex?.getColumn(binding)?.header ?? binding;
}

• This method updates both the filtered column list and sorted column list.

Clear a specific column’s filter and sort, or clear all filters and sorting

clearColumnFilterAndSort(binding: string): void {
  if (!this.flex || !this.gridFilter) {
    return;
  }

  const filterDefinition = this.getFilterDefinition();

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

  this.gridFilter.filterDefinition = JSON.stringify(filterDefinition);

  const sorts = this.flex.collectionView.sortDescriptions;

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

  this.refreshGridState();
}

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

Clear All Filters and Sorting

clearAllFiltersAndSorts(): void {
  if (!this.flex || !this.gridFilter) {
    return;
  }

  this.flex.collectionView.sortDescriptions.clear();
  this.gridFilter.clear();

  this.refreshGridState();
}

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

Add the Angular Markup

<p>
  Filters ({{ filteredColumns.length }}):
  {{ filteredColumns.join(', ') || 'None' }}
</p>

<p>
  Sorts ({{ sortedColumns.length }}):
  {{ sortedColumns.join(', ') || 'None' }}
</p>

<button
  *ngFor="let column of columns"
  type="button"
  (click)="clearColumnFilterAndSort(column.binding)">
  Clear {{ column.header }}
</button>

<button type="button" (click)="clearAllFiltersAndSorts()">
  Clear All Filters and Sorting
</button>

<wj-flex-grid
  #flex
  [itemsSource]="data"
  [allowSorting]="'MultiColumn'"
  (initialized)="onGridInitialized(flex)"
  (sortedColumn)="refreshGridState()">

  <wj-flex-grid-column
    *ngFor="let column of columns"
    [binding]="column.binding"
    [header]="column.header">
  </wj-flex-grid-column>

  <wj-flex-grid-filter
    #gridFilter
    (initialized)="onFilterInitialized(gridFilter)"
    (filterApplied)="refreshGridState()">
  </wj-flex-grid-filter>
</wj-flex-grid>

• The filterApplied event refreshes the filter count, and the sortedColumn event refreshes the sort information.

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

Happy coding!