Search results

Filtering in Angular Grid component

04 Aug 2021 / 13 minutes to read

Filtering allows you to view particular records based on filter criteria. To enable filtering in the Grid, set the allowFiltering to true. Filtering options can be configured through filterSettings.

To use filter, inject FilterService in the provider section of AppModule.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

@Component({
selector: 'app-root',
template: `<ejs-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-columns>
            </ejs-grid>`
})
export class AppComponent implements OnInit {

public data: object[];

ngOnInit(): void {
    this.data = data;
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, FilterService, PageService} from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [FilterService, PageService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Initial filter

To apply the filter at initial rendering, set the filter predicate object in filterSettings.columns.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { FilterSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
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' }]
    };
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, FilterService, PageService} from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [FilterService, PageService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Filter operators

The filter operator for a column can be defined in filterSettings.columns.operator property.

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
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

By default, the filterSettings.columns.operator value is equal.

Filter bar

By defining the allowFiltering to true, then filter bar row will be rendered next to header which allows you to filter data. You can filter the records with different expressions depending upon the column type.

Filter bar Expressions:

You can enter the following filter expressions(operators) manually in the filter bar.

Expression  Example  Description  Column Type
=value  equal  Number
!=  !=value  notequal  Number
>value  greaterthan  Number
<value  lessthan  Number
>=  >=value  greaterthanorequal  Number
<= <=value lessthanorequal  Number
*value  startswith  String
%value  endswith  String
N/A  N/A  Always equal operator will be used for Date filter  Date
N/A  N/A  Always equal operator will be used for Boolean filter  Boolean
Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

@Component({
selector: 'app-root',
template: `<ejs-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-columns>
            </ejs-grid>`
})
export class AppComponent implements OnInit {

public data: object[];

ngOnInit(): void {
    this.data = data;
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, FilterService, PageService} from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [FilterService, PageService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Filter bar template with custom component

The filterBarTemplate is used to add a custom component for a particular column and this contains the following functions.

  • create – It is used for creating custom components.
  • write - It is used to wire events for custom components.

In the following sample dropdown is used as custom component in EmployeeID column.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, IFilterUI, Column } from '@syncfusion/ej2-angular-grids';
import { data } from './datasource';

@Component({
selector: 'app-root',
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='EmployeeID' headerText='Employee ID' width=120 [filterBarTemplate]='templateOptions'></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 templateOptions: IFilterUI;

@ViewChild('grid')
public gridObj: GridComponent;

ngOnInit(): void {
    this.data = data;
    this.templateOptions = {
        create: (args: { element: Element, column: Column }) => {
            const dd = document.createElement('select');
            dd.id = 'EmployeeID';
            const dataSource: string[] = ['All', '1', '3', '4', '5', '6', '8', '9'];
            for (const value of  dataSource) {
                const option: HTMLOptionElement = document.createElement('option');
                option.value = value;
                option.innerHTML = value;
                dd.appendChild(option);
            }
            return dd;
        },
        write: (args: { element: Element, column: Column }) => {
            args.element.addEventListener('input', (args1: Event): void => {
                const target: HTMLInputElement = args1.currentTarget as HTMLInputElement;
                if (target.value !== 'All') {
                    const value = + +target.value;
                    this.gridObj.filterByColumn(target.id, 'equal', value);
                } else {
                    this.gridObj.removeFilteredColsByField(target.id);
                }
            });
        },
    };
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, FilterService, PageService} from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [FilterService, PageService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Change default filterbar operator

You can change the default filter operator by extending filterModule.filterOperators property in dataBound event. In the following sample, we have changed the default operator for string typed columns as contains from startsWith.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { data } from './datasource';

@Component({
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='data' (dataBound)='dataBound()' [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-columns>
            </ejs-grid>`
})
export class AppComponent implements OnInit {

public data: object[];
@ViewChild('grid')
public grid: GridComponent;
dataBound() {
    Object.assign((this.grid.filterModule as any).filterOperators, { startsWith: 'contains' });
}

ngOnInit(): void {
    this.data = data;
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, FilterService, PageService} from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [FilterService, PageService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Filter menu

You can enable filter menu by setting the filterSettings.type as Menu. The filter menu UI will be rendered based on its column type, which allows you to filter data. You can filter the records with different operators.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { FilterSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
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: 'Menu'
    };
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, FilterService, PageService} from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [FilterService, PageService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Custom component in filter menu

The column.filter.ui is used to add custom filter components to a particular column. To implement custom filter ui, define the following functions:

  • create: Creates custom component.
  • write: Wire events for custom component.
  • read: Read the filter value from custom component.

In the following sample, dropdown is used as custom component in the OrderID column.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { DataManager } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-angular-dropdowns';
import { createElement } from '@syncfusion/ej2-base';
import { FilterSettingsModel, IFilter, Filter } from '@syncfusion/ej2-angular-grids';

@Component({
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' [allowFiltering]='true' [filterSettings]='filterOptions' height='273px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' [filter]= 'filter' 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 filter: IFilter;
public dropInstance: DropDownList;

ngOnInit(): void {
    this.data = data;
    this.filterOptions = {
        type: 'Menu'
    };
    this.filter = {
        ui: {
            create: (args: { target: Element, column: object }) => {
                const flValInput: HTMLElement = createElement('input', { className: 'flm-input' });
                args.target.appendChild(flValInput);
                this.dropInstance = new DropDownList({
                    dataSource: new DataManager(data),
                    fields: { text: 'OrderID', value: 'OrderID' },
                    placeholder: 'Select a value',
                    popupHeight: '200px'
                });
                this.dropInstance.appendTo(flValInput);
            },
            write: (args: {
                column: object, target: Element, parent: any,
                filteredValue: number | string
            }) => {
                this.dropInstance.value = args.filteredValue;
            },
            read: (args: { target: Element, column: any, operator: string, fltrObj: Filter }) => {
                args.fltrObj.filterByColumn(args.column.field, args.operator, this.dropInstance.value);

            }
        }
    };
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, FilterService, PageService} from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [FilterService, PageService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Enable different filter for a column

You can use both Menu and Checkbox filter in a same Grid. To do so, set the column.filter.type as Menu or Checkbox.

In the following sample menu filter is enabled by default and checkbox filter is enabled for the CustomerID column using the column.filter.type.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { FilterSettingsModel, IFilter } from '@syncfusion/ej2-angular-grids';

@Component({
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' [filter] = 'filter' 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 filter: IFilter;

ngOnInit(): void {
    this.data = data;
    this.filterOptions = {
        type: 'Menu'
    };
    this.filter = {
        type: 'CheckBox'
    };
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, FilterService, PageService} from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [FilterService, PageService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Filter template

Filter template provides an option to use the custom filter UI for a particular column by using the columns.filterTemplate can be used by the filter bar, menu, and advanced filter from an excel filter.

The columns.filterTemplate property value should be a Angular functional component.

Filter Bar

You can customize default filter bar component of a column by custom component using filter template.

The following example demonstrates the way to use filter template for a column when using filter bar. In the following example, the DropdownList component is used to filter Name column using filter template.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { DataUtil } from '@syncfusion/ej2-data';
import { GridComponent } from '@syncfusion/ej2-angular-grids';

@Component({
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='data' [allowFiltering]='true' [allowPaging]='true' >
            <e-columns>
                <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=140></e-column>
                <e-column field='Name' headerText='Name' width=140>
                    <ng-template #filterTemplate let-data>
                        <ejs-dropdownlist id='dropdown' [(ngModel)]="data.Name" [enabled]="data.column.allowFiltering"
                        (change)=onChange($event) [dataSource]='dropdata' [fields]='fields'[popupHeight]='height' ></ejs-dropdownlist>
                   </ng-template>
                </e-column>
                <e-column field='ShipName' headerText='Ship Name' width=170></e-column>
                <e-column field='CustomerID' headerText='CustomerID' width=140></e-column>
            </e-columns>
            </ejs-grid>`
})
export class AppComponent implements OnInit {

@ViewChild('grid') public grid: GridComponent;
public data: object[];
public fields: object = { text: 'Name', value: 'Name' };
public height = '220px';
public dropdata: string[] = DataUtil.distinct(data, 'Name') as string[];
public onChange(args: any): void {
    this.grid.filterByColumn('Name', 'equal', args.value);
}
ngOnInit(): void {
    this.data = data;
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService, FilterService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { FormsModule } from '@angular/forms';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule,
        DropDownListAllModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                FilterService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Filter Menu

You can customize default filter menu component of a column by custom component using filter template.

The following example demonstrates the way to use filter template for a column when using filter menu. In the following example, the DropdownList component is used to filter ShipName column using filter template.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { DataUtil } from '@syncfusion/ej2-data';
import { FilterSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' [allowFiltering]='true' [allowPaging]='true' [filterSettings]='filterOption'>
            <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='ShipName' width=170>
                    <ng-template #filterTemplate let-data>
                        <ejs-dropdownlist id='dropdown' [(ngModel)]="data.ShipName" [dataSource]='dropdata'
                         [fields]='fields' [popupHeight]='height' ></ejs-dropdownlist>
                   </ng-template>
                </e-column>
                <e-column field='CustomerID' headerText='CustomerID' width=140></e-column>
            </e-columns>
            </ejs-grid>`
})
export class AppComponent implements OnInit {

public data: object[];
public dropdata: string[] = DataUtil.distinct(data, 'ShipName') as string[];
public filterOption: FilterSettingsModel = { type: 'Menu' };
public fields: object = { text: 'CustomerID', value: 'CustomerID' };
public height = '220px';
ngOnInit(): void {
    this.data = data;
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService, FilterService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { FormsModule } from '@angular/forms';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule,
        DropDownListAllModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                FilterService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Excel Filter

You can use the columns.filterTemplate property to define custom component in advanced filter UI from excel filter for a particular column.

The following example demonstrates the way to use filter template for a column when using excel filter. In the following example, the DropdownList component is used to filter CustomerID column using filter template.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { DataUtil } from '@syncfusion/ej2-data';
import { FilterSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' [allowFiltering]='true' [allowPaging]='true'[filterSettings]='filterOption'>
            <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='CustomerID' headerText='CustomerID' width=170>
                    <ng-template #filterTemplate let-data>
                        <ejs-dropdownlist id='dropdown' [(ngModel)]='data.CustomerID' [dataSource]='dropdata'
                         [fields]='fields' [popupHeight]='height'></ejs-dropdownlist>
                   </ng-template>
                </e-column>
                <e-column field='ShipName' headerText='ShipName' width=140></e-column>
            </e-columns>
            </ejs-grid>`
})
export class AppComponent implements OnInit {

public data: object[];
public filterOption: FilterSettingsModel = { type: 'Excel' };
public dropdata: string[] = DataUtil.distinct(data, 'CustomerID') as string[];
public fields: object = { text: 'CustomerID', value: 'CustomerID' };
public height = '220px';
ngOnInit(): void {
    this.data = data;
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService, FilterService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { FormsModule } from '@angular/forms';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule,
        DropDownListAllModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                FilterService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
  • By default, while opening the excel/checkbox filter in the Grid, the filter dialog will get and display the distinct data from the first 1000 records bound to the Grid to optimize performance. The remaining records will be returned as a result of the search option of the filter dialog.
  • However, we can increase the excel/checkbox filter count by modifying the filterChoiceCount argument value(as per our need) in the actionBegin event when the requestType is filterchoicerequest or filtersearchbegin. This is demonstrated in the below code snippet,
Copied to clipboard
actionBegin(args: FilterEventArgs) {
if (args.requestType === "filterchoicerequest" || args.requestType === "filtersearchbegin") {
    args.filterChoiceCount = 3000;
}
}

Template context

When using the filter template, you can access the column information inside the NgTemplate and bind the attributes, values, or elements based on this column information.

The following properties will be available at the time of template execution.

Property Name Usage
column An object property that defines whether the current column is enabled or not.

In the following code example, the filter in the Name textbox is disabled by using the columns.allowFiltering property.

Copied to clipboard
// The disabled attributes will be added based on the column property.
<DropDownListComponent id='dropdown' enabled={data.column.allowFiltering} popupHeight="250px" fields={this.fields} dataSource={data} />

Diacritics

By default, grid ignores diacritic characters while filtering. To include diacritic characters, set the filterSettings.ignoreAccent as true.

In the following sample, type aero in Name column to filter diacritic characters.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { FilterSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' [allowFiltering]='true' [filterSettings]='filterOptions' >
            <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
    };
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService, FilterService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                FilterService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

See also