Filtering All Grid Columns

Updated on Feb 20, 2026

Environment

Product

Progress® Kendo® UI Grid

Description

How can I implement filtering from an outer input field in all columns of the Kendo UI for Angular Grid?

This Knowledge Base article also answers the following questions:

• How can I filter multiple columns in the Kendo UI for Angular Grid from a single input?
• Is it possible to search across all columns in the Kendo UI for Angular Grid with one search box?
• How to implement a global search in the Kendo UI for Angular Grid?

The Grid now provides built-in searching functionality through the AI Smart Box Search mode. This approach is recommended for most use cases as it offers automatic data processing and additional features like query history. Use the manual approach described in this article when you need custom search behavior or are working with applications that cannot use the AI Smart Box component.

Solution

To filter multiple or all Grid columns from a single input field, use the process function from the @progress/kendo-data-query package. This function accepts a data array and a State object that contains filter, sort, group, and skip/take descriptors. It returns a DataResult with the processed data.

1. Add a TextBox component in the Grid toolbar and handle its valueChange event to capture the user input.

   html

   <ng-template kendoGridToolbarTemplate>
       <kendo-textbox placeholder="Search in all columns..." (valueChange)="onFilter($event)">
       </kendo-textbox>
   </ng-template>

2. In the onFilter handler, call the process function with a CompositeFilterDescriptor that combines individual column filters with or logic. Add a FilterDescriptor entry for each column you want to include in the search.

   typescript

   import { process } from '@progress/kendo-data-query';
   
   public onFilter(inputValue: string): void {
       this.gridView = process(this.gridData, {
           filter: {
               logic: 'or',
               filters: [
                   { field: 'full_name', operator: 'contains', value: inputValue },
                   { field: 'job_title', operator: 'contains', value: inputValue },
                   { field: 'phone', operator: 'contains', value: inputValue },
               ],
           },
       }).data;
   }

   To filter a specific column, keep only its corresponding FilterDescriptor in the filters array. To search across all columns, add an entry for every filterable field.

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

See Also

• Grid Filtering Basics
• External Filtering
• Manual Filtering