[Kendo Angular Grid] How to implement grouping and aggregations when virtual scrolling is enabled?

[Amit]

Hi!

 

I am looking for examples to implement following when virtual scrolling is enabled for Kendo Angular Grid.

- Predefined group when loading the grid initially. For example, when I navigate to a page which has the grid, I would like to group the grid using a particular column and keep all the groups collapsed. I have tried multiple approaches such as this one: https://stackblitz.com/edit/angular-tpetae

- Have an external button to collapse and expand all groups. For example, when I change grouping on the grid by dragging and dropping columns, I would like to make it easy for user to quickly reach the group needed.

-Ability to display Group header aggregations. I came up with something like this to show count of rows under each group:

 

<kendo-grid-column field="myCol" title="My Col" width="300">
            <ng-template kendoGridGroupHeaderTemplate let-group let-value="value" let-aggregates>
                <div>{{value}} ({{getCount(aggregates)}})</div>
            </ng-template>
        </kendo-grid-column>
getCount(agg: any): number {
    return (agg && agg.items) ? agg.items.length : 0;
  }

But it doesn't work when groups are collapsed, count becomes 0 (especially when grouping with multiple columns)

 

[Dimiter Topalov]

Hello Amit,

The Grid provides limited support for using the virtual scrolling and grouping functionalities together. This is only possible via the kendoGridGroupBinding directive when all data is available on the client:

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-using-virtualization-with-grouping

When this approach is used, the Grid collapseGroup and expandGroup methods for collapsing/expanding a group programmatically, are not supported:

https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-collapsegroup

https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-expandgroup

Providing the initial group descriptors and group-related templates and aggregates can still be used like in scenarios that do not involve virtual scrolling, e.g.:

https://stackblitz.com/edit/angular-dqjtdd-cybdju?file=app/app.component.ts

The aggregates need to be added to each group descriptor manually:

onGroupChange(e) {

      const newGroups = e.map(gr =>{

        gr.aggregates = this.aggregates;

        return gr;

      });

      this.group = newGroups;

    }

 

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Amit]

thank you Dimiter for the response.

I was primarily looking for virtual rendering, grouping and aggregations on the grid - looks like I did not read the fine print. Would you be willing to add these feature requests to backlog? Wondering if I would be forced to use another grid component from the internet even though my team invested in Kendo UI🤔🤔 

 

[Dimiter Topalov]

Hello Amit,

All of the listed requirements (virtual rendering, grouping, aggregates) are currently supported when using the KendoGridGroupBinding directive. The only limitation is that all data should be available on the client, so that the directive can internally process the data properly.

If you would like to have virtual scrolling with grouping and server-side operations, this is something that we cannot provide out-of-the-box, because it will require a very complex server-side implementation for processing the data that is beyond our control. In general, the Grid has representational functions only, and renders the data that is passed to it - if the developer sends the Grid state (available in the dataStateChange event) to the server, and processes the data in the manner our kendoGridGroupBindingDirective does, the returned data structure will be rendered accordingly.

Our clients can obtain and inspect the actual source code of all of our packages, so all internal processing performed by the directive can be inspected, and used as the base of a custom server-side implementation that will process the data on the server in a similar manner:

https://www.telerik.com/kendo-angular-ui/components/installation/source-code/

Regards,
Dimiter Topalov
Progress Telerik

[Amit]

Thank you Dimiter for the response.

I have all the data on the client side and not doing any operation on the server side. I have around 10k rows on the array so I will have to use virtual rendering.

After playing around with some of the settings you mentioned, I could get following working on the grid

- Loading the grid with an initial group

- Aggregate for each required column when grouped - I just needed to show count of items in each group

 

I am still looking for a way to implement following:

- When grid is grouped with multiple columns, header for each group level shows count of all the rows in the group. It will not consider the count of rows in the sub group. For example if parent group has 10 sub groups and each child group has 10 rows, it shows 100 as count for the parent group. I would like to change it to 10 since it has 10 subgroups.

- Collapse/expand button - if you can add this to backlog if not available as of now, that would be great too. I noticed that, if a group is collapsed and grid is scrolled all the way to the bottom and back - which re-renders all the rows, grid still remembers that the first group was collapsed. So I am wondering if there is a way to iterate over the groups and mark all of them as collapsed/expanded

 

[Dimiter Topalov]

Hi Amit,

I am glad to understand you have successfully moved forward with the discussed implementation.

As for the questions - 

