Grid grouping with Virtual Scrolling issues

10 posts, 0 answers
  1. Alexey
    Alexey avatar
    12 posts
    Member since:
    Jul 2020

    Posted 11 Aug 2020 Link to this post

    Hi. I'm implementing a Grid with grouping and virtual scrolling. It i see it have some defects when I do scrolling. I created an example to demonstrate that and recorded a small video. Please take a look and tell me if I do anything wrong.

     

    https://stackblitz.com/edit/react-tvh32r?file=app/main.jsx
    https://take.ms/r6Cia

     

    Thanks

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 12 Aug 2020 Link to this post

    Hello, Alexey,

    Thank you for your example.

    This is expected as when the Grid is grouped the rows and the groups have a dynamic height. This leads to an empty space at the end of the Grid that corresponds to that difference.

    We have a GitHub item logged long ago for this and the developers are monitoring for an approach that will fix this case. One possible approach is the one we have for Angular where this only works if all records are present on the client. This is not ideal as well because if the data set has millions of records a request to fetch such amount of data can take very long to get. This is why we work with only part of the data, but this leads to the scrolling issue at the end as we do not know how long a group is as we do not have the entire data.

    https://github.com/telerik/kendo-react/issues/188

    Regards,
    Stefan
    Progress Telerik

  3. Alexey
    Alexey avatar
    12 posts
    Member since:
    Jul 2020

    Posted 21 Nov 2020 Link to this post

    I'm facing another issue when I have it fully scrolled bottom and I scroll up slightly it navigates me to top of the grid

    https://monosnap.com/file/qthGGVcElJ6cgsOxcUEuTJb0qHuemm

  4. Alexey
    Alexey avatar
    12 posts
    Member since:
    Jul 2020

    Posted 22 Nov 2020 Link to this post

    Another issue - it falls into a loop

    https://monosnap.com/file/7KxNnATOa4s08qoTnanUQHESOczYSJ

  5. Vasil
    Admin
    Vasil avatar
    1642 posts

    Posted 24 Nov 2020 Link to this post

    Hi Alexey,

    Thank you for the additional information. I have licked back the forum into the issue, so we can track it in one place. 

    Regards,
    Vasil
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  6. Alexey
    Alexey avatar
    12 posts
    Member since:
    Jul 2020

    Posted 24 Nov 2020 Link to this post

    Is there a way to make the grid usable with grouping?
  7. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 25 Nov 2020 Link to this post

    Hello, Alexey,

    We have added suggestions for improvements in the GitHub items.

    If the current state of the Grid with grouping is unacceptable, these are the available options:

    1) Comment in the issue to add the option with all items available.

    2) Use the TreeList component as it has a different virtualization logic and can also wort with tree data:

    https://www.telerik.com/kendo-react-ui-develop/components/treelist/virtualization/

    3) Use the Grid without row virtualization, only with column virtualization based on the number of items. The Grid will render fast with around 500 to 1000 records.

    4) Use the paging functionality of the Grid to improve the performance. The paging is working as expected with grouping.

     

    Regards,
    Stefan
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  8. Alexey
    Alexey avatar
    12 posts
    Member since:
    Jul 2020

    Posted 29 Nov 2020 in reply to Stefan Link to this post

    Hi. Is there a way to use TreeList + virtual scrolling + infinity loading?
  9. Alexey
    Alexey avatar
    12 posts
    Member since:
    Jul 2020

    Posted 29 Nov 2020 Link to this post

    2) So I need it to display 20 lines initially. When I scroll down it loads extra more lines and it displays only those lines that should be visible at the moment. TreeList works well, but it seems it works only with Pager type pagination

    3) virtualising columns could work, but my grid is editable and if I have a thousand rows and start editing it will work very slow since I need to modify a huge array and grid does remount all rows every time anything happen

    4) the paging doesn't work in my case since clients don't like this

  10. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 30 Nov 2020 Link to this post

    Hello, Alexey,

    1) Is there a way to use TreeList + virtual scrolling + infinity loading? - The virtual scrolling and infinity loading are two separate concepts. The virtual scroll only renders the visible elements to speed up the loading where the infinite scroll renders all elements but starts with a small number. Still, with infinite loading, if the users scroll a lot, all items have to be rendered and the operation can still become slower.

    2)  So I need it to display 20 lines initially. When I scroll down it loads extra more lines and it displays only those lines that should be visible at the moment. TreeList works well, but it seems it works only with Pager type pagination - Could you please share if there is a specific issue with using only the virtualization in its current state?

    3) virtualising columns could work, but my grid is editable and if I have a thousand rows and start editing it will work very slow since I need to modify a huge array and grid does remount all rows every time anything happen - We have an improvement on a Pull request that will re-render only the updated rows and not all of them. This should help speed up the editing.

    4) the paging doesn't work in my case since clients don't like this - Thank you for the clarification on this one.

    Regards,
    Stefan
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top