Paging for a detail grid with local data

[Boardy]

In my case, the main grid retrieves its data via an Ajax datasource

@(Html.Kendo().Grid<ViewModels.IconViewModel>()
  .Name("Icons")
  .Columns(columns =>
  {
    ...
  })
  .Pageable()
  .Scrollable(s => s.Height("auto"))
  .Navigatable()
  .Selectable(s => s.Mode(GridSelectionMode.Single))
  .DataSource(dataSource => dataSource
  .Ajax()
      .PageSize((int)Model.RowsPerPage)
      .Read(read => read.Action("GetIcons", "API")
      .Type(HttpVerbs.Get)))
  .Events(e => e.DetailInit("detailInit"))
  .ClientDetailTemplateId("inner-grid-template")
  .AutoBind(true)
)

 

and the detail template is defined as

<script id="inner-grid-template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<ViewModels.IconReferenceViewModel>()
  .Name("IconReferences_#=Id#")
  .Columns(columns =>
  {
    columns.Bound(o => o.ClassName).Filterable(false);
    columns.Bound(o => o.SubclassName).Filterable(false);
  })
  .ToClientTemplate()
  )
</script>

 

In the detailInit event, the data source of the detail grid is set to a property of the model. This property holds an array of items.

function detailInit(e) {
  var grid = $("#IconReferences_" + e.data.Id).data("kendoGrid");
  var data = e.data.References;
  grid.dataSource.data(data);
}

 

So far so good. The data is shown in the grid as intended. But I want the detailed grid to be pageable. I played around with:

• Setting .Pageable() in the detail template
• Adding a datasource in the detail template in order to set the pagesize (Ajax/Custom?)
• Setting grid.dataSource.pageSize (and other properties like serverPageable) in the detailInit() event.

This usually resulted in a brief flicker of the complete detail list or the page reloading or the complete list with a paging control (showing 1-10 of 20, but showing the complete list; using the paging control refreshed the main grid).

So what is the correct way of getting this done?

[Eyup]

Hello Boardy,

 

I am not sure that this would be supported in this specific way it is right now. It could turn out that you will need to use a different approach to get you going.

From my experience throughout the years and many projects we handled with our customers, this kind of cases can generally be resolved using the following approach:

1. Create a very basic working sample to prove the concept of what you try to achieve - in this case, here is such a sample:
https://demos.telerik.com/aspnet-mvc/grid/hierarchy

2. In the original project where the issue is, comment out the detail grid and its binding code.

3. Replace the old code with a dummy grid and data source and run the sample to ensure that the grid is working as expected. Here is a sample. You can use the same code from the sample provided in point 1.

4. Once all the steps before are completed, you can now pass to bringing back you original binding logic. The important key concept here is the following - Step By Step. If you rush it, things may get complicated and it would be difficult to track down what is happening and where.

5. Replace the binding code of the inner grid with something more meaningful - it could be a DataSource Read Action coming with actual data from the database. Still no relation with the main table rows.

6. Again, ensure that the grid is working till now for every point.

7. Add a relation to the master rows by passing additional argument to the Controller action which returns the detail table data, similar to this:

 .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))

8. Once this is done, you will have a fully functioning hierarchical grid. For optimization, you can try to bring back the Property-List-Binding you tried at the beginning. The result here would be unknown - if it works, it works. If it doesn't, then you can keep the solution from point 7.

I hope this will help you troubleshoot and resolve the problem.

 

Regards,
Eyup
Progress Telerik

[Boardy]

The main issue in this case is that the datasource for the detail grid is an array property of the model in the main grid. So all data is already available at the client side from the beginning and there's no extra callback to the server to read data for the detail grid.

The detail grid is basically working correctly, but I would prefer it to be paged. According to the documentation, I have to set the pagesize on the datasource and have done so for other cases where I have a API to retrieve the next level data. Then I can create an Ajax datasource. But in this case the data is already present.

How can I set the page size of this "internal" datasource?

[Eyup]

Hello,

 

In this case, you can use the detailInit event handler provided by the grid to achieve this requirement:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/detailinit

Inside this event, you can extract the values from the model of the row and provide them as a datasource for the inner grid:
https://dojo.telerik.com/uYisUgOG

 

Regards,
Eyup
Progress Telerik

[Boardy]

Just for who is struggling with the same issue: it turned out to be AutoBind() that was in the way. That should be turned off. The resulting template is something like

<script id="inner-grid-template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ViewModels.IconReferenceViewModel>()
          .Name("IconReferences_#=Id#")
          .Columns(columns =>
          {
              columns.Bound(o => o.ClassName).Filterable(false);
              columns.Bound(o => o.SubclassName).Filterable(false);
          })
          .DataSource(ds => ds
            .Ajax()
            .PageSize(12)
            .ServerOperation(false))
          .Pageable()
          .AutoBind(false)
          .ToClientTemplate()
          )
</script>

[Eyup]

Hello,

 

I'm glad the issue is now resolved and thank you very much for sharing the solution with our community.

 

Regards,
Eyup
Progress Telerik