The problem with virtual scroll feature is that Grid doesn't take into account expanded details when fires onPageChange event. It's better shown in this example which is based on VirtualScroll official example with added detail component: https://stackblitz.com/edit/react-klm9yt?file=app%2Fmain.js
The problem is that when you scroll the grid down and then try to scroll up the grid content either quickly jumps or get stuck.
Apart from the example in Stackbtitz, I've put together the short video to clarify the issue.
The problem is that when you scroll the grid down and then try to scroll up the grid content either quickly jumps or get stuck.
Apart from the example in Stackbtitz, I've put together the short video to clarify the issue.
5 Answers, 1 is accepted
0
Hello, Artem,
Thank you for the example and the video it is really helpful.
The observed effect occurs because the rowHeight is set to 40 and when there is a detail template the row is way higher than 40 which is interfering with the internal calculations.
In cases like this, we recommend removing rowHeight, so the Grid can use internal logic to calculate the position:
https://stackblitz.com/edit/react-klm9yt-ltewo1?file=app/main.js
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Thank you for the example and the video it is really helpful.
The observed effect occurs because the rowHeight is set to 40 and when there is a detail template the row is way higher than 40 which is interfering with the internal calculations.
In cases like this, we recommend removing rowHeight, so the Grid can use internal logic to calculate the position:
https://stackblitz.com/edit/react-klm9yt-ltewo1?file=app/main.js
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Artem
Top achievements
Rank 1
Rank 1
answered on 11 Sep 2018, 09:50 AM
Hello Stefan,
Thank you for the reply. Removing rowHeight partially solved the issue but there is one more left. I've modified my initial example to simulate data filtering. Let's say that after applying some filters I've got only one row in the grid:
https://stackblitz.com/edit/react-klm9yt-dfmpfy?file=app/main.js
When scrolling the grid by mouse wheel the scroll gets stuck. But it works when I use thumb.
Please take a look at the video I've attached to the post.
Thank you for the reply. Removing rowHeight partially solved the issue but there is one more left. I've modified my initial example to simulate data filtering. Let's say that after applying some filters I've got only one row in the grid:
https://stackblitz.com/edit/react-klm9yt-dfmpfy?file=app/main.js
When scrolling the grid by mouse wheel the scroll gets stuck. But it works when I use thumb.
Please take a look at the video I've attached to the post.
0
Hi Artem,
That is interesting, I will debug it and if possible to improve it. At this point it is hard to say if this corner case could be supported. The virtualization is written with scrolling the grid items in mind, and not a huge details that are bigger than the total sum of height of the all rows.
The particular issue could be resolved if the inner details have paging or scrolling themselves to be small enough. To fit into the view.
Regards,
Vasil
Progress Telerik
That is interesting, I will debug it and if possible to improve it. At this point it is hard to say if this corner case could be supported. The virtualization is written with scrolling the grid items in mind, and not a huge details that are bigger than the total sum of height of the all rows.
The particular issue could be resolved if the inner details have paging or scrolling themselves to be small enough. To fit into the view.
Regards,
Vasil
Progress Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items
0
Artem
Top achievements
Rank 1
Rank 1
answered on 17 Sep 2018, 09:35 AM
Hi Vasil
Is there any update on this issue?
Is there any update on this issue?
0
Hello, Artem,
This behavior as explained is not a direct issue in the component that needs to be resolved.
The setup has to be changed for this case.
I will try to explain this with an example. Let's say we have a details view that is bigger than the viewport, this creates a case where when the user starts scrolling the details Grid it loses track of which is the parent element as it is no longer visible.
When the detail view contains many data, this requires setting a height and scrolling to the inner Grid. This will create the better user experience and it will remove the current undesired behavior.
The other step is to dynamically change the scroll type based on the data. The virtual scrolling is designed to be used with a large data sets and should be changed if the data is under the page size.
I modified the example to use both suggestions:
https://stackblitz.com/edit/react-klm9yt-vncy9k?file=app%2Fmain.js
Regards,
Stefan
Progress Telerik
This behavior as explained is not a direct issue in the component that needs to be resolved.
The setup has to be changed for this case.
I will try to explain this with an example. Let's say we have a details view that is bigger than the viewport, this creates a case where when the user starts scrolling the details Grid it loses track of which is the parent element as it is no longer visible.
When the detail view contains many data, this requires setting a height and scrolling to the inner Grid. This will create the better user experience and it will remove the current undesired behavior.
The other step is to dynamically change the scroll type based on the data. The virtual scrolling is designed to be used with a large data sets and should be changed if the data is under the page size.
I modified the example to use both suggestions:
https://stackblitz.com/edit/react-klm9yt-vncy9k?file=app%2Fmain.js
Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items