Disabling FlexGrid Filter Icon in Angular

Background:

Wijmo's FlexGridFilter icon is fully customizable. You can adjust the appearance or change the icon entirely using CSS. Additionally, you can add further customization using built in events to alter the behavior of the icon.

Steps to Complete:

1. Add a checkbox that controls whether the filter icon is disabled (optional).
2. Handle the grid’s formatItem event and add a CSS class (e.g. disabled-icon) to the column header cells you want to disable when the checkbox is checked.
3. Add CSS that targets the filter element (.wj-elem-filter) inside those header cells and turns off pointer events.

Getting Started:

Add a checkbox that controls whether the filter icon is disabled (optional).

<!-- src/app/app.component.html -->
<label style="display:inline-flex; gap:.5rem; align-items:center; margin-bottom: 0.75rem;">
  <input type="checkbox" [(ngModel)]="disableFilterIcon" />
  Disable Filter Icon (ID + Sales)
</label>

<wj-flex-grid
  #theGrid
  [itemsSource]="data"
  (formatItem)="onFormatItem(theGrid, $event)"
>
  <!-- Enables the Excel-like filter UI (and the filter icons in column headers) -->
  <wj-flex-grid-filter></wj-flex-grid-filter>

  <wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column>
  <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
  <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>
  <wj-flex-grid-column header="Expenses" binding="expenses"></wj-flex-grid-column>
</wj-flex-grid>

Handle the grid’s formatItem event and add a CSS class (e.g. disabled-icon) to the column header cells you want to disable when the checkbox is checked.

// src/app/app.component.ts
import { Component } from '@angular/core';
import * as wjCore from '@mescius/wijmo';
import * as wjGrid from '@mescius/wijmo.grid';

type RowItem = {
  id: number;
  country: string;
  sales: number;
  expenses: number;
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  disableFilterIcon = false;

  data: RowItem[] = [
    { id: 1, country: 'US', sales: 12000, expenses: 8000 },
    { id: 2, country: 'Germany', sales: 9000, expenses: 7000 },
    { id: 3, country: 'Japan', sales: 15000, expenses: 11000 },
  ];

  /**
   * Adds/removes a CSS class on specific column-header cells so CSS can disable the filter icon.
   */
  onFormatItem(grid: wjGrid.FlexGrid, e: wjGrid.FormatItemEventArgs): void {
    if (e.panel !== grid.columnHeaders) return;

    const col = e.getColumn();
    const shouldDisable =
      this.disableFilterIcon && (col.binding === 'id' || col.binding === 'sales');

    wjCore.toggleClass(e.cell, 'disabled-icon', shouldDisable);
  }
}

Add CSS that targets the filter element (.wj-elem-filter) inside those header cells and turns off pointer events.

/* The style being added */
.disabled-icon .wj-elem-filter {
  pointer-events: none;
  opacity: 0.2 !important;
}

And that's it! If implemented correctly, your FlexGrid filter icon is now disabled.

Happy coding!