HelpBot Assistant

How can I help you?

Filtering in Angular Grid Component

19 Mar 202624 minutes to read

Filtering is a powerful feature in the Syncfusion® Angular Grid component that enables selective viewing of data based on specific criteria. It allows narrowing down large datasets to focus on relevant information, thereby enhancing data analysis and decision-making.

Set up filtering

To use filtering functionality, inject FilterService to the providers array.

import { GridModule,FilterService } from '@syncfusion/ej2-angular-grids';
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

@Component({
    imports: [GridModule],
    providers: [PageService,SortService,FilterService,GroupService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowPaging]="true" [allowSorting]="true"
                [allowFiltering]="true" [pageSettings]="pageSettings">
                <e-columns>
                    <!-- Add column definitions here -->
                </e-columns>
                </ejs-grid>`
})

Enable filtering

To enable filtering in the grid, set the allowFiltering property to true. Once filtering is enabled, configure various filtering options through the filterSettings property to define the behavior and appearance of filters.

The following example demonstrates basic filtering functionality:

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FilterService, GridModule, GroupService, PageService, PageSettingsModel, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [GridModule],
    providers: [PageService,SortService,FilterService,GroupService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowPaging]="true" [allowSorting]="true"
                [allowFiltering]="true" [pageSettings]="pageSettings">
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public pageSettings?: PageSettingsModel;

    ngOnInit(): void {
        this.data = data;
        this.pageSettings = { pageSize: 6 };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Initial filter

To apply an initial filter, specify the filter criteria using the predicate object in filterSettings.columns. The predicate object represents the filtering condition and contains properties such as field, operator, and value.

The following example demonstrates initial filter configuration:

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FilterService, FilterSettingsModel, GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [GridModule],
    providers: [FilterService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowFiltering]='true' [filterSettings]='filterOptions' height='273px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=100></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public filterOptions?: FilterSettingsModel;

    ngOnInit(): void {
        this.data = data;
        this.filterOptions = {
            columns: [{ field: 'ShipCity', matchCase: false, operator: 'startswith', predicate: 'and', value: 'reims' },
            { field: 'ShipName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Vins et alcools Chevalier' }]
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Initial filter with multiple values for same column

Initial filtering with multiple values allows to preset filter conditions for a specific column using multiple criteria. This displays only records matching any of the specified values when the grid first renders.

Set multiple predicate objects in filterSettings.columns for the same field.

The following example filters the “Customer ID” column to show only specific customer records.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FilterService, FilterSettingsModel, GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [GridModule],
    providers: [FilterService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowFiltering]='true' [filterSettings]='filterOptions' height='273px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=100></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public filterOptions?: FilterSettingsModel;

    ngOnInit(): void {
        this.data = data;
        this.filterOptions = {
            type:'Excel',
            columns: [{
                field: 'CustomerID',
                matchCase: false,
                operator: 'startswith',
                predicate: 'or',
                value: 'VINET',
            },
            {
                field: 'CustomerID',
                matchCase: false,
                operator: 'startswith',
                predicate: 'or',
                value: 'HANAR',
            },]
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Initial filter with multiple values for different columns

Initial filter configuration with multiple values across different columns sets predefined filter criteria for each column. This configuration displays filtered records immediately when the grid loads.

To apply filters with multiple values for different columns at initial rendering, configure multiple filter predicate objects in filterSettings.columns.

The following example demonstrates to perform an initial filter with multiple values for different “Order ID” and “Customer ID” columns using filterSettings.columns and predicate.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { CheckBoxSelectionService, DropDownListAllModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { FilterService, FilterSettingsModel, GridModule, PageService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [
        GridModule,
        MultiSelectModule,
        DropDownListAllModule,
        CheckBoxModule
        ],
    providers: [FilterService, PageService,CheckBoxSelectionService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowFiltering]='true' [filterSettings]='filterOptions' height='273px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=100></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public filterOptions?: FilterSettingsModel;

    ngOnInit(): void {
        this.data = data;
        this.filterOptions = {
            type:'Excel',
            columns: [
                {
                    field: 'CustomerID',
                    matchCase: false,
                    operator: 'startswith',
                    predicate: 'or',
                    value: 'VINET',
                },
                {
                    field: 'CustomerID',
                    matchCase: false,
                    operator: 'startswith',
                    predicate: 'or',
                    value: 'HANAR',
                },
                {
                    field: 'OrderID',
                    matchCase: false,
                    operator: 'lessThan',
                    predicate: 'or',
                    value: 10250,
                },
                {
                    field: 'OrderID',
                    matchCase: false,
                    operator: 'notEqual',
                    predicate: 'or',
                    value: 10262,
                },
            ]
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Filter operators

The Grid provides various filter operators to define filter conditions for columns. Define the filter operator using the operator property in filterSettings.columns.

The available operators and its supported data types are:

Operator  Description  Supported Types
startsWith Checks whether a value begins with the specified value. String
endsWith Checks whether a value ends with specified value. String
contains Checks whether a value contains with specified value. String
doesnotstartwith Checks whether the value does not begin with the specified value. String
doesnotendwith Checks whether the value does not end with the specified value. String
doesnotcontain Checks whether the value does not contain the specified value. String
equal Checks whether a value equal to specified value. String | Number | Boolean | Date
notEqual Checks whether a value not equal to specified value. String | Number | Boolean | Date
greaterThan Checks whether a value is greater than with specified value. Number | Date
greaterThanOrEqual Checks whether a value is greater than or equal to specified value. Number | Date
lessThan Checks whether a value is less than with specified value. Number | Date
lessThanOrEqual Checks whether a value is less than or equal to specified value. Number | Date
isnull Returns the values that are null. String | Number | Date
isnotnull Returns the values that are not null. String | Number | Date
isempty Returns the values that are empty. String
isnotempty Returns the values that are not empty. String
between Filter the values based on the range between the start and end specified values. Number | Date
in Filters multiple records in the same column that exactly match any of the selected values. String | Number | Date
notin Filters multiple records in the same column that do not match any of the selected values. String | Number | Date

By default, the grid uses different filter operators for different column types. The default filter operator for string columns is startswith, for numeric columns is equal, and for boolean columns is equal.

Wildcard and LIKE operator filter

Wildcard and LIKE filter operators filters the value based on the given string pattern, and they apply to string-type columns. But it will work slightly differently.

Wildcard filtering

The Wildcard filter processes one or more search patterns using the “*” symbol, retrieving values matching the specified patterns. This filter option supports all search scenarios in the DataGrid.

Wildcard pattern examples:

Operator Description
a*b Everything that starts with “a” and ends with “b”
a* Everything that starts with “a”
*b Everything that ends with “b”
a Everything that contains “a”
ab* Everything containing “a”, followed by anything, then “b”, followed by anything

Wildcard filter in Angular Grid.

LIKE filtering

The LIKE filter processes single search patterns using the “%” symbol, retrieving values matching the specified patterns. The following Grid features support LIKE filtering on string-type columns:

LIKE pattern examples:

Operator Description
%ab% Returns all values that contain “ab” characters
ab% Returns all values that end with “ab” characters
%ab Returns all values that start with “ab” characters

LIKE filter in Angular Grid.

Diacritics filter

The diacritics filter feature handles text data that includes accented characters. Diacritics are accent marks added to letters (examples: é, ñ, ü, ç). By default, the grid ignores these characters during filtering.

This feature is essential for international data where names like “José” and “Jose” should be treated differently (or the same, depending on requirements).

Enable diacritic character consideration by setting filterSettings.ignoreAccent to true.

The following example demonstrates diacritics filtering with the ignoreAccent property set to true:

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FilterService, FilterSettingsModel, GridModule, PageService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [PageService, FilterService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowFiltering]='true' [filterSettings]='filterOptions' height='273px' >
                <e-columns>
                    <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=140></e-column>
                    <e-column field='Name' headerText='Name' width=140></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=170></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=140></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public filterOptions?: FilterSettingsModel;

    ngOnInit(): void {
        this.data = data;
        this.filterOptions = {
           ignoreAccent: true
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Perform ENUM column filtering

The Syncfusion Angular Grid supports filtering enum-type data using the FilterTemplate feature. This is particularly useful for filtering predefined values, such as categories or statuses.

To achieve this functionality:

  1. Render DropDownList in the FilterTemplate for the enum-type column
  2. Bind the enumerated list data to the column
  3. Use the template property to display enum values in a readable format
  4. In the change event of the DropDownList, dynamically filter the column using the filterByColumn method

The following example demonstrates enum-type data filtering:

import { Component, OnInit, ViewChild } from '@angular/core';
import { GridModule,GridComponent,FilterService } from '@syncfusion/ej2-angular-grids';
import { DropDownListModule, ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';
import { data, OrderData, FileType } from './datasource';

@Component({
  imports: [GridModule, DropDownListModule],
  selector: 'app-root',
  standalone: true,
  providers: [FilterService],
  template: `
    <ejs-grid #grid [dataSource]="data" [allowFiltering]="true" height="273px">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
        <e-column field="ShipCity" headerText="Ship City" width="100"></e-column>
        <e-column field="ShipName" headerText="Ship Name" width="100"></e-column>
        <e-column field="Type" headerText="Type" width="130">
          <ng-template #template let-data>
            {{ data.Type === 1 ? 'Base' : data.Type === 2 ? 'Replace' : data.Type === 3 ? 'Delta' : '' }}
          </ng-template>
          <ng-template #filterTemplate let-data>
            <div>
              <ejs-dropdownlist  #dropDown [dataSource]="filterDropData" [fields]="{ text: 'Type', value: 'Type' }" [value]="filterDropData[0].Type" (change)="onTypeFilterChange($event)">
              </ejs-dropdownlist>
            </div>
          </ng-template>
        </e-column>
      </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {
  @ViewChild('grid') public grid?: GridComponent;
  public data?: OrderData[];
  public filterDropData: { Type: string }[] = [
    { Type: 'All' },
    { Type: 'Base' },
    { Type: 'Replace' },
    { Type: 'Delta' },
  ];
  ngOnInit(): void {
    this.data = data; 
  }
  public onTypeFilterChange(args: ChangeEventArgs): void {
    if (args.value === 'All') {
      this.grid?.clearFiltering();
    } else {
      this.grid?.filterByColumn(
        'Type',
        'contains',
        FileType[args.value as keyof typeof FileType]
      );
    }
  }
}
export enum FileType  {
    Base = 1,
    Replace = 2,
    Delta = 3
}
export interface OrderData {
    OrderID: number;
    CustomerID: string;
    EmployeeID:number;
    OrderDate:Date,
    ShipCity: string;
    ShipAddress:string;
    ShipName: string;
    ShipRegion:string;
    ShipPostalCode:string;
    ShipCountry:string;
    Freight:number;
    Verified:boolean;
    Type: FileType;
}
export let data: OrderData[] = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: true, Type: FileType.Base,
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: false, Type: FileType.Replace,
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: true, Type: FileType.Delta,
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: true, Type: FileType.Base,
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: true, Type: FileType.Replace,
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: true, Type: FileType.Delta,
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: false, Type: FileType.Base,
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: true, Type: FileType.Replace,
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: false, Type: FileType.Delta,
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: true, Type: FileType.Base,
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: true, Type: FileType.Replace,
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: false, Type: FileType.Delta,
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: true, Type: FileType.Base,
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: false, Type: FileType.Replace,
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: true, Type: FileType.Delta,
    }
];
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Filtering with case sensitivity

