Paging and grouping in FlexGrid

Posted by: license on 18 May 2023, 4:43 pm EST

    • Post Options:
    • Link

    Posted 18 May 2023, 4:43 pm EST

    Hi

    We are using Wijmo for Angular, currently @grapecity/wijmo.all version 5.20213.824.

    Due to our backend performance, we have implemented paging in our FlexGrid.

    Currently based on monitoring scrollPositionChanged and if we reach the end we emit an event to load next page.

    That works fine for us, and the solution has run like this in several years.

    Now we are looking at implementing our first grid with Grouping of data.

    We have a few challenges with this.

    • Collapsing a group messes with our paging logic.

      ** E.g. our pagesize is 50 rows, if a group has 400 rows, we will need to page multiple times after collapsing to show next group
    • Groups first appear when data is loaded - so as you scroll more groups will appear.

      ** Combined with the above, it make it hard and clumsy to work with.
    • Sorting - we would like the groups to be sorted alphabetically - but still be able to sort the grid by something else.

    So - my question is.

    Are there any good/other way of implementing paging, that works if you have groups. (E.g. an direct event from Wijmo that end is reached - instead of using scrollbar as indicator)

    Would it be possible to load groups first - and then on expand do LazyLoading - similar to lazy loading nodes in the TreeView?

    Or is the only way forward here to ensure that our backend is optimized enough to load 100k+ rows, and rely on the grid being able to handle/render that many rows with groups?

    I am just looking for hints on where to go - if we should spend time on getting paging to work - or just discard that when grouping is enabled - and go for full dataset at once.

    Best regards

    Anders

  • Posted 18 May 2023, 8:24 pm EST

    Found a solution I think will work.

    Just a clarification to start with, we do not use Pages as in FlexGrid pages, it is more Virtualization, where when we scroll to end, we add more elements from next “page” to the collectionView. So our API is page-based - the grid has endless scroll.

    Inspired by this: https://www.grapecity.com/wijmo/demos/Grid/PagingScrolling/ScrollVirtualization/angular

    And based on the same idea, I have added a handler to flexGrid.groupCollapsedChanged, that fires an endReached event if viewRange.bottomRow equals length of rows collection.

    In this, I have added a clause to check if the last Row is a GroupRow - because then we also want to load more data.

    In our eventHandler for endReached, we then do same check - and if we still have last row visible - or last row being a groupRow - then we load another page etc.

    That seems to work and perform nicely for now.

    If any other approaches exists - feel free to still post it.

  • Posted 21 May 2023, 5:14 pm EST

    Hello,

    We are glad you were able to resolve the issue on your own. Regarding, loading FlexGrid rows in LazyLoading manner you may handle the groupCollapsedChanged event of FlexGrid to perform the lazy loading action in the FlexGrid. Please refer to the wijmo demo link below demonstrating the same:

    https://www.grapecity.com/wijmo/demos/Grid/TreeGrid/LazyLoading/angular

    You can also refer to this sample link: https://stackblitz.com/edit/js-dwudbv?file=index.js

    In case you have any further queries then please let us know.

    Regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels