Adding new row with Child properties in kendo grid

Question

I am using kendo grid [web] and i am having the following json data to render the grid

{"rowguid":"7e6dfa67-47a2-40fb-b3fb-9d21e9cba1c3","ProductId":100,"Name":"Car","Color":"#aaaaa","size":4,"Cost":5.26,"Category":{"CatId":1,"Id":"f27b7d43-9b57-470e-97a3-023323a5a7ac","Name":"Vehicle"},"CategoryName":null},{"rowguid":"9cddd550-479c-4df8-883b-50f39e2b4249","ProductId":101,"Name":"bike","Color":"#aaaab","size":5,"Cost":6.26,"Category":{"CatId":1,"Id":"82842c66-223d-4774-a4b4-b748429f5984","Name":"2Wheeler"},"CategoryName":null},{"rowguid":"1a47a67f-ddff-401b-adee-b3bb27660e44","ProductId":102,"Name":"plane","Color":"#aaaac","size":6,"Cost":7.26,"Category":{"CatId":1,"Id":"f5bd0e35-9ff4-4a09-8b2b-a1f9c28fb60e","Name":"AirCraft"},"CategoryName":null}]

As it is seen from this grid, this datasource is a product model which has an inner property called as category which is again another object that has the name property that is to be used.

I have used the following schema

  schema: {
            model: {
                id: "rowguid",
                fields: {
                    rowguid: { editable: false, nullable: true },
                    ProductId: { editable: true, nullable: true },
                    Name: { validation: { required: true} },
                    Color: { type: "string", validation: { required: true, min: 1} },
                    size: { type: "number", validation: { min: 1, required: true} },
                    Cost: { type: "number", validation: { min: 1, required: true }, format: "{0:n2}" }
                    ,CategoryName: {field:"Category.Name", type: "string", validation: { required: true }}
                }
            }
        }

and the following column declarations

  columns: [
            {field:"rowguid",tite:"Unique Id"},
            {field:"ProductId",tite:"Id"},
            {field:"Name",tite:"Name"},
            {field:"Color",tite:"Color", template:colorColumnTemplate},
            {field:"size",tite:"size",type:"number", format: "{0:n2}"},
            {field:"Cost",tite:"Cost",type:"number", format: "{0:n2}"},
            //{field:"CategoryName",title:"Category Name",editor:categoryEditor,template: "#=CategoryName#" },
            {field:"Category.Name",title:"Category Name",editor:categoryEditor},
            { command: { text: "Actions" }, title: "Action", width: "140px" },
            {command: ["edit"], title: "Actions", width: "172px"}
            ],

Here, the grid is displayed fine and edit, update all work fine.

The Issue is that when i click on the "Add New Record" button, i get the following error

Uncaught TypeError: Cannot read property 'Name' of undefined

This is because when the kendo model is being formed, it tries to read the values as

javascript object properties events[idx].call(that, e); is the method in the trigger event that is fired when i add a new row in the kendo grid.

Is there a way for me to add new record using the Category.Name. I think it will be possible if i am able to attach or associate a template with the grid row during the add new row process.

Let me know if it is possible.

monastic-panic monastic-panic · Accepted Answer · 2013-06-26T20:12:49

You will need to add a defaultValue for complex fields, that declare an empty version of the complex object. kendo is attempting to set the Name property of your Category, but there isn't a default Category object

fields: [{ 
  field: Category
  defaultValue: { Name: ""}
}]

or in the MVC helper

  .Name("grid")
  .DataSource(dataSource => dataSource
      .Ajax().Model( model => {
        model.Field( m => m.MyField).DefaultValue(new MyObject())
      })
  ))

Adding new row with Child properties in kendo grid

1 Answers