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

Configuring the Grid Hierarchy with Local Data

Environment

Product

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

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:

Configure the Grid for Server Binding.
Follwo the requirements for configuring the Hierarchy funtionliaty
Define a ClientTemplate with DataSource configured for Ajax binding and set the AutoBind configuration to false
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.

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

tab-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"))
  )

Configuring the Grid Hierarchy with Local Data

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also