Checking for Active FlexGrid Column Filters in Angular

Background:

In Angular apps using Wijmo FlexGrid, you can quickly detect whether any column filters are active, and how many, via the FlexGridFilter API (getColumnFilter, isActive).

Steps to Complete:

1. Add <wj-flex-grid> and <wj-flex-grid-filter> to your template and import their Angular modules.
2. Loop through grid.columns and get each column’s filter via filter.getColumnFilter(col).
3. Check columnFilter.isActive; increment a counter and display the total.

Getting Started:

Add <wj-flex-grid> and <wj-flex-grid-filter> to your template and import their Angular modules

Make sure you have all the required Angular modules.

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

Add the FlexGrid and FlexGrid Filter to your markup.

<!-- src/app/app.component.html -->
<wj-flex-grid #grid [itemsSource]="data" [isReadOnly]="true" [alternatingRowStep]="0">
  <wj-flex-grid-column [binding]="'id'" [header]="'ID'" [width]="60"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'country'" [header]="'Country'"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'downloads'" [header]="'Downloads'"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'sales'" [header]="'Sales'"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'expenses'" [header]="'Expenses'"></wj-flex-grid-column>

  <!-- Attach Excel-like filter UI -->
  <wj-flex-grid-filter #filter></wj-flex-grid-filter>
</wj-flex-grid>

<div style="margin-top:12px; display:flex; gap:8px;">
  <button (click)="countActiveFilters()">Show Active Filter Count</button>
  <button (click)="clearAllFilters()">Clear All Filters</button>
</div>

Loop through grid.columns and get each column’s filter via filter.getColumnFilter(col)

Iterate through the columns using the getColumnFilter method.

// src/app/app.component.ts

countActiveFilters(): number {
    // WjFlexGridFilter inherits FlexGridFilter methods; getColumnFilter returns ColumnFilter with isActive
    let count = 0;
    this.grid.columns.forEach((col: wjcGrid.Column) => {
      const cf = this.filter.getColumnFilter(col);
     ...
  }

Check columnFilter.isActive; increment a counter and display the total

If the column filter contains the isActive property, then increment a variable holding the count to determine the total number of active filters. You can use the alert function to create a popup showing the number.

  countActiveFilters(): number {
    // WjFlexGridFilter inherits FlexGridFilter methods; getColumnFilter returns ColumnFilter with isActive
    let count = 0;
    this.grid.columns.forEach((col: wjcGrid.Column) => {
      const cf = this.filter.getColumnFilter(col);
      if (cf && cf.isActive) count++;
    });
    alert(`Active column filters: ${count}`);
    return count;
  }

// src/app/app.component.ts
import { Component, ViewChild } from '@angular/core';
import * as wjcGrid from '@mescius/wijmo.grid';
import { WjFlexGrid } from '@mescius/wijmo.angular2.grid';
import { WjFlexGridFilter } from '@mescius/wijmo.angular2.grid.filter';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  @ViewChild('grid', { static: true }) grid!: WjFlexGrid;
  @ViewChild('filter', { static: true }) filter!: WjFlexGridFilter;

  data = this.buildData();

  // Keep data simple; replace with your source.
  private buildData() {
    const countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'];
    return Array.from({ length: 50 }, (_, i) => ({
      id: i + 1,
      country: countries[i % countries.length],
      downloads: Math.round(Math.random() * 20000),
      sales: +(Math.random() * 10000).toFixed(2),
      expenses: +(Math.random() * 5000).toFixed(2),
    }));
  }

  countActiveFilters(): number {
    // WjFlexGridFilter inherits FlexGridFilter methods; getColumnFilter returns ColumnFilter with isActive
    let count = 0;
    this.grid.columns.forEach((col: wjcGrid.Column) => {
      const cf = this.filter.getColumnFilter(col);
      if (cf && cf.isActive) count++;
    });
    alert(`Active column filters: ${count}`);
    return count;
  }

  clearAllFilters(): void {
    // Why: quick reset for UX when exploring filters
    this.filter.clear();
  }
}