New to Kendo UI for jQuery? Download free 30-day trial

Clear Filters When Text Is Cleared in Grid


Product Progress® Kendo UI® Grid for jQuery
Operating System Windows 7 64bit
Browser Google Chrome
Browser Version Chrome 61.0.3163.100
Product Version 2017.3.1018


How can I make the filter menu customization in the Grid fire the filter event when the text is cleared?

To replicate the ColumnMenu demo:

  1. Note the count as 1-30 of 830 items.
  2. Click the Ship Country column menu.
  3. From the drop-down, select Filter > Contains.
  4. Enter France and click the Filter button.
  5. The Grid refreshes and the count shows 1-30 of 77 items.
  6. Go back to the Ship Country > Filter menu and backspace France to blank.
  7. Click the Filter button. As a result, nothing happens and the count stays as 1-30 of 77 items.


The described behavior is expected because when the filter has to be removed, the user is expected to click the Clear button next to the Filter button.

In this scenario, use the ColumnMenuInit event to attach an event handler to the Filter button and, if the value of the text box is an empty string, to clear the filters with the filter method.

<div id="example">
            <div id="grid"></div>

                $(document).ready(function() {
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: ""
                            schema: {
                                model: {
                                    fields: {
                                        OrderID: { type: "number" },
                                        ShipCountry: { type: "string" },
                                        ShipName: { type: "string" },
                                        ShipAddress: { type: "string" }
                            pageSize: 30,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        height: 550,
                        sortable: true,
                        filterable: true,
                            var val = $(e.container).find('[title="Value"]').val()
                            if(val == ""){

                        columnMenu: true,
                        pageable: true,
                        columns: [ {
                                field: "OrderID",
                                title: "Order ID",
                                width: 120
                            }, {
                                field: "ShipCountry",
                                title: "Ship Country"
                            }, {
                                field: "ShipName",
                                title: "Ship Name"
                            },  {
                                field: "ShipAddress",
                                filterable: false
In this article