kendo remote virtualization scroll issue in IE 8.0

6 posts, 0 answers
  1. Tor
    Tor avatar
    16 posts
    Member since:
    Feb 2012

    Posted 16 Jan 2013 Link to this post

    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
  2. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 21 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Tor
    Tor avatar
    16 posts
    Member since:
    Feb 2012

    Posted 11 Feb 2013 Link to this post

    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
  4. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 13 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Tor
    Tor avatar
    16 posts
    Member since:
    Feb 2012

    Posted 13 Feb 2013 Link to this post

    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?


  6. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 15 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top