Excel like filter in Angular Grid component
18 Nov 20225 minutes to read
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.
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;
}
}
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 { }
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 theactionBegin
event when therequestType
isfilterchoicerequest
orfiltersearchbegin
. This is demonstrated in the below code snippet,
actionBegin(args: FilterSearchBeginEventArgs) {
if (args.requestType === "filterchoicerequest" || args.requestType === "filtersearchbegin") {
args.filterChoiceCount = 3000;
}
}