Grouping With Pagination Only Shows Groups On The First Page in Kendo UI for jQuery Grid

Ning

6 posts

Member since:
Jun 2016

Posted 23 Jun 2016 Link to this post

Hi,

In my kendo ui grid, my data volume is between 1000 to 9000, and I used pagination to speed up performace. Without pagination, it's extremely slow, impossible ot use. However, when I group by some column, only the groups in the first page will be displayed. If the first group spans over multiple pages, then when I collapse the group, I can only see one group in the first page, instead of all the groupings I have. I saw that this issue was raised in 2014, 2015. I am wondering if this issue has been addressed? What's the workaround for it?

Thanks,

Ning

Dimiter Topalov

Admin

1296 posts

Posted 27 Jun 2016 Link to this post

Hello Ning,

This is the expected behavior of the Kendo UI Grid, as paging is always performed before grouping to avoid unnecessary grouping of the whole dataSource. The desired behavior is not supported, but can be achieved with some custom logic.

As there are no special events, associated with the expanding and collapsing, the developer needs to handle the click events of the collapse/expand icons (they have classes .k-icon.k-i-collapse and .k-icon.k-i-expand respectively), and change the dataSource.pageSize with the desired value.

Also the groups in view have to be expanded/collapsed programmatically if needed, as demonstrated in the following how-to article:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/persist-grouped-grid-collapsed-details-state

Let us know if you have other questions about Kendo UI.

Regards,
Dimiter Topalov
Telerik

Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.

ICT

1 posts

Member since:
Dec 2014

Posted 20 Nov 2017 in reply to Dimiter Topalov Link to this post

Hi Dimiter,

Could you please elaborate further as to how this desired behavior can be achieved?

Stefan

Admin

3067 posts

Posted 22 Nov 2017 Link to this post

Hello,

After inspecting the scenario, this will require having no initial paging before the grouping. This is required because as my colleague said the paging is done before the grouping which will lead to the scenario where the actual number of records will not be available for the calculation to determine the new page size.

In this scenario with grouping and a large data set, we can recommend our new endless scrolling feature. Its specific implementation will ensure that all records in a group will be displayed together:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#endless-scrolling

http://demos.telerik.com/kendo-ui/grid/endless-scrolling-local

I hope this helps.

Regards,
Stefan
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Vladimir

1 posts

Member since:
Sep 2020

Posted 07 Sep 2020 in reply to Stefan Link to this post

I have the very same problem with Kendo for angular 2+ - is there some solution already or also here is it remaining paging first, then grouping - and like before - grouping of only the current page? ...

Svetlin

Admin

476 posts

Posted 09 Sep 2020 Link to this post

Hi Vladimir,

Indeed, the Kendo UI for Angular Grid performs paging first and then grouping. What I can recommend is to use the GroupBindingDirective which allows to use virtualization with grouping as demonstrated in the following article:

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

I hope this helps.

Regards,
Svetlin
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).