Hi,
I'm adding virtual scrolling to my awesome al-grid component which can have sub-grid (detail row) and I've found out that if I expand one row and scroll down to the pageSize number of rows and then scroll up, it jumps down 10 rows (approximately)
I managed to reproduce the issue here. Am I missing something?
So in my case, you'll see the jump when you reach row 5.
Regards,
/Pouya
Aditro
12 Answers, 1 is accepted
The virtual scrolling functionality requires both rowHeight and detailRowHeight to be set such that they reflect the actual Grid rows/detailRows height, and allso all rows should have the same height (same goes for detail rows):
https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/#toc-virtual-scrolling-setup
When the rowHeight and detailRowHeight are adjusted to reflect the actual DOM size of the respective elements, the issue seems to be resolved:
We are also recommending providing a page size that is roughly 3 times greater than the number of items that can be visible in the Grid at any given time for best scrolling experience in most typical scenarios (for example if the Grid is 500 pixels high, and the row is 36 pixels high, a page size bet, a page size between 40 and 50 will be optimal).
Here is the updated example:
https://stackblitz.com/edit/angular-uvmx1u-6wfuin?file=app/app.component.ts
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Hi Dimiter,
Thanks you for your quick answer but I don't see the problem is solved. You probably didn't pass the pageSize (in this case 40). I recorded the screen in a gif file which I attach. Please have a look.
Regards,
/Pouya
Aditro Enterprise Sweden
Could you check the setup of the grid as recommended by my colleague one more time. Indeed, the provided example functions as expected as it is configured properly for virtual scrolling. It does use a pageSize of 40:
@Component({ selector: 'my-app', template: ` <kendo-grid [data]="gridView" [skip]="skip" [pageSize]="pageSize"... `})export class AppComponent { public pageSize = 40; ...Looking forward to your reply.
Regards,
Svetlin
Progress Telerik
Rank 1
Hi Svetlin,
I think you didn't get what I meant. By "passing 40" I meant you didn't scroll enough to see the row 40; as I did in the gif file. The issue happens when the grid goes for the next portion of data and scrolls back all the way toward the top. I didn't change anything in the code that Dimiter provided.
Regards,
/Pouya
Aditro Enterprise Sweden
Please accept our apologies for misinterpreting the discussed statement. However, when I tried to follow the instructions and scroll up and down around the page change marks (they are not exactly at 40 because the skip is also determined based on fetching some more items that will be rendered on top of the visible ones to ensure a smoother scrolling experience when scrolling up), but it seems to work as expected on my end:
https://www.screencast.com/t/bCeb0XjM6
Am I missing something or are there any other specific steps or scrolling patterns that I can try in order to replicate the undesired behavior?
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Hi Dimitri,
It actually happens in your end too but you scrolled up quite fast so you missed it :D
Check 0:16 and 0:35. As soon as you reach row 13 it jumps back to row 20.
Regards,
/Pouya
Aditro Enterprise Sweden
Indeed, thank you for pointing out the exact spots. This seems to be an issue with our calculations regarding the discussed scenario (virtual scrolling + detail grids). I logged it to our public GitHub repository and you can track it here:
https://github.com/telerik/kendo-angular/issues/1915
I am sorry for any inconvenience caused. I updated your Telerik points as a small token of gratitude for both pointing this problem out and helping us to successfully reproduce and observe it.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Hi Dimitri,
I'm glad I could help to make kendo-grid awesome-er! Thank you for the points :)
Regards,
/Pouya
Aditro Enterprise Sweden
Rank 1
Hi,
Is there any update on this issue?
Looks like there is no work done on this as Issue created for this in GitHub is still open.
https://github.com/telerik/kendo-angular/issues/1915
Regards,
Gaurang
Indeed the discussed issue is still in our queue. We are sorry about the delay, but we are trying to prioritize both new features and bug fixes based on their severity, perceived impact and business value, the customer demand, and other factors, including, but not limited to the time of logging.
As our efforts are currently focused on the upcoming release (scheduled for May 16th), I hope we will be able to address some of the longstanding issues after the most critical features and fixes are released.
We are tracking all issues logged to our GitHub portal, and are doing our best to address all of them sooner or later, but our resources are also limited, so some issues take longer than others to be addressed.
Thank you for the understanding.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Indeed, all Grid rows and detail rows need to be of an equal predefined height (of course the height of the regular rows and detail rows can be different - just all regular rows need to have equal height and all detail rows need to have equal height).
This requirement is explained by the fact that the virtual scrolling functionality relies on internal calculations, based on the Grid row height (and detail row height respectively) to determine when a new portion of data should be rendered, based on the scroll position of the scrollable container that contains both the regular rows and the detail templates.
If these requirements are not met, the virtual scrolling functionality will likely still work, but there will be unexpected results when scrolling towards the end of the list - typically there is either blank white space after the last row, or some of the last rows can never be reached.
Regards,
Dimiter Topalov
Progress Telerik