I spent days about that without finding any solution.
The case is simple :
I have a Grid using virtual scrolling and a "nav toolbar" with buttons : "First, Previous, Next, Last".
The nav toolbar purpose is to navigate through the records contained in the grid.
Note that the grid itself is in a kendo TabStrip but at this point, I use the nav toolbar only when the grid is visible. Later, I'll need to resync the grid if the user use the toolbar when the tab ontaining the grid is hidden, but it's another story.
I tried several approaches, here is the last.
Working code for "First" button : In any case, I get the first record selected at the top of the grid
In databound this code works, simple :
The same kind of code works for the "Last" button.
For the "Next" (and "Prev") button, it works untill the grid needs to load data :
When I use scrollTop, if Kendo needs more records, it loads them. So I continue the process in dataBound event :
A this point, nothing works at all. This this the code in databound event:
The problem i that grid nehavior becomes erratic, the scroll position is not right, so most of the time, I think the right record is selected, but it isn't showed. I suspect a problem with scrollTop when used form databound event.
9 Answers, 1 is accepted
With virtual scrolling, the height and the offset of the content are dynamic. Thus, calculating the distance is not an easy task, I even assume that it is not doable for every corner case.
Having said that, if the desired functionality is a must, I strongly recommend switching to Endless Scrolling:
I hope this information is useful.
Thanks for your answer.
I think I can deal with virtual mode as long as the grid (which is in a tabstrip) is visible. I'll post my code later : Each time I select the first/last visible record in the grid, I scroll up/down using the current row height, so the grid fetches the prev/next page if needed and it seems to work even I have to make more tests.
Of course, I understand that I can't use same method when the tab containing the grid is hidden. So when this is the case (the visible tab is the one containing the form associated with the grid), I don't try to sync scroll position, I just select tr elements to fectch next/prev record, then when there is no more record, I explicitly fetch records by calling page() method.
But doing this with virtual scrolling does not work. If I call page() method, even when the grid is visible, I can't scroll anymore. I just get the page but the position of scrollbar is ever at top, and no way to scroll back. Is it by design or is it a bug ?
Please find attached png. What I did to get this : Starting from first page, when the grid is visible, I call myGrid.dataSource.page(myGrid.dataSource.totalPages());
After that, you can see that I get indeed the last record, but the scrollbar position is wrong. I think it's easy to reproduce.
Please note I did not try endless mode yet. But this behavior with virtual mode seems weird.
Here the code used to manage First/Prev/Next/Last toolbar using Virtual scrolling.
I manage two cases : When grid is hidden or displayed.
The function called to sync
Here the code for buttons:
The change event for the grid :
This is what happens in databound, that is when new records need to be fetched :
To manage the case when grid is hidden, I try to sync grid whe it is displayed using tab event "activate"
I hope it makes it clearer.
I quicly tried the endless mode however, I can figure out how to programmatically scroll as object "kendoVirtualScrollable" does not exist in this mode.
Thank you for sharing your implementation with the community.
Regarding the endless scrolling, it uses different mechanism and it will not be possible to achieve the desired behavior with it.
At this time, I update my code to make it work perfectly using paged mode. I juste replaced
It works because in paged mode, you can use page() method.
Endless mode is not usable because it seems to load and keep all loaded records locally. Right ? So not possible to use that with tables containing millions records.
However, virtual mode stays the best one for me. It's almost working. The only problem is when I use page() method to go to the last record, it loads only the last page instead of loading the last page PLUS some records from previous page as it does when you use the scrollbar. Thus, it prevents user to scrollback. That's a pity because this is the only case causing problem.
In conclusion, you simply can't use page() method in virtual mode. Do you have any way to fix this or any workaround ? It would be great.
Your statement about the endless scrolling is correct and the new pages are appended to the previous pages and that functionality is not suitable for huge amount of data.
As for the Virtual Scrolling, changing the position of the scrollbar should be enough for going to a particular page, without calling the page method of the DataSource. I have created an example that will go to a particular page entered in the input above the Grid:
It should be easy to replace the input element with the buttons that you have.
Yes, I already did something like this to go to last page when the grid is visible.
The method you provide is working for any page.
I have now to try it when the grid is not visible, that is only when the tab containing the grid is activated again because when the grid is hidden, I have no other choice than page() method.
When the grid becomes visible again, I plan to first come back to first page, then resize the grid, then go to current page from within dataBound event.
The only problem I can see at this time is when row height is not the same for all rows. So "rowHeight = scrollbarHeight/oTab.oGrid.dataSource.total()" is not always accurate.
I'll let you know if it suits to my case.