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