Kendo MVC grid hierarchy - child grid generated from parent Ienumerable property

Question

So, I'm incredibly new to using Kendo, and I am messing with their MVC grid. I have defined a grid with an ajax data source for server side paging and sorting. The object that the ajax call returns has a property that is an IEnumerable. I would like to use the Grid's hierarchical capabilities to display this collection as a child grid of each row.

I've read a lot of blogs and Telerik's documentation on hierarchical grids, and every example I've found defines a client template for the child grid, and that client template is a grid that makes a separate ajax call to get its data. I don't need or want to make a separate call for the child grid since I've already got all of the data I need in the model for the parent grid.

Is there a way I can accomplish what I'm trying to do?

Answer 1

The described scenario can be implemented like this:

• The master data items should have a field with a value that is an array of plain objects - based on what you say, you should already have that.
• The master Grid configuration should define a client detail template with a child Grid that has defined columns, an Ajax DataSource and model type, but is not bound to any specific data (i.e. there is no Read() action).
• In the detailInit event of the master Grid, get() the nested array from the master data item (e.data), and assign it via data() to the detail Grid's dataSource instance.

http://dojo.telerik.com/iLAza

You may notice the usage of toJSON() in the example above. Its purpose is to strip the nested Features array of all Kendo-UI-specific ObservableObject stuff and transform it back to a regular JavaScript array of plain objects. This step is optional, but necessary if you want to decouple the data of the detail Grids with the one in the master Grid.