kendo-react
kendo-react copied to clipboard
Grid - virtual scroll does not have top buffer
Hi,
I am looking into Grid virtual scroll option and I noticed that scroll up does not have item buffer like scroll down has.
Look at the images below to get grasp of what I'm talking about.
Image 1:
- Item rendered at top of the table is 9th in the dataset.
- There are no loaded items above it ready to be displayed.
Image 2:
- Last visible item in table
- There are loaded items below it, ready to be displayed.
This causes scroll up to have flicker in very simple scenarios. In case of additional cell rendering, flicker can substantial.
Observed behaviour was tested on the example for virtual scroll here
In addition, it would be good if you could be able to define buffer zones.
Eg: pageSize prop would define rendered and visible items and buffer(or tolerance as defined in some articles) would define rendered, non-visible data
This seems similar to the request we have here:
https://feedback.telerik.com/kendo-react-ui/1407584-allow-setting-a-number-of-records-to-be-pre-rendered-in-the-grid-with-virtual-scrolling
@simonssspirit What is your plan with this? Is this going to be implemented?
@Nodios
We will have a planning session in December and discuss this request based on its popularity.
Our planning is very dynamic based on the community interest and providing a specific ETA could be misleading.
cc: @Xizario @nstoychev
@simonssspirit do you have any news on this?
@Nodios, the performance was improved by avoiding remounts on the existing rows if they are the same, during scroll. Scrolling up/down now only mounts and unmount the new rows into the view.
This itself should minimize the flickering you are seeing when scrolling up. Top cache is still not added.
@Xizario do you have the estimate for top cache?
Any news on this issue? This is really big problem that could be solved pretty easy.
requested again in 1519291 raising priority.
@simonssspirit It's been quite some time now, do you have any info on this?
@Nodios This is still not implemented. The reason is that even if it seems like a small change, to just add a number of items to be rendered at the top there are other factors that have to be taken into account.
We are working on the items based on different priority factors, we know that this has been requested for a while and we are taking this into account when we plan the next features.
We will update the status of the item as soon as it is planned.
This is a showstopper for me. I have a client project that needs to display 1500 Rows. Performance of the react grid is very slow for actions like select or expand. I tried usememo and a custom row renderer but it's still to slow. My hope was virtualization might help. But I have scrolling issues when opening the detail component, like sudden skips in scrolling. But even if that would work, scrolling up just looks wrong by displaying just white, and then popping rows in. I now have to convince the client to use paging to reduce the rows to 100 per page to make the grid usable. Infinite scroll does not work in my case, because eventually there will be enough rows, starting at ca. 250, to make the grid feel sluggish. I fear I have to look for alternative grid components.
@florianwachs Thank you for sharing your feedback.
This item is already on our ToDo list.
@simonssspirit Thank you for the information. Don't get me wrong, I really like the features of the grid and have no problems with other controls of the suite sofar. As long as the row count is under 50, it's really fast. Virtualization seems to be the only option for me, that's why I hit a roadblock there. Is there some place where I can follow this item on your todo list? Is this someting we can expect in Q1 or would you say later? Thanks a lot and have a great day.
This is the public item with which is on the ToDo list. When is started working on it we will update the item here.
It is expected in the release after this one, so in the upcoming months. A more specific ETA could be misleading as all tasks are very dynamic.
Any update about this issue?
We plan all virtualization improvements for the September release.
@Xizario Any new info regarding this? I haven't found anything in the new release...
Need this as well. Having a grid with 100K records. When scrolling the grid is flickering.
The issue has been resolved.
Please, see my comment here: https://github.com/telerik/kendo-react/issues/1367#issuecomment-1422889160.