Angular Grid Filtering Basics
The Angular Grid filtering feature enables you to display only those Grid records that meet specific filter criteria.
You can enable the filtering feature by using two methods:
- The Data-Binding Directive—Allows you to implement filtering (or other data operations) with less code.
- Manual Filtering—Provides more control when implementing the filtering feature.
Using the Built-in Directive
The kendoGridBinding directive performs filtering automatically.
The following example demonstrates how to enable filtering using kendoGridBinding directive.
To enable the built-in Grid filtering:
- Set the Grid
filterableoption totrue. - (Optional) Set the
filterproperty to aCompositeFilterDescriptorobject. This allows you to filter the data by specific criteria during the initialization of the Grid.
<kendo-grid
[kendoGridBinding]="gridData"
[filterable]="true"
>
<kendo-grid-column field="CompanyName"></kendo-grid-column>
</kendo-grid>To learn more about the data binding directive and to understand how it works under the hood, see the data operations with the DataBinding directive article.
Filter Modes
The Grid supports three filtering modes that display different filtering UI.
| Mode | Setup | Description | When to use |
|---|---|---|---|
| Filter row (default) | Set filterable to true or 'row' | Filter controls render below each column header. The data updates automatically as the user types. | Filtering is frequent and users need filter criteria always visible. |
| Filter menu | Set filterable to 'menu' | A filter icon displays in the column header. The data filters when the user clicks Filter. | Column space is limited, filtering is infrequent, or you need two simultaneous conditions per column. For details, refer to the Filter Menu article. |
| Filter menu and row | Set filterable to 'menu, row' | Combines the filter menu and the filter row. | You need the always-visible row for quick input and the menu for multi-condition filtering. |
The following example demonstrates the available filter modes of the Grid.
Filter Data Types
In its column filters, the Grid provides a built-in filtering UI for all basic data types (string, number, Date, boolean). You can set the filtering UI type through the filter input property of each column.
Text Filter
The text filter is the default filter type. Its UI is a TextBox component.
Numeric Filter
The numeric filtering UI is a NumericTextBox component.
Date Filter
The date filtering UI is the DatePicker component.
Boolean Filter
The boolean filtering UI utilizes the DropDownList component.
Filtering Extensions
Depending on your application requirements, you can extend the built-in filtering feature with custom operators, multi-checkbox selection, custom filter components, filtering driven from outside the Grid, or AI-powered filtering.
AI-Powered Filtering
The Grid provides an AI-powered filtering feature that allows users to filter data using natural language queries. This feature is available through the Kendo UI AI Toolbar component, which can be integrated with the Grid to provide an intuitive and user-friendly filtering experience.
Filtering with Custom Operators
Each built-in filter UI exposes a set of operators, such as "contains", "eq", or "gte". To change the default operator or limit the available operators, use the operator property on the built-in filter components. For an example, refer to the Filter Menu article.
Multi-Checkbox Filtering
The Grid provides a built-in Excel-like multi-checkbox filter that lets users select multiple values to filter by at the same time. To use it, refer to the Multi-Checkbox Filter article.
Custom Filter Components
For scenarios where the built-in filter UI is not sufficient, you can replace it with a completely custom component using the FilterMenuTemplateDirective or the filter row template. For examples, refer to the Filter Menu and Filter Row articles.
External Filtering
You can filter the Grid from outside the component—for example, from a search input in the page header. This approach uses the Grid's filter property and filterChange event to synchronize the filter state with an external control. For details, refer to the External Filtering article.