Rows disappear in Virtual Scrolling Grid When Grid Resized

[Nate]

Short summary:

 - Enabled virtual scrolling of Grid

 - Using Remote data source with paging

 - When the user resizes our UI, it may adjust the Width of the Grid

 - If this happens, our columns are set to wrap their contents

 - After columns wrap, it appears the internal Kendo GRID logic does not recalculate the virtual scrolling offset/height/position so rows at the bottom of the grid are "lost" and can no longer be reached.

 Best seen via demo: http://dojo.telerik.com/@[e-mail]/EMeqI/3

 Run the demo.  Then scroll down to the very last record, which has ID 11077.

 Then use the resizer in the DOJO window to **reduce** the width of the grid...notice how rows disappear and record 11077 is no longer even reachable.

 

Thoughts? Suggestions? on how to handle/fix this?  It seems like the Kendo Grid should watch for resize activity and when it happens, ensure the internal scrolling logic is re-calculated so that users can reach bottom of list.

[Dimo]

Hello Nate,

Use Kendo UI version 2015.1.429 (Q1 2015 SP2) or newer, and execute

grid.resize(true);

on window.resize. This will force the Grid to recalculate the average row height and the height of the virtual scrollbar.

http://docs.telerik.com/kendo-ui/using-kendo-in-responsive-web-pages#individual-widget-resizing

Regards,
Dimo
Telerik

 

 

[Nate]

Dimo -

Thanks for the quick reply.  So I'm encountering another issue that is not solved by the 

grid.resize(true);

 method.

 I think this is the actual issue we are facing since we're using a Virtual Scrolling grid with remote data.

I've updated the DoJo demo: http://dojo.telerik.com/@[e-mail]/EMeqI/4

To re-create the issue:

1) As soon as the Dojo page loads, reduce the width of the "output" window as much as possible.

2) Hit he "RUN" button.

3) Using the scroll-wheel on your mouse (or trackpad), try to scroll to the end of the list.  It will require 1-2 remote page loads and when the data is loading, keep scrolling because you want to get to the bottom of the list as fast as possible.

 4) You are trying to see the last record, which is ID 11077.

 However, you should notice that many times you will not be able to reach record 11077.  Clicking the "REFRESH" button seems to have no fix/affect.

 

Our users are reporting that the last few records of their data are being "cut off" when we are using Live Scrolling grids.

 Since it only happens sometimes, I've created a video clip showing the issue using the DoJo link above.  I cannot get to record 11077 no matter how many times I click the refresh button and can never scroll down to row 11077.

Video Demo

 

[Nate]

The video I uploaded isn't very high quality.

 

I'm uploading a better video to Vimeo.com and it should be up shortly...when it is, I will post that link.

 

Thanks

[Nate]

Here is a link to the higher quality video demonstrating the issue: https://vimeo.com/130131816

[Dimo]

Hello Nate,

When you reduce the Grid width that much, the table rows assume different heights, due to the different length of their text content. This causes a random deviation of the average row height that the Grid must calculate, compared to the actual one. As a result, the generated virtual scrollbar has an incorrect height.

This scenario is not supported, as explained in the documentation:

http://docs.telerik.com/kendo-ui/web/grid/appearance#virtual-scrolling

You can improve the behavior if you prevent text wrapping in the Grid with a CSS rule.

#grid td
{
    white-space: nowrap;
}

Regards,
Dimo
Telerik