1) The "count" aggregate calculates all data items in the respective group, and thus it is not possible to display the number of subgroups for one level of grouping, and the number of items - for another level. In theory, it is possible to display the length of the items array of the respective group in the template, but this is calculated dynamically, and will be 0 for collapsed groups. Another possibility is to keep a separate array that contains the whole grid data (not paged) grouped by the current grouping descriptors (process the whole data set each time in the groupChange event handler) and to display custom values, based on this grouped data in the template. This will require a somewhat complex custom implementation that will look for the group in the custom data structure (the grouped whole data set), and will display the length of the "items" array of the respective group in the template.

2) Currently the collapsed/expanded state of the groups is persisted by the index of the respective row (TR). This indeed is not ideal, and we are looking into enhancing the grouping functionality to allow persisting the collapsed/expanded state in a more reliable and intuitive manner that is directly related to the group value, and not to the row index of the grouped row - something similar to the expand/collapsed state of the master-detail Grid:

https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/expanded-state/

I hope that we will be able to integrate this enhancement with the kendoGridGroupBinding directive too, but due to the specifics of the virtual scrolling functionality, I still cannot promise that this will be the case. Once this functionality is ready, the developers should be able to always provide and persist the expanded/collapsed state of all groups by their hierarchical index or other group-specific unique key.

Regards,
Dimiter Topalov
Progress Telerik

[Felix]

Hello!

Is there any progress in collapsing all groups with kendoGridGroupBinding? It is much better to use it with huge data, but on the other hand it is bad, that all groups are expanded.

 

Thanks in avance!

Felix

[Dimiter Topalov]

Hi Felix,

We are currently working on a Grid enhancement that will allow persisting and controlling the groups expanded/collapsed state in a manner, similar to the one, introduced for the master-detail and selection functionalities:

https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/expanded-state/

https://www.telerik.com/kendo-angular-ui/components/grid/selection/persisting/

https://www.telerik.com/kendo-angular-ui/components/grid/selection/custom-selection/

However, I am still not certain whether this enhancement will be applicable to the kendoGridGroupBinding directive too, as it is a rather complex implementation, addressing this one specific scenario - allowing grouping local data alongside virtual scrolling.

In all other scenarios, involving regular (or no) paging with regular and remote data, the developer will be able to determine which groups will be collapsed/expanded programmatically both on initialization and at any given time thereafter.

Regards,
Dimiter Topalov
Progress Telerik

[Felix]

Hello Dimiter,

thanks for your reply. Could you say what's the best way to handle a large dataset with grouping and collapsed groups?

Right now, it takes 2-5 seconds to expand a group and this is not very nice for the users.

Best regards

Felix

[Dimiter Topalov]

Hello Felix,

The most reliable way to handle large data sets in the Grid in a performant manner is to use either regular paging or virtual scrolling. Currently neither supports having initially collapsed groups, but regular paging allows for programmatic collapsing of the groups after loading the data (via the collapseGroup method).

The new enhancement we are working on will provide a way to control the state of all groups programmatically in scenarios involving regular or no paging, but we are not yet sure the same approach would be applicable to virtual scrolling too.

Regards,
Dimiter Topalov
Progress Telerik

[Felix]

Hello!

Thank you for your answer.

The problem with paging and grouping is, that the groupheaders show up on different pages. The example you have on your website is not really optimal for users, because you not really know where the groups are.

https://www.telerik.com/kendo-angular-ui/components/grid/grouping/aggregates/

 

Is there a possiblity to put all groups on page one? Or do I have to use virtual scrolling for that?

Best regards

Felix

[Dimiter Topalov]

Hello Felix,

Indeed, the desired behavior of displaying multiple collapsed groups on the same page cannot be achieved with regular paging out of the box, because the built-in Grid paging behavior considers all items within the groups for each "page" of data, not the number of groups themselves as items. Thus if the page size is for example 10, and there is a group that contains 10+ items, when it is collapsed, other groups or items will not be displayed on the same page.

Behavior similar to the described one is possible via a custom implementation, as described in the following public forum thread:

https://www.telerik.com/forums/pager-page-size-template-issue#6sKABNJFRUyhqMuV7ABPPA

https://www.telerik.com/forums/pager-page-size-template-issue#wrBGltsGyEKvTAEpR-xDmQ

Here is a runnable demo that demonstrates the outlined approach:

https://stackblitz.com/edit/angular-dhzdzm?file=app/app.component.ts

Using virtual scrolling will not yield the desired outcome either, as collapsing the groups programmatically is not supported when the KendoGridGroupBinding directive is used. A possible workaround in such scenario would be to click the collapse group icons programmatically, but this will likely introduce performance and other issues depending on the exact data set, as collapsing a group or several groups (depending on the number of items in each) will trigger page change for rendering data from the next page.

Regards,
Dimiter Topalov
Progress Telerik