Use Nested Model Properties

Environment

Product Progress Kendo UI Grid
Operating System All
Browser All
Browser Version All

Description

How can I use nested model properties in the Kendo UI Grid for jQuery?

Solution

When you use from together with CRUD operations and add new rows, you also have to define in schema.model.fields the original field or the sequence of nested fields which are used inside from.

The reason is that during updates and creates, the Kendo UI DataSource tries to construct a data item object which matches the original (server-side) data-item structure. For new data items, such a structure does not exist and needs to be defined explicitly, as demonstrated in the following example.

    myClientField1: { from: "myServerField1.foo" },
    myServerField1: { defaultValue: {} },

    myClientField2: { from: "myServerField2[0].bar" },
    myServerField2: { defaultValue: [{}] },

    myClientField3: { from: "myServerField3.myServerField4.baz" },
    myServerField3: { defaultValue: { myServerField4: {} } },

The following example demonstrates how to use nested model properties. The CRUD operations are not fully configured.

    <div id="grid"></div>
    <script>
      function getData(length) {
        var data = [];
        var sampleDate = new Date();
        for (var j = 1; j <= length; j++) {
          data[j - 1] = {
            id: j
          };
          data[j - 1].person = {
            fname: "First Name " + j,
            lname: "Last Name " + j,
            bdate: new Date(sampleDate.getTime() - j * 1000 * 60 * 60 * 24)
          }
        }
        return data;
      }

      $("#grid").kendoGrid({
        dataSource: {
          data: getData(10),
          schema: {
            model: {
              id: "id",
              fields: {
                id: {
                  type: "int"
                },
                fname: {
                  from: "person.fname"
                },
                lname: {
                  from: "person.lname"
                },
                // A default value is needed for person to be defined to support additions
                person: { defaultValue: {} },
                bdate: {
                  type: "date",
                  from: "person.bdate"
                }
              }
            }
          }
        },
        sortable: true,
        editable: {
          mode: "inline"
        },
        toolbar: ["create"],
        columns: [{
          field: "id",
          title: "ID"
        }, {
          field: "fname",
          title: "First Name"
        }, {
          field: "lname",
          title: "Last Name"
        }, {
          field: "bdate",
          title: "Birth Date",
          format: "{0:yyyy-MM-dd}"
        }, {
          command: ["edit", "destroy"],
          title: "&nbsp;"
        }]
      });
    </script>

See Also

In this article
Not finding the help you need? Improve this article