Hierarchy grid eager loading

[Hans]

I have been looking through the forms for sometime now to find an answer. I have a hierarchy grid that works well. However I need to iterate through the data later. I want to eager load my hierarchy grid. The only thing I have found so far are some older answers using jquery from 2013 here . Is there a more modern approach using Asp.net MVC I could use?

[Hans]

I also would be alright with calling the read function on the child grid pragmatically in jQuery. I can't seem to find that answer either.

[Alex Hajigeorgieva]

Hello, Hans,

Thank you for sharing the resource that you have seen.

Dependent on the desired outcome, you may take advantage of either option:

1) Server Hierarchy

https://demos.telerik.com/aspnet-mvc/grid/serverhierarchy

2) Ajax bound parent grid with client-side detail initialization

The option that my colleague suggested in 2013 is still valid. However, I would like to offer an alternative approach using Kendo MVVM instead.

Here is an example:

- An Ajax bound grid with Orders which contain a list of Customers:

@(Html.Kendo().Grid<Project.Models.OrderViewModel>()
   .Name("grid")
   .Columns(columns =>
   {
       columns.Bound(p => p.OrderID);
       columns.Bound(p => p.ShipName);
   })
   .DataSource(dataSource => dataSource
      .Ajax()
      .PageSize(20)
      .Read(read => read.Action("Orders_Read", "Grid"))
   )
   .ClientDetailTemplateId("template")
   .Events(e => e.DetailInit("initChildGrid"))
 )

 
- The client template contains a single div with source binding (more can be defined with MVVM syntax)

<script id="template" type="text/kendo-tmpl">
  <div data-role="grid" data-bind="source:Customers"></div>
</script>

- In the DetailInit() event handler, just bind the detail cell to the master row data

<script>
    function initChildGrid(e) {
        kendo.bind(e.detailCell, e.data);
    }
</script>

Let me know what you think or in case further questions arise.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Hans]

Thanks for the reply. I was able to get everything working with the examples show here and a little bit more research.