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