By default, the filtering functionality of the Kendo UI Grid is disabled.
To control filtering in the Grid, use the
Only columns that are bound to a field can be filterable. To enable filtering on a column bound to an object, bind the column to a field of that object.
The Grid enables you to implement the following filter options:
Header Row Filtering
To enable the filter row in the header of the Grid, set
row. As a result, based on the data type of the underlying column data, the Grid will render textboxes for string values, numeric inputs, or date pickers in the column headers for filtering. You can also specify a default filter operator that will be applied when the user enters a value in the filter textbox and presses
Tab from the keyboard. To handle this scenario, set
operator for the corresponding column. For a runnable example, refer to the filter-row demo of the Grid.
Filtering by Checkboxes
To render a checkbox list in the filter menu, set
multi=true for the desired Grid columns. You can also combine the checkbox filter with the
itemTemplate definition and customize the checkbox items that will be displayed. For a runnable example, refer to the multi-checkbox filter demo of the Grid.
Custom Menu Filtering
You can apply common settings for the menu configuration of the Grid filter and customize its UI per each column.
The runnable demo on implementing custom menu filtering demonstrates how to:
- Specify a single filter criterion through setting
- Limit the filter operators for string columns to
is equal to, and
is not equal toonly.
- Define the built-in date-picker UI to filter the date-time column in the Grid.
- Instantiate the Kendo UI AutoComplete and DropDownList for the Title and City columns respectively.
KB Articles on Filtering
- Enable Filtering for Columns Bound to Complex Object
- Filtering by Date Only
- Using MultiSelect for Column Filtering
- Using Filtering with Dynamic Default Values
- Implementing Excel-Like Filter Menus
- Find Out More in the Knowledge Base