# Configuring the Grid Hierarchy with Local Data

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Grid for Progress® Telerik® UI for ASP.NET MVC</td>
 </tr>
</table>

## 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](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/binding/server-binding).

2. Follwo the requirements for configuring the [Hierarchy funtionliaty](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/hierarchy)

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`](https://docs.telerik.com/aspnet-mvc/api/kendo.mvc.ui.fluent/grideventbuilder#detailinitsystemstring) event and use it to set teh data for the child Grid

Check this [REPL for a runnable example](https://netcorerepl.telerik.com/wPlFuylo00Q9Ch7J51).

```C# Controller
      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);
      }
```

```Razor View
  @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](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/overview)

* [ASP.NET MVC Grid Demos](https://demos.telerik.com/aspnet-mvc/grid/index)

* [ASP.NET MVC Grid Product Page](https://www.telerik.com/aspnet-mvc/grid)

* [Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)](https://www.telerik.com/aspnet-mvc/documentation/getting-started/video-onboarding)

* [Telerik UI for ASP.NET MVC Forums](https://www.telerik.com/forums/aspnet-mvc)

## See Also

* [Client-Side API Reference of the Grid for ASP.NET MVC](https://docs.telerik.com/kendo-ui/api/ui/grid)
* [Server-Side API Reference of the Grid for ASP.NET MVC](https://docs.telerik.com/aspnet-mvc/api/grid)
* [Telerik UI for ASP.NET MVC Breaking Changes](https://www.telerik.com/aspnet-mvc/documentation/backwards-compatibility/2023-backwards-compatibility)
* [Telerik UI for ASP.NET MVC Knowledge Base](https://docs.telerik.com/aspnet-mvc/knowledge-base)