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

Edit Three-Level Hierarchical Grids

Environment

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

Description

How can I implement a three-level hierarchical editable Grid?

Solution

You can achieve this requirement using the following implementation:

Define the main InLine editable Grid:

Razor

@(Html.Kendo().Grid<GridEditing3LevelHierarchyEmployee>()
    .Name("Employees")
    .ClientDetailTemplateId("OrderDetailsTemplate")
    ... // Additional configuration.
)

Define the first detail Grid with enabled InLine editing mode:

Razor

<script type="text/kendo" id="OrdersTemplate">
@(Html.Kendo().Grid<GridEditing3LevelHierarchyOrder>()
    .Name("Orders_#=EmployeeID#")
    .Columns(columns =>
    {
        ... // Columns configuration.
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .ToolBar(tools => tools.Create())
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(source => source
        .Ajax()
        .Model(model =>
        {
            model.Id(o => o.OrderID);
            model.Field(o => o.OrderID).Editable(false);
        })
        .Read(read => read.Action("Read_Orders", "Orders", new { id = "#=EmployeeID#" }))
        .Update(update => update.Action("Update_Order", "Orders"))
        .Create(create => create.Action("Create_Order", "Orders", new { id = "#=EmployeeID#" }))
        .Destroy(destroy => destroy.Action("Destroy_Order", "Orders"))
    )
    .ClientDetailTemplateId("OrderDetailsTemplate")
    .ToClientTemplate()
)
</script>

Define the second detail Grid with enabled InLine editing mode. Its parent Grid is Orders_#=EmployeeID#:

Razor

<script type="text/kendo" id="OrderDetailsTemplate">
@(Html.Kendo().Grid<GridEditing3LevelHierarchyOrder_Detail>()
    .Name("OrderDetails_#=OrderID#")
    .Columns(columns =>
    {
        ... // Columns configuration.
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .ToolBar(tools => tools.Create())
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(source=> source
        .Ajax()
        .Model(model =>
        {
            model.Id(o => o.OrderID);
            model.Field(o => o.ProductID).DefaultValue(1);
        })
        .Read(read => read.Action("Read_OrderDetails", "OrderDetails", new { id = "#=OrderID#" }))
        .Update(update => update.Action("Update_Order_Detail", "OrderDetails"))
        .Create(create => create.Action("Create_Order_Detail", "OrderDetails", new { id = "#=OrderID#" }))
        .Destroy(destroy => destroy.Action("Destroy_Order_Detail", "OrderDetails"))
    )
    .ToClientTemplate()
)
</script>

To review the complete example, refer to the project on how to implement editable Grids of a three-level hierarchy in ASP.NET MVC applications.

Edit Three-Level Hierarchical Grids

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also