Grouping With Pagination Only Shows Groups On The First Page

6 posts, 0 answers
  1. Ning
    Ning avatar
    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

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1291 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.
  3. ICT
    ICT avatar
    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?

  4. Stefan
    Admin
    Stefan avatar
    3034 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.
  5. Vladimir
    Vladimir avatar
    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? ...
  6. Svetlin
    Admin
    Svetlin avatar
    465 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).

Back to Top