Clear Filters When Text Is Cleared in Grid
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Operating System | Windows 7 64bit |
Browser | Google Chrome |
Browser Version | Chrome 61.0.3163.100 |
Product Version | 2017.3.1018 |
Description
How can I make the filter menu customization in the Grid fire the filter
event when the text is cleared?
To replicate the ColumnMenu demo:
- Note the count as 1-30 of 830 items.
- Click the Ship Country column menu.
- From the drop-down, select Filter > Contains.
- Enter France and click the Filter button.
- The Grid refreshes and the count shows 1-30 of 77 items.
- Go back to the Ship Country > Filter menu and backspace France to blank.
- Click the Filter button. As a result, nothing happens and the count stays as 1-30 of 77 items.
Solution
The described behavior is expected because when the filter has to be removed, the user is expected to click the Clear button next to the Filter button.
In this scenario, use the ColumnMenuInit
event to attach an event handler to the Filter button and, if the value of the text box is an empty string, to clear the filters with the filter
method.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 30,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
sortable: true,
filterable: true,
columnMenuInit:function(e){
$(e.container).find('.k-primary').click(function(event){
var val = $(e.container).find('[title="Value"]').val()
if(val == ""){
e.sender.dataSource.filter({})
}
})
},
columnMenu: true,
pageable: true,
columns: [ {
field: "OrderID",
title: "Order ID",
width: 120
}, {
field: "ShipCountry",
title: "Ship Country"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipAddress",
filterable: false
}
]
});
});
</script>
</div>