Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
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';
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);
- You can apply and clear filtering, by using
filterByColumnandclearFilteringmethods.- To disable Filtering for a particular column, by specifying
columns.allowFilteringto 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';
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);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 |
| between | Filter the values based on the range between the start and end specified values. | Number | Date |
By default, the
filterSettings.columns.operatorvalue is equal.
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);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);