Configuring the Grid Hierarchy with Local Data

Environment

Product

Grid for Progress® Telerik® UI for ASP.NET Core

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 Local Data 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.

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);
      }

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 Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

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