Edit this page

Use Nested Model Properties

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.

Example
    <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

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy