Grid Hierarchy with Local Data

Description

I want to simply bind Parent grid to a model which contains a list of elements and each of that element have list of children records and I want a DetailsGrid 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"))
     )