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

Setting the Default Numeric Filter Value in the Grid Filter Menu

Environment

Product Progress Kendo UI Grid

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

  1. In the filterMenuOpen event handler, get the instances of the NumericTextBox inputs.
  2. Update their values with the value method and trigger the change event.
    <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>

See Also

In this article