Filtering all Grid Columns when Using a Remote-Binding Directive

Environment

Description

How can I filter the columns of the Data Grid when using a Remote-Binding Directive?

Solution

By default, the Kendo UI for Angular Data Grid component allows you to filter each of its columns separately by applying various filtering conditions.

To filter all or multiple columns of the Data Grid by adding an external TextBox component when you use a remote-binding directive:

1. Handle the built-in valueChange event of the TextBox component.

   Copy Code<kendo-textbox (valueChange)="filterAll($event)" ...></kendo-textbox>

2. In the event handler, create a custom CompositeFilterDescriptor for the columns that need to be filtered and update the Grid's filter property.

   Copy CodefilterAll(inputValue) {
       this.state.filter = {
           logic: 'or',
           filters: [{
               field: 'ProductName',
               operator: 'contains',
               value: inputValue,
           }, ...],
       };
   }

3. Use a custom rebind function to pass the current Grid State to a dedicated data service method that returns the updated collection.

   In this case, the ProductsService extends the NorthwindService which has a query method that is responsible for the communication with the remote server. The query method passes the information required for server-side data operations like filtering, sorting, and others.

   Copy Code@ViewChild(ProductsBindingDirective) public dataBinding: ProductsBindingDirective;
   
   filterAll(inputValue) {
       this.state.filter = { ... };
       this.dataBinding.rebind();
   }

   Copy Codepublic rebind(): void {
       this.productsService.query(this.state);
   }

The following example demonstrates how to filter all Grid columns from an outer input field when using a remote-binding directive.