Radzen Professional is now 20% off until January 4th 2019! Learn more

Filter by multiple fields

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

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';

@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;
  }
}
  1. Run the application to filter customers

We are here for you

Making our users happy is always a priority for us.