New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Configuring the Grid Hierarchy with Local Data

Environment

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

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.

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

More ASP.NET MVC Grid Resources

See Also