Restore filters applied through the Grid's UI when the Search input is cleared

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	2021.2.616

Description

When I clear the Grid's search panel, all of my filters are deleted. How can I restore the filters that I applied through the Grid's filter menu?

Solution

Utilize the Grid's filter event and save the filters applied through the UI.

    <div id="grid"></div>
    <script>
        // Declare an empty array.
        var savedFilters = [];

        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    },
                    pageSize: 20
                },
                filter: onFilter,
                filterable: true,
                height: 550,
                toolbar: ["search"],
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]
            });

          // Define the filter event handler.
          function onFilter(e) {
            // Check if the filter exists.
            if(e.filter) {
                setTimeout(function() {
                // Push the applied filter in the array.
                savedFilters.push(e.filter);
                }, 20);
            // If the filter doesn't exist in the event data, it has been removed through the Filter Menu.
            } else {
              let field = e.field;
              // Itterate over the array of saved filters.
              for(var i=0; i<savedFilters.length; i++) {
                let filters = savedFilters[i].filters;
                if(filters[0] && filters[0].field === field) {
                  // Remove the filter from the array of saved filters.
                  savedFilters.splice(i, 1);
                }
              }
            }
          }

          // Attach a handler to the input event of the search panel.
          $(".k-grid-search").on("input", function(e) {
            let inputValueLength = e.target.value.length;

            // Check if there are any saved filters and if the input has been cleared.
            if(savedFilters && inputValueLength === 0) {
             let grid = $("#grid").data("kendoGrid");
             setTimeout(function() {
               // Apply the saved filters after the input has been cleared.
               grid.dataSource.filter(savedFilters);
             }, 310);
            }
          })
        });
    </script>

    <style type="text/css">
        .k-grid .k-grid-search {
            margin-left: auto;
            margin-right: 0;
        }
    </style>