The Grid provides the flexibility to enable or disable case sensitivity during filtering. Control whether filtering operations consider the case of characters using the enableCaseSensitivity property within filterSettings.

Below is an example code demonstrating to enable or disable case sensitivity while filtering:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule, SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { FilterService, FilterSettingsModel, GridComponent, GridModule, PageService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [
        GridModule,
        ButtonModule,
        SwitchModule,
        DropDownListAllModule
        ],
    providers: [PageService, FilterService],
    standalone: true,
    selector: 'app-root',
    template: `<div class='container'>
    <label for="unchecked"> Enable Case Sensitivity </label>
    <ejs-switch id="unchecked" (change)="onToggleCaseSensitive()"></ejs-switch>
</div>
<ejs-grid [dataSource]='data' #grid [allowFiltering]='true' [filterSettings]='filterOptions' height='270px'>
    <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
        <e-column field='ShipCountry' headerText='ShipCountry' textAlign='Right' width=90></e-column>
        <e-column field='ShipCity' headerText='Ship City' textAlign='Right' width=120></e-column>
        <e-column field='ShipRegion' headerText='Ship Region' textAlign='Right' width=120></e-column>
    </e-columns>
</ejs-grid>
    `
})
export class AppComponent implements OnInit {

    @ViewChild('grid')
    public grid?: GridComponent;
    public data?: object[];
    public isCaseSensitive: boolean = false;
    public filterOptions?: FilterSettingsModel | undefined;

