wakers01
wakers01

Reputation: 443

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

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?

Upvotes: 1

Views: 2553

Answers (1)

dimodi
dimodi

Reputation: 4139

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.

Upvotes: 2

Related Questions