kendo remote virtualization scroll issue in IE 8.0

[Tor]

I have noticed an intermittent error with scrolling when using remote virtualization in IE 8.0.
Here are the steps to reproduce the error:

1) Sort the grid by a single column in ascending order
2) Drag the scroll bar down to the bottom of the grid as quickly as you can

In some cases the last few records are not the ones you would expect based on the sort.

This is also reproducable in your online demo. If you sort by Order ID ASC you will in some cases not see the number 11077 as the last entry in the grid.
Seems like the grid corrects itself if you scroll up from the bottom (just a tiny amount is needed).

Thanks
Tor

[Daniel]

Hello Tor,

When constructing the virtual scrollbar, the Grid calculates the average height of the data rows and uses this data to create a fake scrollbar with a proper size. Theoretically, it is possible that the observed issue may occur. In order to avoid it, I can suggest to ensure all Grid rows are equally high. For example as three lines of text:

.k-virtual-scrollable-wrap td
{
    min-height: 60px;
}

Kind regards,
Daniel
the Telerik team

[Tor]

Thanks you for your answer.
I have an additional question in regards to the "fake" scroll bar you pointed out bellow.
Does the scrolling implementation depend on a fixed table height? In other words if I dynamically stretch the height of the grid to take up all available space on a splitter pane as the splitter pane is being resized, could that have the potential side effect of interfering with the scroll calculations you're describing in your post?

I currently have an implementation for stretching the grid using the MVC Extensions grid based on the following forum post:
http://www.telerik.com/community/forums/aspnet-mvc/splitter/expand-vertical-pane-to-height-of-page.aspx 

I am in the process of upgrading some of my grids to Kendo:
Is it recommended/possible to implement this type of dynamic stretching when my Kendo grid is using remote virtualization, or could that interfere with the scroll behavior of the grid? 

My Kendo grid will be inside an MVC extensions splitter pane with other MVC extensions grids in neighboring splitter panes. 

Thanks
Tor

[Daniel]

Hello again Tor,

There could be a problem when resizing dynamically the Grid and it is using virtual scrolling. In order update it after the new height is set, you should use the virtualScrollable.refresh method e.g.

var grid = $("#Grid").data("kendoGrid");
grid.virtualScrollable.refresh();

Regards,
Daniel
the Telerik team

[Tor]

I have the following code, but It appears that changing the height does interfere with the scrolling of the grid.

   var pane = $("#mvcExtensionsSplitterPane");

    //Kendo grid inside splitter pane
    var grid = pane.find("#grid");
    grid.find(".k-grid-content").height(pane.height() - staticHeightOffset);
    grid.find(".k-virtual-scrollable-wrap").height(pane.height() - staticHeightOffset);
 
    var kendoGrid = grid.data("kendoGrid");
    kendoGrid.virtualScrollable.refresh();

Even with the kendoGrid.virtualScrollable.refresh() added -- the table doesn't seem to always update correctly if you scroll after the grid has been re sized. 

Is there something missing in my code?

[Daniel]

Hello Tor,

Could you provide more information about the issue after resizing? Also, please try to resize the Grid with the approach suggested in this documentation topic.

Kind regards,
Daniel
the Telerik team