CODEWITHSUNDEEP
javascriptjsonnestedkendo-grid
redrom
redrom

Reputation: 11642

Kendo Grid: add new row with nested object stopped working

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.

Upvotes: 1

Views: 1386

Answers (1)

moomoo
moomoo

Reputation: 906

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.

Upvotes: 5

Related Questions