Persist Filter Menu Value When a Grid Column is Filtered by a Single Value
Environment
| Product Version | 2022.2.802 |
| Product | Telerik UI for ASP.NET MVC Grid |
Description
The default Grid Filter Menu has two input fields. At this stage, when a specified Grid column is filtered only by the second input, after reopening the Filter Menu, the filtered value is bound to the first input field. The second field remains empty.
How can I customize the default behavior of the Filter Menu and persist the single filtered value in the second input field?
Solution
- Handle the
Filterevent of the Grid and store the number of the applied column filters in a global JavaScript variablefilteredValues. - Handle the
FilterMenuOpenevent of the grid. get references of both input fields, subscribe to theirChangeevents, and store their values in global variables (dtp1Valueanddtp2Value). - Check if the Grid is filtered by the second input field and update its value by using the global variable
dtp2Value.
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
})
.Events(ev => ev.Filter("onFilter").FilterMenuOpen("onFilterMenuOpen"))
//Other configuration
)
<script>
var filteredValues = 0;
var dtp1Value;
var dtp2Value;
function onFilter(e) {
//Check if the "OrderDate" column is filtered
if (e.field == "OrderDate") {
if (e.filter != null) {
//Store the number of the applied column filters in a variable
filteredValues = e.filter.filters.length;
} else {
//Reset the variables
filteredValues = [];
dtp1Value = "";
dtp2Value = "";
}
}
}
function onFilterMenuOpen(e) {
if (e.field == "OrderDate") {
//Get a reference of the first DatePicker field
var dtpWidget1 = $("input[title='Value']").data("kendoDatePicker");
//Get a reference of the second DatePicker field
var dtpWidget2 = $("input[title='Additional value']").data("kendoDatePicker");
//Get a reference of the second DropDownList that holds the second filter operator
var ddlWidget2 = $("select[title='Additional operator']").data("kendoDropDownList");
//Handle the "change" event of the first DatePicker
dtpWidget1.bind("change", function () {
if (this.value()) {
//Store its value
dtp1Value = this.value();
} else dtp1Value = ""; //Reset the variable
});
//Handle the "change" event of the second DatePicker
dtpWidget2.bind("change", function () {
if (this.value()) {
//Store its value
dtp2Value = this.value();
} else dtp2Value = ""; //Reset the variable
});
//Check if the column "OrderDate" is filtered only by the second Filter Menu field
if (filteredValues == 1 && dtp2Value && !dtp1Value) {
//Set respective value in the second DatePicker
dtpWidget2.value(new Date(dtp2Value));
dtpWidget2.trigger("change");
//Persist the second filter operator value
ddlWidget2.value(e.sender.dataSource.filter().filters[0].operator);
ddlWidget2.trigger("change");
//Reset the value of the first DatePicker
dtpWidget1.value("");
dtpWidget1.trigger("change");
}
}
}
</script>
For a runnable example based on the code above, refer to this REPL.