Filter by multiple fields
This guide demonstrates how to filter DataGrid records by multiple fields.
Quick video
-
Create new application and add new OData data-source with Radzen Northwind service endpoint.
-
Drop DataGrid component to Radzen design surface, bind it to customers property, auto-generate columns and set name to
customersGrid
-
Design filter form with desired number of TextBox components, set
operatorsproperty to[{name: 'and', value: 'and'}, {name: 'or', value: 'or'}]andoperatorproperty toandin Page Load event
-
Define click event for the search Button component and execute
this.customersGrid.callLoadData();
-
Define custom filter function and use it in DataGrid component LoadData event
import { Component, Injector } from '@angular/core';
import { CustomersGenerated } from './customers-generated.component';
@Component({
selector: 'page-customers',
templateUrl: './customers.component.html'
})
export class CustomersComponent extends CustomersGenerated {
constructor(injector: Injector) {
super(injector);
}
filter(filters) {
if (this.City) {
filters = filters ?
`${filters} ${this.operator} contains(City,'${this.City}')` :
`contains(City,'${this.City}')`;
}
if (this.Country) {
filters = filters ?
`${filters} ${this.operator} contains(Country,'${this.Country}')` :
`contains(Country,'${this.Country}')`;
}
return filters;
}
}
- Run the application to filter customers
