kendo-react icon indicating copy to clipboard operation
kendo-react copied to clipboard

Grid - virtual scroll does not have top buffer

Open Nodios opened this issue 4 years ago • 18 comments

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: image

  1. Item rendered at top of the table is 9th in the dataset.
  2. There are no loaded items above it ready to be displayed.

Image 2: image

  1. Last visible item in table
  2. 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

Nodios avatar Oct 26 '20 15:10 Nodios

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

Nodios avatar Oct 26 '20 15:10 Nodios

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 avatar Nov 05 '20 08:11 simonssspirit

@simonssspirit What is your plan with this? Is this going to be implemented?

Nodios avatar Nov 10 '20 09:11 Nodios

@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 avatar Nov 10 '20 09:11 simonssspirit

@simonssspirit do you have any news on this?

Nodios avatar Feb 11 '21 08:02 Nodios

@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 avatar Feb 11 '21 08:02 Xizario

@Xizario do you have the estimate for top cache?

Nodios avatar Feb 11 '21 09:02 Nodios

Any news on this issue? This is really big problem that could be solved pretty easy.

marko035 avatar May 11 '21 11:05 marko035

requested again in 1519291 raising priority.

simonssspirit avatar May 12 '21 11:05 simonssspirit

@simonssspirit It's been quite some time now, do you have any info on this?

Nodios avatar Aug 10 '21 13:08 Nodios

@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.

simonssspirit avatar Aug 10 '21 13:08 simonssspirit

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 avatar Jan 04 '22 21:01 florianwachs

@florianwachs Thank you for sharing your feedback.

This item is already on our ToDo list.

simonssspirit avatar Jan 05 '22 06:01 simonssspirit

@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.

florianwachs avatar Jan 05 '22 08:01 florianwachs

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.

simonssspirit avatar Jan 14 '22 08:01 simonssspirit

Any update about this issue?

mblagojevic10 avatar Jul 08 '22 12:07 mblagojevic10

We plan all virtualization improvements for the September release.

Xizario avatar Aug 22 '22 13:08 Xizario

@Xizario Any new info regarding this? I haven't found anything in the new release...

matko-antunovic avatar Oct 05 '22 12:10 matko-antunovic

Need this as well. Having a grid with 100K records. When scrolling the grid is flickering.

Tommuh avatar Oct 20 '22 20:10 Tommuh

The issue has been resolved.

Please, see my comment here: https://github.com/telerik/kendo-react/issues/1367#issuecomment-1422889160.

nstoychev avatar Feb 09 '23 17:02 nstoychev