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