Edit this page

Clear All Filters

Environment

Product Grid for ProgressĀ® Kendo UIĀ®
Product Version 2018.2.516

Description

How can I clear all filters for all Grid columns?

Solution

Set the filter object of the Grid dataSource as empty by using the filter method.

    $("#grid").data("kendoGrid").dataSource.filter({});

The following example demonstrates how to use a click event of an external Kendo UI Button.

    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>

    <div id="example">
      <input type="button" id="clearFilterButton" class="k-button" value="Clear Filter" />
      <br><br>
      <div id="grid"></div>

      <script>
        $(document).ready(function() {
          $("#grid").kendoGrid({
            dataSource: {
              data: products,
              schema: {
                model: {
                  fields: {
                    ProductName: { type: "string" },
                    UnitPrice: { type: "number" },
                    UnitsInStock: { type: "number" },
                    Discontinued: { type: "boolean" }
                  }
                }
              },
              pageSize: 20
            },
            height: 550,
            scrollable: true,
            sortable: true,
            filterable: {
                extra: false,
            },
            pageable: {
              input: true,
              numeric: false
            },
            columns: [
              "ProductName",
              { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
              { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
              { field: "Discontinued", width: "130px" }
            ]
          });

          $("#clearFilterButton").click(function (){

            /*
            The code below will clear all filters from the
            Kendo Grid's DataSource by replacing it with an empty object.
            */
            $("#grid").data("kendoGrid").dataSource.filter({});
          });
        });
      </script>
    </div>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy