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.
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';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [FilterService, PageService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
- You can apply and clear filtering, by using
filterByColumn
andclearFiltering
methods.- To disable Filtering for a particular column, by specifying
columns.allowFiltering
to false.
To apply the filter at initial rendering, set the filter predicate
object in
filterSettings.columns
.
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' }]
};
}
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
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.
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';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [FilterService, PageService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The filterBarTemplate
is used to add a custom component for a
particular column and this contains the following functions.
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 { 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);
}
});
},
};
}
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
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';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [FilterService, PageService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
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.
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'
};
}
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
allowFiltering
must be set as true to enable filter menu.- Setting
columns.allowFiltering
as false will prevent filter menu rendering for a particular column.
The column.filter.ui
is used to add custom filter components to a particular column.
To implement custom filter ui, define the following functions:
In the following sample, dropdown is used as custom component in the OrderID column.
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);
}
}
};
}
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
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
.
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'
};
}
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
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.
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.
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;
}
}
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);
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.
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;
}
}
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);
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);
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.
// 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} />
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.
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
};
}
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);