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

Clear All Filters


Product Grid for Progress® Kendo UI®
Product Version 2018.2.516


How can I clear all filters for all Grid columns?


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


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

    <script src=""></script>

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

        $(document).ready(function() {
            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: [
              { 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.

See Also

In this article
Not finding the help you need? Improve this article