All Components


    Grid / Filter menu customization


    In this sample we showcase how you can apply common settings for the Kendo UI grid filter menu configuration, and customize its UI on a per column basis. This is straight-forward and easy using the exposed API for the column menu.

    First we specify a single filter criterion using the filterable->extra=false setting, and limit the filter operators for string columns to starts with, equal and not equal only. Then we define built-in date picker UI to filter the datetime column in the grid, and instantiate Kendo UI AutoComplete and DropDownList for the Title and City columns, respectively.

    To create the dropdown filters, we assign javascript functions to the filterable->ui attributes of the corresponding columns.

    HTML5/JavaScript source

    Also available for:

    API Reference
    • filter-menu-customization.html
    • Sample service
    • Widget configuration

    Support & learning resources

    Grid for other technologies