Angular Grid Filtering Basics
The 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.
<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.
The following example demonstrates how to enable filtering using
The Grid supports three filtering modes that display different filtering UI.
|Filter row (default)||Set the ||Filter controls are rendered below each column header cell. The data is filtered automatically once the user stop typing.|
|Filter menu||Set the ||Filter icon displays inside the column header. The data is filtered when the user click Filter button.|
|Filter menu-row||Set the ||Combination from filter menu and filter row.|
The following example demonstrates the available filter modes of the Grid.
In its column filters, the Grid provides a built-in filtering UI for all basic data types (
boolean). You can set the filtering UI type through the filter input property of each column.
The text filter is the default filter type. Its UI is a
The numeric filtering UI is a
The date filtering UI is the
The boolean filtering UI utilizes the