This is a migrated thread and some comments may be shown as answers.

Hierarchy grid eager loading

3 Answers 126 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Hans
Top achievements
Rank 1
Hans asked on 08 Apr 2019, 05:28 PM
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?

3 Answers, 1 is accepted

Sort by
0
Hans
Top achievements
Rank 1
answered on 08 Apr 2019, 05:34 PM
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.
0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 10 Apr 2019, 02:46 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Hans
Top achievements
Rank 1
answered on 15 Apr 2019, 02:59 PM
Thanks for the reply. I was able to get everything working with the examples show here and a little bit more research.
Tags
Grid
Asked by
Hans
Top achievements
Rank 1
Answers by
Hans
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or