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.
More ASP.NET MVC Grid Resources
- ASP.NET MVC Grid Documentation
- ASP.NET MVC Grid Demos
- ASP.NET MVC Grid Product Page
- Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET MVC Forums