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

Hierarchy

The Grid provides options for visualizing the relations between parent and child records by displaying its table data in a hierarchical manner.

To implement hierarchy in the Grid HtmlHelper, use the ClientDetailTemplateId() method and filter the records in the child table based on the parent key field value. For a runnable example, refer to the demo on using hierarchy in the Grid.

Razor

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(e => e.FirstName).Width(130);
                columns.Bound(e => e.LastName).Width(130);
                columns.Bound(e => e.Country).Width(130);
                columns.Bound(e => e.City).Width(110);
                columns.Bound(e => e.Title);

            })
            .Sortable()
            .Pageable()
            .Scrollable()
            .ClientDetailTemplateId("template")
            .HtmlAttributes(new { style = "height:600px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(6)
                .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
            )
    )

    <script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
                .Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context
                .Columns(columns =>
                {
                    columns.Bound(o => o.OrderID).Width(110);
                    columns.Bound(o => o.ShipCountry).Width(150);
                    columns.Bound(o => o.ShipAddress).Width(150);
                    columns.Bound(o => o.ShipName).Width(300);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
        )
    </script>

If the detail Grid contains client templates, any # characters that are part of binding expressions in these templates must be escaped. As a result, the Kendo UI template that holds the detail Grid will ignore the # characters, while the inner template will handle it correctly. For more information on how to escape # characters in nested templates, refer to the Kendo UI Template documentation.

Razor

    <script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
                .Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context
                .Columns(columns =>
                {
                    columns.Bound(o => o.OrderID).Width(110);
                    columns.Bound(o => o.ShipCountry).Width(150);
                    columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
                    columns.Bound(o => o.ShipName).Width(300);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
        )
    </script>

Hierarchy

See Also