Is there any way to force a grid with virtual scrolling to recalculate its scroll bar?
I have a grid which is initialized whilst being hidden. When i show the grid, i can get everything resized just fine, and the grid looks like it's ready for action. However, if the grid has virtual scrolling enabled, the scrollbar will be visible, but set to a height of zero - meaning that whatever records are showing on the grid is all you can access, because the grid can't be scrolled down. I can call myGrid.refresh(), but that doesn't appear to help.
As far as i can tell, the only simple way to correct this is to do another read operation myGrid.dataSource.read(). Is there any way around that? It seems like overkill, since the grid is already set up just fine. All it should really need to do is just recalculate the height of a row and then guess the full height - just like it would normally do.
I tried a number of work arounds, but i kept ending up with JS errors. For example, i noted that the k-scrollbar-vertical element of the grid has a child div with the height which the grid has guessed it will need. So it might look like this:
Since that inner div is missing in my off-screen initialized grid, i tried inserting it manually. Everything looked good then - the grid had a scroll bar and everything. However, attempting to scroll just results in JS errors.
I've seen some other posts that are related to this, and it appears that non-visible initialization of the grid is "not supported". But is there any way to just do this one thing - to force it to refresh the scroll bar data?
I have a grid which is initialized whilst being hidden. When i show the grid, i can get everything resized just fine, and the grid looks like it's ready for action. However, if the grid has virtual scrolling enabled, the scrollbar will be visible, but set to a height of zero - meaning that whatever records are showing on the grid is all you can access, because the grid can't be scrolled down. I can call myGrid.refresh(), but that doesn't appear to help.
As far as i can tell, the only simple way to correct this is to do another read operation myGrid.dataSource.read(). Is there any way around that? It seems like overkill, since the grid is already set up just fine. All it should really need to do is just recalculate the height of a row and then guess the full height - just like it would normally do.
I tried a number of work arounds, but i kept ending up with JS errors. For example, i noted that the k-scrollbar-vertical element of the grid has a child div with the height which the grid has guessed it will need. So it might look like this:
<div class="k-scrollbar k-scrollbar-vertical" style="width: 18px;"> <div style="width:1px;height:8077.5599999999995px"></div>
</div>Since that inner div is missing in my off-screen initialized grid, i tried inserting it manually. Everything looked good then - the grid had a scroll bar and everything. However, attempting to scroll just results in JS errors.
I've seen some other posts that are related to this, and it appears that non-visible initialization of the grid is "not supported". But is there any way to just do this one thing - to force it to refresh the scroll bar data?
1 Answer, 1 is accepted
0
Hi Rich,
What you can try is use the kendo.resize() method that might help in your situation. In general what you are looking for is not supported as a built-in feature, and normally I would suggest using refresh() but you arelady said that it did not work. So I would suggest you to try resizing the grid like this:
Please try it out and let me know if it helps.
Regards,
Kiril Nikolov
Telerik
What you can try is use the kendo.resize() method that might help in your situation. In general what you are looking for is not supported as a built-in feature, and normally I would suggest using refresh() but you arelady said that it did not work. So I would suggest you to try resizing the grid like this:
kendo.resize($('#your-grid-id'))Please try it out and let me know if it helps.
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!