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

Clear All Filters


Product Progress® Kendo UI® Grid for jQuery
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 k-button-md k-rounded-md k-button-solid k-button-solid-base" 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