New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Edit Nested Grids

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I edit a nested Grid using a Popup editor template?

Solution

You can achieve this requirement using the following implementation:

Define the main Grid and specify a column that binds to a List<TerritoryViewModel> collection. Also, set a column template to display the records in the collection as an unordered list in each column cell.

Razor

<script type="text/kendo" id="territoriesTemplate">
<ul>
    #for(var i = 0; i< data.length; i++){#
        <li>#:data[i].TerritoryDescription#</li>
    #}#
</ul>
</script>

<script type="text/javascript">
    var territoriesTemplate = kendo.template($("#territoriesTemplate").html(), { useWithBlock: false });
</script>

@(Html.Kendo().Grid<EmployeeViewModel>()
.Name("grid")
.Columns(columns =>
{
    columns.Command(comm =>
    {
        comm.Edit();
    });
    ... // Additional columns.
    columns.Bound(e => e.Territories).ClientTemplate("#=territoriesTemplate(Territories)#");
})
.Editable(ed=>ed.Mode(GridEditMode.PopUp))
... // Additional configuration.
)

Create a custom Poup editor template, which contains a nested InCell editable Grid. This Grid will be used for editing the Territories collection.

Razor

@model EmployeeViewModel

<div>
    @Html.LabelFor(m => m.FirstName)
    @Html.EditorFor(m => m.FirstName)
</div>
<div>
    @Html.LabelFor(m => m.LastName)
    @Html.EditorFor(m => m.LastName)
</div>
<div>
    @Html.LabelFor(m => m.Title)
    @Html.EditorFor(m => m.Title)
</div>
<div>
    @Html.LabelFor(m => m.HireDate)
    @Html.EditorFor(m => m.HireDate)
</div>
<hr />
@(Html.Kendo().Grid<TerritoryViewModel>()
    .Name("TerritoryGrid")
    .Columns(cols =>
    {
        cols.Bound(b => b.TerritoryID);
        cols.Bound(b => b.TerritoryDescription);
    })
    .Editable(ed=>ed.Mode(GridEditMode.InCell))
    .AutoBind(false)
    .DataSource(ds => ds
        .Ajax()
        .Model(mo => {
            mo.Id(m => m.TerritoryID);
            mo.Field(f => f.TerritoryID).Editable(false);
        })
    )
    .ToClientTemplate()
)

Handle the Edit event of the main Grid that triggers when the Popup editor template opens. Get a reference to the nested Grid and load its data using the underlying Territories data collection.
JS
```
function onEdit(e) {
    $('#TerritoryGrid').data().kendoGrid.dataSource.data(e.model.Territories);
}
```

Handle the Change event of the main Grid's DataSource and set the dirty flag of the edited data item to true when the Territories field contains changes.

function onDsChange(e) {
    if (e.field == 'Territories' && e.items) {
        var model = e.items[0].parent().parent();
        model.dirty = true;
    }
}

To review the complete example, refer to the project on how to edit a nested Grid in ASP.NET MVC applications.

Edit Nested Grids

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also