Filtering

By default, the filtering functionality of the Kendo UI Grid is disabled.

To control filtering in the Grid, use the filterable property.

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
• Filtering by checkboxes
• Custom menu filtering

Header Row Filtering

To enable the filter row in the header of the Grid, set mode to 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 Enter or Tab from the keyboard. To handle this scenario, set cell to 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:

1. Specify a single filter criterion through setting extra=false
2. Limit the filter operators for string columns to starts with, is equal to, and is not equal to only.
3. Define the built-in date-picker UI to filter the date-time column in the Grid.
4. 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

See Also

• Header Row Filtering by the Grid (Demo)
• Multi-Checkbox Filtering by the Grid (Demo)
• Custom Menu Filtering by the Grid (Demo)
• JavaScript API Reference of the Grid