    ngOnInit(): void {
        this.data = data;
        this.filterOptions = { enableCaseSensitivity: this.isCaseSensitive };
    }
    onToggleCaseSensitive(): void {
        this.filterOptions = { enableCaseSensitivity: !this.isCaseSensitive };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable different filter for a column

The Grid offers flexibility to customize filtering behavior for different columns by enabling various filter types such as Menu, Excel, or CheckBox. This allows tailoring the filtering experience to suit specific column needs. For example, use a menu-based filter for a category column, an Excel-like filter for a date column, and a checkbox filter for a status column.

It can be achieved by adjusting the column.filter.type property based on requirements.

Here’s an example where the menu filter is enabled by default for all columns, and filter types can be modified dynamically through a dropdown:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { ChangeEventArgs, CheckBoxSelectionService, DropDownListAllModule, DropDownListComponent, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { Column, FilterService, FilterSettingsModel, FilterType, GridComponent, GridModule, PageService } from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [ 
      GridModule,
      MultiSelectModule,
      DropDownListAllModule,
      CheckBoxModule,
      ButtonModule
      ],
  providers: [FilterService, PageService, CheckBoxSelectionService],
  standalone: true,
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
  @ViewChild('grid') public grid?: GridComponent;
  @ViewChild('type') public typeDropdown?: DropDownListComponent;

  public data?: object[];
  public filterSettings?: FilterSettingsModel = { type: 'Menu' };
  public columnFilterSettings?: FilterSettingsModel;
  public fieldData: string[] | undefined;
  public typeData: string[] = [];
  public column: Column | undefined;

  ngOnInit(): void {
    this.data = data;
  }
  dataBound() {
    this.fieldData = (this.grid as GridComponent).getColumnFieldNames();
  }
  onFieldChange(args: ChangeEventArgs): void {
    (this.typeDropdown as DropDownListComponent).enabled = true;
    this.typeData = ['Menu', 'CheckBox', 'Excel'];
    this.column = (this.grid as GridComponent).getColumnByField(args.value as string);
  }
  onTypeChange(args: ChangeEventArgs): void {
    this.columnFilterSettings = { type: args.value as FilterType};
    (this.column as Column).filter = this.columnFilterSettings;
    (this.grid as GridComponent).refresh();
  }
}
<div id="content" class="container">
    <div class="input-container">
        <label for="fields" class="label">Select Column</label>
        <ejs-dropdownlist #field id="fields" [dataSource]="fieldData" (change)="onFieldChange($event)"
            placeholder="Eg: OrderID"></ejs-dropdownlist>
    </div>
    <div class="input-container">
        <label for="types" class="label">Select Filter Type</label>
        <ejs-dropdownlist #type id="types" [dataSource]="typeData" (change)="onTypeChange($event)"
            placeholder="Eg: Excel" [enabled]="false"></ejs-dropdownlist>
    </div>
</div>
<ejs-grid #grid [dataSource]='data' [allowFiltering]='true' height='220px' allowPaging=true (dataBound)="dataBound()"
    [filterSettings]="filterSettings">
    <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' width=100></e-column>
        <e-column field='OrderDate' headerText='Order Date' format='yMd' width=100></e-column>
        <e-column field='Verified' headerText='Verified' width=100 type='boolean' displayAsCheckBox="true"></e-column>
    </e-columns>
</ejs-grid>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Change default filter operator for particular column

The Grid provides flexibility to change the default filter operator for a particular column. By default, the filter operator for string columns is startswith, for numeric columns is equal, and for boolean columns is equal. Customize the filter operator to better match the nature of the data using the “operator” property within filterSettings.

Here’s an example that demonstrates to change the default filter operator column :

import { data, numericOperatorsData, stringOperatorsData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { ChangeEventArgs, CheckBoxSelectionService, DropDownListAllModule, DropDownListComponent, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { Column, FilterService, GridComponent, GridModule, PageService } from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [
        GridModule,
        MultiSelectModule,
        DropDownListAllModule,
        CheckBoxModule, 
        ButtonModule
      ],
  providers: [FilterService, PageService, CheckBoxSelectionService],
  standalone: true,
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
  @ViewChild('grid') public grid?: GridComponent;
  @ViewChild('operator') public operatorDropdown?: DropDownListComponent;

  public data?: object[];
  public fieldData?: string[];
  public availableOperators: object[] |string | undefined;
  public column: Column | undefined;

  ngOnInit(): void {
    this.data = data;
  }
  dataBound() {
    this.fieldData = (this.grid as GridComponent).getColumnFieldNames();
  }
  onFieldChange(args: ChangeEventArgs): void {
    this.availableOperators=[]; 
    (this.operatorDropdown as DropDownListComponent).enabled = true;
    this.column = (this.grid as GridComponent).getColumnByField(args.value as string);
    if (this.column) {
      this.availableOperators = this.column.type === 'string' ? stringOperatorsData : numericOperatorsData;
    }
  }
  onOperatorChange(args: ChangeEventArgs): void {
    (this.column as Column).filter = { operator: args.value as string };
  }
}
<div id='content' class='container'>
    <div class='input-container'>
        <label for='fields' class='label'>Select Column</label>
        <ejs-dropdownlist #field id='fields' [dataSource]='fieldData' (change)='onFieldChange($event)'
            placeholder='Eg: OrderID'></ejs-dropdownlist>
    </div>
    <div class='input-container'>
        <label for='operator' class='label'>Select Operator</label>
        <ejs-dropdownlist #operator id='operator' [dataSource]='availableOperators' (change)='onOperatorChange($event)'
            placeholder='Eg: Equal' [enabled]='false'></ejs-dropdownlist>
    </div>
</div>
<ejs-grid #grid [dataSource]='data' [allowFiltering]='true' height='195px' allowPaging=true (dataBound)='dataBound()'>
    <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' width=100></e-column>
        <e-column field='ShipCity' headerText='Ship City' width=120></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width=120></e-column>
    </e-columns>
</ejs-grid>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Filter grid programmatically with single and multiple values using method

Programmatic filtering allows applying filters to specific columns without relying on user interface interactions. This is achieved using the filterByColumn method.

The following example demonstrates programmatic filtering using single and multiple values for the “Order ID” and “Customer ID” columns. The filterByColumn method is called within an external button click function.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { CheckBoxSelectionService, DropDownListAllModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { FilterService, FilterSettingsModel, GridComponent, GridModule, PageService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [  
        GridModule,
        MultiSelectModule,
        DropDownListAllModule,
        ButtonModule
    ],
    providers: [FilterService, PageService,CheckBoxSelectionService],
    standalone: true,
    selector: 'app-root',
    template: `
    <button ejs-button cssClass="e-outline" (click)="onSingleValueFilter()">Filter with single value</button>
    <button ejs-button cssClass="e-outline" style="margin-left:5px" (click)="onMultipleValueFilter()">Filter with multiple values</button>
    <ejs-grid #grid style="padding: 10px 10px" [dataSource]='data' [allowFiltering]='true' [filterSettings]='filterOptions' height='273px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=100></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public filterOptions?: FilterSettingsModel;
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data; 
        this.filterOptions= {type:'Excel'};          
    }
    onSingleValueFilter() {
        (this.grid as GridComponent).clearFiltering();
        // filter OrderID column with single value
        (this.grid as GridComponent).filterByColumn('OrderID', 'equal', 10248); 
    }
    onMultipleValueFilter() {
        (this.grid as GridComponent).clearFiltering();
        // filter CustomerID column with multiple values
        (this.grid as GridComponent).filterByColumn('CustomerID', 'equal', [
            'VINET',
            'TOMSP',
            'ERNSH',
        ]); 
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Get filtered records

Retrieve filtered records using available methods and properties in the Grid component when working with data that matches currently applied filters.

1. Using the getFilteredRecords() method

The getFilteredRecords method obtains an array of records that match currently applied filters on the grid.

The following example demonstrates getting filtered data using the getFilteredRecords method:

import { data } from './datasource';
import { CommonModule } from '@angular/common';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { FilterService, GridComponent, GridModule, PageService } from '@syncfusion/ej2-angular-grids';
import { MessageModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [
      CommonModule,
      GridModule,
      ButtonModule,
      MessageModule
      ],
  providers: [FilterService, PageService,],
  standalone: true,
  selector: 'app-root',
  templateUrl: 'app.template.html',
})
export class AppComponent implements OnInit {
  @ViewChild('grid')
  public grid?: GridComponent;
  public data?: Object[];
  public pageOptions?: Object;
  public filteredData?: Object;
  showRecords?: boolean;
  showWarning?: boolean;

  public ngOnInit(): void {
    this.data = data;
    this.pageOptions = { pageSize: 10, pageCount: 5 };
  }

  click(): void {
    this.filteredData = (this.grid as GridComponent).getFilteredRecords();
    if (this.filteredData) {
      this.showRecords = true;
    } else {
      this.showRecords = false;
    }
    this.showWarning = !this.showRecords;
  }
  clear(): void {
    (this.grid as GridComponent).clearFiltering();
    this.showRecords = false;
    this.showWarning = false;
  }
}
<div class="control-section">
    <div *ngIf="showWarning">
        <ejs-message id="msg_warning" content="No Records" cssClass="e-content-center"
            severity="Warning"></ejs-message>
    </div>
    <button ejs-button cssClass="e-success" (click)="click()">Get Filtered Data</button><button ejs-button
        cssClass="e-danger" (click)="clear()">Clear</button>
    <ejs-grid #grid id="grid" [dataSource]="data" allowFiltering="true" [height]="220" allowPaging="true">
        <e-columns>
            <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-column>
            <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
            <e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="90"></e-column>
            <e-column field="ShipCity" headerText="Ship City" width="120"></e-column>
        </e-columns>
    </ejs-grid>
    <div *ngIf="showRecords" class="e-content">
        <h3>Filtered Records</h3>
        <ejs-grid #filtergrid [dataSource]="filteredData" allowPaging="true" [height]="200">
            <e-columns>
                <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-column>
                <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
                <e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="90"></e-column>
                <e-column field="ShipCity" headerText="Ship City" width="120"></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</div>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

2. Using the properties in the FilterEventArgs object

Alternatively, use properties available in the FilterEventArgs object to obtain filter record details:

Access these properties using the actionComplete event handler:

actionComplete(args: FilterEventArgs) {
    var column = args.columns;
    var object = args.currentFilterObject;
    var name = args.currentFilteringColumn;
}

Clear filtering using methods

The Grid provides the clearFiltering method to remove filter conditions and reset the grid to its original state.

The following example demonstrates clearing filters using the clearFiltering method:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { FilterService, GridComponent, GridModule, GroupService, PageService, PageSettingsModel, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [ GridModule, ButtonModule],
  providers: [PageService, SortService, FilterService, GroupService],
  standalone: true,
  selector: 'app-root',
  template: `<button ejs-button cssClass="e-primary" (click)="onClick()">Clear filter</button><ejs-grid #grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true'
                [allowFiltering]='true' [pageSettings]='pageSettings'>
                 <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' textAlign='Right' width=120></e-column>
                 </e-columns>
              </ejs-grid>`,
})
export class AppComponent implements OnInit {
  @ViewChild('grid') public grid?: GridComponent;
  public data?: object[];
  public pageSettings?: PageSettingsModel;

  ngOnInit(): void {
    this.data = data;
    this.pageSettings = { pageSize: 6 };
  }
  public onClick(): void {
    this.grid?.clearFiltering(); //clear filtering for all columns
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Filtering events

Filtering events allow customization of grid behavior when filtering is applied. Filtering can be prevented for specific columns, messages displayed to users, or other actions performed to suit application requirements.

Implement filtering events using available events such as actionBegin and actionComplete. These events enable intervention in the filtering process and customization as needed.

The following example demonstrates filtering prevention for the “Ship City” column during the actionBegin event:

import { MultiSelectModule, CheckBoxSelectionService,DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridModule, FilterService, PageService,FilterSettingsModel, GridComponent, FilterEventArgs } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [
        GridModule,
        MultiSelectModule,
        DropDownListAllModule,
        CheckBoxModule,
        MessageModule
        ],
    providers: [FilterService, PageService,CheckBoxSelectionService],
    standalone: true,
    selector: 'app-root',
    template: `<div id='message'>{{message}}</div><ejs-grid #grid [dataSource]='data' [allowFiltering]='true' height='273px' (actionBegin)="actionBegin($event)" (actionComplete)="actionComplete($event)">
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=100></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public filterOptions?: FilterSettingsModel;
    public message: string | undefined;
    @ViewChild('grid') public gridObj?: GridComponent;

    ngOnInit(): void {
        this.data = data;
    }

    actionBegin(args: FilterEventArgs) {
        if (args.requestType == 'filtering' && args.currentFilteringColumn == 'ShipCity') {
            args.cancel = true;
            this.message = 'The ' + args.type + ' event has been triggered and the ' + args.requestType + ' action is cancelled for ' + args.currentFilteringColumn;
        }
    }

    actionComplete(args: FilterEventArgs) {
        if (args.requestType == 'filtering' && args.currentFilteringColumn) {
            this.message = 'The ' + args.type + ' event has been triggered and the ' + args.requestType + ' action for the ' + args.currentFilteringColumn + ' column has been successfully executed';
        } else {
            this.message = '';
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also