New to Kendo UI for Angular? Start a free 30-day trial

Filtering all Grid Columns when Using a Remote-Binding Directive


ProductProgress® Kendo UI® for Angular Data Grid


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


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.

    <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.

    filterAll(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.

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

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

View Source
Change Theme:

In this article

Not finding the help you need?