New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Implement Self-Referencing Hierarchy of Grids
Environment
Product | Telerik UI for ASP.NET MVC Grid |
Product version | 2025.1.227 |
Description
How can I create a Grid that builds multiple levels of hierarchy by using a single table of data?
Solution
Define the parent Grid and initialize the child grid in the DetailInit
event handler by using the parent Grid's data:
Razor
@(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridHierarchySelfReferencing.Models.Customer>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Id).Width(100);
columns.Bound(c => c.Name);
columns.Bound(c => c.Sales).Width(200);
})
.Events(e => e.DetailInit("detailInit"))
.DataSource(dataSource => dataSource
.Ajax()
// Apply operations on the client - paging, filtering, and more.
.ServerOperation(false)
// Set an initial filter to display only the parent records ("ParentId = 0").
.Filter(filter => filter.Add(c => c.ParentId).IsEqualTo(0))
.Read("Read", "Home")
)
)
To review the complete example, refer to the project on how to implement a Grid that builds multiple levels of hierarchy, using a single table of data.
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