Foreign Key Column thowing exception on select when grid is in an Editor Template

[Tim Johnson]

Hi. I am using Kendo UI in an ASP.NET MVC 4 application (using the Razor view engine) and I keep hitting a problem with how Kendo is auto generating the model structure for the rows in a grid.

I have a view and the model for that view contains a list of items, called Bricks, and then each Brick contains a list of items called BrickQualityMetricDtos. I created an editor template for the Brick class so that the MVC framework would properly name all of the fields. Within that editor template I have a Kendo UI Grid that I am using to display/edit the list of BrickQualityMetricDto classes. Two of the fields in that class are dropdowns, which I am using ForeignKeyColumns for, but every time I edit a row and then select a value of one of the drop downs I get this javascript exception:

"Unable to get property '0' of undefined or null reference"

This exception is getting thrown by this anonymous function:
function anonymous(d,value) {
d.Bricks[0].ExclusionReasonPK=value
}

The exception is being thrown because there is no Bricks member of "d" and therefore it cant get the "0" property. As far as I can tell "d" is an object that represents the model for the row that I am editing because it has fields "ExclusionReasonPK", "BrickSectionPK", "LengthExluded", and "PK" which are all of the fields of the BrickQualityMetricDto class. So the problem is that since the grid is in an Editor Template it is throwing this non-existent Bricks property onto the "d" object before it tries to access the actual properties of the object.

Can you please advise how to get around this limitation? I need to be using an Editor Template because if I don't then I won't get all of the other data fields in my form when I submit the form to my controller action.

Below is the code for my grid, but I am pretty sure that everything is correct in there.

@(Html.Kendo().Grid<BrickQualityMetricDto>()
.Name("BrickQualityMetrics_" + Model.Index)
.Columns(columns =>
{
columns.ForeignKey(e => e.BrickSectionPK, Model.BrickSections, "PK", "Name").Title("Section");
columns.ForeignKey(e => e.ExclusionReasonPK, Model.ExclusionReasons, "PK", "Name").Title("Exclusion Reason");
columns.Bound(e => e.LengthExcluded).Title("Length Excluded (mm)");
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.Events(events =>
{
events.Edit("onBrickQualityMetricsGridEdit");
})
.ToolBar(toolbar => toolbar.Create().Text("Add"))
.BindTo(temp)
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Change("onGridDataSourceChange"))
.Model(model => model.Id("PK"))
.Create(update => update.Action("BrickMetric_Create", "Brick"))
.Update(update => update.Action("BrickMetric_Update", "Brick"))
.Destroy(update => update.Action("BrickMetric_Destroy", "Brick"))
))

EDIT: I just checked again and this problem is not limited to Foreign Key Columns. It is happening on the standard Bound column as well.

Also here is a similar post from the old ASP.NET MVC Telerik forums. It looks like the problem was never fully resolved though: http://www.telerik.com/community/forums/aspnet-mvc/grid/problems-with-grid-in-editor-template-in-collections.aspx