New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Edit Three-Level Hierarchical Grids

Environment

ProductTelerik UI for ASP.NET MVC Grid
Product version2025.1.227

Description

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

Solution

You can achieve this requirement using the following implementation:

  1. Define the main InLine editable Grid:

    Razor
    @(Html.Kendo().Grid<GridEditing3LevelHierarchyEmployee>()
        .Name("Employees")
        .ClientDetailTemplateId("OrderDetailsTemplate")
        ... // Additional configuration.
    )
  2. 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>
  3. 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.

More ASP.NET MVC Grid Resources

See Also