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

Use Grid Filtering with Dynamic Default Values


Product Progress® Kendo UI® Grid for jQuery
Operating System All
Browser All
Browser Version All


How can I use dynamic default field values in the jQuery Grid by Kendo UI when its filtering functionality is applied?


Your project might require you to apply a specific approach to the Grid when you use its filtering functionality.

For example, you might need to:

  • Display the filtered filed value as default when a new record is added.
  • Show the latest record that is added to the Grid.

The following example demonstrates how to use dynamic default field values in a Grid when you apply its filtering functionality. To see how it works: 1. Filter the Grid by its Category column in a way it is equal to a given value. 2. Click Add new record.

As a result, the default category of the new record matches the current (filtered) category and a new row is added to the Grid.

      <script src="" type="text/javascript"></script>
      <div id="example">
        <div id="grid"></div>

          var categories = [{
            "value": 1,
            "text": "Beverages"
            "value": 2,
            "text": "Condiments"
            "value": 3,
            "text": "Confections"
            "value": 4,
            "text": "Dairy Products"
            "value": 5,
            "text": "Grains/Cereals"
            "value": 6,
            "text": "Meat/Poultry"
            "value": 7,
            "text": "Produce"
            "value": 8,
            "text": "Seafood"

          $(document).ready(function () {
            var dataSource = new{
              pageSize: 20,
              data: products,
              schema: {
                model: {
                  id: "ProductID",
                  fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { validation: { required: true} },
                    CategoryID: {
                      field: "CategoryID",
                      type: "number",
                      defaultValue: function(e) {
                        if(typeof this.CategoryID === "function") {
                          var grid = $("#grid").data("kendoGrid");
                          var ds = grid.dataSource;
                          var filter = ds.filter();

                          if(filter && filter.filters[0].field === "CategoryID") {
                            return filter.filters[0].value;
                          } else {
                            return 1;
                    UnitPrice: { type: "number", validation: { required: true, min: 1} }

              dataSource: dataSource,
              filterable: true,
              groupable: true,
              pageable: true,
              height: 540,
              toolbar: ["create"],
              columns: [
                { field: "ProductName", title: "Product Name", filterable: false },
                { field: "CategoryID", width: "200px", values: categories, title: "Category" },
                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "200px" , filterable: false},
                { command: "destroy", title: " ", width: "110px"}],
              editable: "popup"

See Also

In this article