Setting the Default Numeric Filter Value in the Grid Filter Menu
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
Description
The Grid filter menu shows an empty number value for the NumericTextBox inputs.
How can I set a predefined filter value for the NumericTextBox inputs?
Solution
- In the
filterMenuOpenevent handler, get the instances of the NumericTextBox inputs. - Update their values with the
valuemethod and trigger thechangeevent.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ field: "id"}
],
filterable: true,
columnMenu: true,
dataSource: {
data: [
{ name: "Jane Doe", age: 30, id: 1 },
{ name: "Anne Smith", age: 35, id: 2 },
{ name: "John Snow", age: 24, id: 3 }
],
schema: {
model: {
fields: {
age: { type: "number" },
id: { type: "number" }
}
}
}
},
columnMenuOpen: function (e) {
if (e.field == "age") {
var firstValueDropDown = e.container.find("select:eq(0)").data("kendoDropDownList");
firstValueDropDown.select(3);
firstValueDropDown.trigger("change");
var numericOne = $(e.container.find("[data-role=numerictextbox]")[0]).data("kendoNumericTextBox");
numericOne.value(24);
numericOne.trigger("change");
var numericTwo = $(e.container.find("[data-role=numerictextbox]")[1]).data("kendoNumericTextBox");
numericTwo.value(24);
numericTwo.trigger("change");
}
else if (e.field == "id") {
var firstValueDropDown = e.container.find("select:eq(0)").data("kendoDropDownList");
firstValueDropDown.select(3);
firstValueDropDown.trigger("change");
var numericId = $(e.container.find("[data-role=numerictextbox]")[0]).data("kendoNumericTextBox");
numericId.value(1);
numericId.trigger("change");
}
}
});
</script>