Filtering Basics

The Grid enables you to display only those Grid records which meet specified criteria.

For more information on how to customize the filters in the Kendo UI Grid for Angular, refer to the articles about the built-in filter templates and reusable custom filter components.

Getting Started

To enable filtering:

1. Set filterable to true.
2. Handle the filterChange event.
3. Bind the filter option to the respective class field.

The filtering conditions are declared as FilterDescriptors. Each consecutive filter is added to the previous ones and reduces the subset of data. For additional information, refer to the article on the process helpers for bulk data operations.

Alternatively, you can automate and customize the filtering functionality through the available data-binding directives.

Filter Row

By default, when filtering is enabled, the Grid renders a filter row in its header. Based on the type of data the columns contain, the filter row displays textboxes in each column header where the user can filter string, numeric, or date inputs.

Filter Menu

The Grid also enables you to embed a drop-down filter menu directly in each column header. To add a filter menu to the Grid, set filterable to menu.

Suggested Links

• FilterDescriptors
• dataStateChange
• Built-In Filter Templates
• Reusable Custom Filter Components.
• API Reference of the GridComponent
• Data Binding Basics
• Automatic Data Binding