Filter by multiple fields

This guide demonstrates how to filter DataGrid records by multiple fields.

Quick video

Source Code

  1. Create new application and add new OData data-source with Radzen Northwind service endpoint.

  2. Drop DataGrid component to Radzen design surface, bind it to customers property, auto-generate columns and set name to customersGrid

  3. Design filter form with desired number of TextBox components, set operators property to [{name: 'and', value: 'and'}, {name: 'or', value: 'or'}] and operator property to and in Page Load event

  4. Define click event for the search Button component and execute this.customersGrid.callLoadData();

  5. Define custom filter function and use it in DataGrid component LoadData event

import { Component, Injector } from '@angular/core';
import { CustomersGenerated } from './customers-generated.component';

  selector: 'page-customers',
  templateUrl: './customers.component.html'
export class CustomersComponent extends CustomersGenerated {
  constructor(injector: Injector) {

  filter(filters) {
    if (this.City) {
      filters = filters ? 
        `${filters} ${this.operator} contains(City,'${this.City}')` : 

    if (this.Country) {
      filters = filters ? 
        `${filters} ${this.operator} contains(Country,'${this.Country}')` : 

    return filters;
  1. Run the application to filter customers

We are here for you

Making our users happy is always a priority for us.