Kendo Grid: add new row with nested object stopped working

Question

I'm filling a Kendo data grid from nested JSON by this way:

https://stackoverflow.com/a/24441318/535556

Everything works fine until I click on the "Add new row" button.

Then I receive a console error message:

"Uncaught TypeError: Cannot read property 'street' of undefined "

I would like to ask how to format the data properly to obtain nested JSON object with updated data?

Many thanks for any advice.

Answer 1

When you add a new row without having defined a schema model for the dataSource, the object being created does not yet have an "address" field. The column with "address.street" is attempting to get the "street" field from the "address" field of the new object which is undefined at this point, hence the error.

The bad news is that the schema model definition doesn't really lend itself to nested types. The good news is that you can define an "address" field with defaultValue of {} and the Grid editor should be happy.

$("#myGrid").kendoGridEx({

    ...

    columns: [
        { field: "address.street" },
        { field: "address.city" },
        { field: "address.state" },

        ...

    ],

    dataSource: new kendo.data.DataSourceEx({

        ...

        schema: {
            model: {
                id: "Id",
                fields: {
                    address: { defaultValue: {} },
                },
            },
        },

        ...
    }),

});

Now when you add a new row, the bound object's "address" field will be {}. The "street", "city" and "state" fields will of course be undefined, but their parent object "address" IS defined so you won't see and error when accessing it's fields.