Configuring the Grid Hierarchy with Local Data

Description

I want to bind the parent Grid to a model that contains a list of elements and each of these elements has a list of child records and I want a Details Grid to bind to that list. How can I achieve this?

Solution

To achieve the desired result follow the steps below:

1. Configure the Grid for Server Binding.

2. Follwo the requirements for configuring the Hierarchy funtionliaty

3. Define a ClientTemplate with DataSource configured for Ajax binding and set the AutoBind configuration to false

4. Add an event handler to the DetailInit event and use it to set teh data for the child Grid

   Check this REPL for a runnable example.

         public ActionResult Index()
         {
             List<CategoryItem> data = new List<CategoryItem>
                 {
                     new CategoryItem
                     {
                         CategoryName = "Storage",
                         SubCategories = new List<SubCategoryItem>
                         {
                             new SubCategoryItem()
                             {
                                 SubCategoryName = "Wall Shelving"
                             },
                             new SubCategoryItem
                             {
                                  SubCategoryName = "Floor Shelving"
                             }
                         }
                     },
                     new CategoryItem
                     {
                         CategoryName = "Lights",
                         SubCategories = new List<SubCategoryItem>
                         {
                             new SubCategoryItem()
                             {
                                 SubCategoryName = "Ceiling"
                             },
                             new SubCategoryItem
                             {
                                  SubCategoryName = "Table"
                             },
                             new SubCategoryItem
                             {
                                  SubCategoryName = "Floor"
                             }
                         }
                     },
                     new CategoryItem
                     {
                         CategoryName = "Flooring",
                         SubCategories = new List<SubCategoryItem>
                         {
                             new SubCategoryItem()
                             {
                                 SubCategoryName = "Tiles"
                             },
                             new SubCategoryItem
                             {
                                  SubCategoryName = "Laminate Flooring"
                             }
                         }
                     },
                 };
   
             return View(data);
         }
   

     @model IEnumerable<CategoryItem>
   
     <script>
         function onDetailInit(e) {
             var grid = e.detailCell.find("[data-role=grid]").data("kendoGrid");
             grid.dataSource.data(e.data.SubCategories);
         }
     </script>
   
     <script id="template" type="text/kendo-tmpl">
         @(Html.Kendo().Grid<SubCategoryItem>()
                 .Name("grid_#=CategoryName#")
                 .Columns(columns =>
                 {
                     columns.Bound(o => o.SubCategoryName);
                 })
                 .DataSource(dataSource => dataSource
                     .Ajax()
                     .ServerOperation(false)
                     .PageSize(10)
                 )
                 .AutoBind(false)
                 .Pageable()
                 .Sortable()
                 .ToClientTemplate()
         )
     </script>
   
     @(Html.Kendo().Grid<CategoryItem>(Model)
         .Name("grid")
         .DataSource(dataSource => dataSource
             .Ajax()
             .ServerOperation(false)
             .PageSize(2)
         )
         .Columns(columns =>
         {
             columns.Bound(e => e.CategoryName).Title("Category");
             columns.Template("#: data.SubCategories.length #").Title("Count of SubCategories");
         })
         .Sortable()
         .Pageable()
         .Scrollable()
         .ClientDetailTemplateId("template")
         .HtmlAttributes(new { style = "height:430px;" })
         .Events(events => events.DetailInit("onDetailInit"))
     )
   

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

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC
• Server-Side API Reference of the Grid for ASP.NET MVC
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base