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

Implement Self-Referencing Hierarchy of Grids

Environment

ProductTelerik UI for ASP.NET MVC Grid
Product version2025.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

See Also