Filter bar in Angular Grid component
20 Dec 202214 minutes to read
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 |
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;
}
}
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';
import { MultiSelectModule, CheckBoxSelectionService,DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule,
MultiSelectModule,
DropDownListAllModule,
CheckBoxModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [FilterService, PageService,CheckBoxSelectionService]
})
export class AppModule { }
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.
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, IFilterUI, Column } from '@syncfusion/ej2-angular-grids';
import { ChangeEventArgs, DropDownList } from '@syncfusion/ej2-angular-dropdowns';
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('input');
dd.id = 'EmployeeID';
return dd;
},
write: (args: { element: Element, column: Column }) => {
let DropDownListObj: DropDownList = new DropDownList({
dataSource: ['All','1','3','4','5','6','8','9'],
fields: { text: 'EmployeeID', value: 'EmployeeID' },
placeholder: 'Select a value',
popupHeight: '200px',
change: function(e){
var gridObj = (document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0];
if(e.value =='All') {
gridObj.removeFilteredColsByField('EmployeeID');
} else {
gridObj.filterByColumn('EmployeeID','equal',parseInt(e.value as any));
}
}
});
DropDownListObj.appendTo('#EmployeeID');
},
};
}
}
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';
import { MultiSelectModule, CheckBoxSelectionService,DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule,
MultiSelectModule,
DropDownListAllModule,
CheckBoxModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [FilterService, PageService,CheckBoxSelectionService]
})
export class AppModule { }
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.
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;
}
}
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';
import { MultiSelectModule, CheckBoxSelectionService,DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule,
MultiSelectModule,
DropDownListAllModule,
CheckBoxModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [FilterService, PageService,CheckBoxSelectionService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);