Null reference when adding a new row to a grid.

[Jim]

I am getting the error:  JavaScript runtime error: Unable to get property 'xxx' of undefined or null reference.

This occurs when I click the "Add New Record" in my Kendo grid.

Does this have something to do with the way the model in setup?

I was able to add a record previously when my data record was more flattened out.

Please advise.

 

My grid is setup as:

@(Html.Kendo().Grid<MyTest.Models.PersonModel>()
    .Name("myGrid")
    .Columns(col =>
    {
        col.Bound(x => x.Person.ID);
        col.Bound(x => x.Person.Field1);
        col.Bound(x => x.Person.Field2);
        col.Bound(x => x.Person.Field3);
        col.Command(x => {
            x.Custom("Extra Options").Click("showExtraOptions");
            x.Destroy();
        });
    })
    .ToolBar(x =>
    {
        x.Create();
        x.Save();
    })
    .Sortable()
    .Editable(x => x.Mode(GridEditMode.InCell))
    .Navigatable()
    .Scrollable(x => x.Height("auto"))
    .Filterable(x => x
        .Extra(false)
        .Mode(GridFilterMode.Menu)
        .Operators(op => op
            .ForString(str => str.Clear()
                .Contains("Contains")
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
            )
        )
    )
    .Pageable(p => p
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
    .DataSource(ds => ds
        .Ajax()
        .ServerOperation(false) // Paging, sorting, filtering and grouping will be done client-side
        .Batch(true)
        .PageSize(20)
        .Model(m =>
            {
                m.Id(x => x.Person.ID);
            })
        .Read(r => r.Action("GetPerson", "Home"))
        .Create(x => x.Action("CreatePerson", "Home"))
        .Destroy(x => x.Action("DeletePerson", "Home"))
        .Update(x => x.Action("UpdatePerson", "Home"))
    )
)

 

My model is:

public class PersonModel
{
    public My_Person Person{ get; set; }
    public List<Person_Options> PersonOptions { get; set; }
}

public class My_Person
{
    public string ID{ get; set; }
    public string Field1 { get; set; }
    public string Field2 { get; set; }
    public string Field3 { get; set; }
}

 

[Alexander Popov]

Hello Jim,

This happens because there are columns bound to complex object nested fields. Since there is no default value for those the Person field, it is initially undefined and trying to get the Field1 property of undefined throws an error. My advice is to specify a default value inside the DataSource's Model option.

Regards,
Alexander Popov
Telerik

[Jim]

Thank you Alexander.  Setting the default resolved my issue.

[Test]

Hi Jim, 

Could you please share your code here, how you have added default value. have you initialized object as well ? just adding default value not working for me.

[Anton Mironov]

Hi,

In order to add a default value in the Model of the DataSource, observe the implementation in the View Source tab of the following demo:

• https://demos.telerik.com/aspnet-mvc/grid/editing-custom

The Category field has set a default value as follows:

    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
            model.Field(p => p.Category).DefaultValue(
                ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel);
        })
        .PageSize(20)
        .Read(read => read.Action("EditingCustom_Read", "Grid"))
        .Create(create => create.Action("EditingCustom_Create", "Grid"))
        .Update(update => update.Action("EditingCustom_Update", "Grid"))        
        .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Grid"))
    )

Give a try to the approach from the demo above and let me know if further assistance is needed.

Kind Regards,
Anton Mironov