Virtual Scrolling Issues

10 posts, 0 answers
  1. Scott
    Scott avatar
    15 posts
    Member since:
    Oct 2014

    Posted 25 Nov 2014 Link to this post

    I have been having trouble getting virtual scrolling to work correctly with the grid. I am not getting the correct page or skip values when scrolling. This is most noticeable when I scroll to the bottom of the grid. For example, the total number of rows at a particular time was 11973619 but the skip value I got back when scrolling to the bottom was 1342200. So it was not displaying anywhere close to the correct value.

    Oddly enough, I still have the last available version of Safari for windows installed and it is the only browser that I have tried where the virtual scrolling works as expected. Chrome, Firefox, and IE all have the same issue described above.

    If I turn off virtual scrolling and enable paging it works perfectly in all of the browsers that I have tried. We would really prefer to use virtual scrolling instead of paging though.

    I thought maybe it had something to do with some of the rows wrapping and throwing off the calculation using the row height. However, fixing the row height to prevent text wrapping does not appear to make any difference.

    Is there something else that I should check that could be throwing off the page calculation?
  2. Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 27 Nov 2014 Link to this post

    Hello Scott,

    Virtual scrolling does not work well when the table rows have different heights. The documentation provides more information about this phenomenon:

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

    On the other hand, it is theoretically possible to see incorrect rows when scrolling to the bottom of the Grid, which can occur on a random basis and depends on the scrolling speed and the web service response speed. Usually, if the users scroll up and down again, the correct rows are displayed. Although the latest Kendo UI version works better than older versions, so far we have been unable to avoid this behavior completely in a reliable way. Sorry about that.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Scott
    Scott avatar
    15 posts
    Member since:
    Oct 2014

    Posted 01 Dec 2014 in reply to Dimo Link to this post

    Thanks. I hadn't noticed before that the documentation states the virtual scrolling only works reliably up to a couple million records. If I keep the number of records to around 1 million it does seem to work better.

    Do you know why this limitation exists?
  4. Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 03 Dec 2014 Link to this post

    Hi Scott,

    The virtual scrolling of the Grid relies on a fake scrollable container, which does not actually wrap the data rows. This is because the data table is not as high as it would be if all records were loaded.

    The fake scrollable container uses nested <div>s, which produce the scrollbar. The outer <div> has a height, which matches the visible portion of the data table. The inner <div>(s) has a very large height, which corresponds to the total number of records in the dataSource. This makes the scrollbar look consistent with the amount of data.

    You can open the attached screenshot for a visual representation of the above.

    There is a limitation of the maximum height that the inner <div>(s) can assume, which is different in every browser:

    http://stackoverflow.com/questions/16637530/whats-the-maximum-pixel-value-of-css-width-and-height-properties

    When the datasource items increase, we start using multiple inner <div>s and each is 250,000px high. You can see this in action in the the local data virtualization demo, which features 500,000 datasource items and 64 inner <div>s.

    http://demos.telerik.com/kendo-ui/grid/virtualization-local-data

    Unfortunately, even in this case the browser gives up at some point and supporting a larger number of data items is possible only if you decrease the font size, line height and vertical table cell paddings. Of course, this approach has its limits as well.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Scott
    Scott avatar
    15 posts
    Member since:
    Oct 2014

    Posted 03 Dec 2014 in reply to Dimo Link to this post

    Thanks for the thorough answer!
  6. Marina
    Marina avatar
    2 posts
    Member since:
    Jan 2019

    Posted 24 Jan 2019 Link to this post

    ...5 years later still experiencing the same problem: part of rows is just not visible while scrolling.

    Rows have same height.

    Still no solution?

  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 28 Jan 2019 Link to this post

    Hi Marina,

    Could you please provide more information about the exact issue that you are facing, the Grid configuration and the Kendo UI version that you are using?

    Looking forward to your reply.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8. Abdullah
    Abdullah avatar
    3 posts
    Member since:
    Oct 2018

    Posted 02 Feb Link to this post

    Check the pagination at footer it displays this range 1 - 25 of 141 items.
    Now, start scrolling the screen to down and when you reach at this range 51 - 75 of 141 items.
    Slightly scroll to up, This 1 - 25 of 141 items. range will be displayed.
    It should display this range 26 - 50 of 141 items
  9. Abdullah
    Abdullah avatar
    3 posts
    Member since:
    Oct 2018

    Posted 02 Feb in reply to Abdullah Link to this post

    When Virtualization is true It is not display correct labels in footer while scrolling down to up

    <!DOCTYPE html>
    <html>
    <head>
        <base href="https://demos.telerik.com/kendo-ui/grid/virtualization-local-data">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default-v2.min.css" />

        <script src="https://kendo.cdn.telerik.com/2021.1.119/js/jquery.min.js"></script>
        
        
        <script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
        
        

    </head>
    <body>
        <script src="../content/shared/js/people.js"></script>

    <div id="example">
        <div id="message" class="box"></div>

        <div id="grid"></div>

        <div class="box wide">
            <div class="box-col">
                <h4>Edit mode:</h4>
                <input id="editMode" />
            </div>
            <div class="box-col">
                <h4>Create at:</h4>
                <input id="createAt" />
            </div>
        </div>

        <script>
            $(function() {
                var count = 100000;

                $("#message").text(kendo.format("Generating {0} items", count));

                generatePeople(count, function(data) {
                    var initStart;
                    var renderStart;

                    $("#message").text("");

                    var nextId = data.length + 1;

                    var dataSource = new kendo.data.DataSource({
                        pageSize: 20,
                        transport: {
                            create: function(e) {
                                if (e.data.models) {
                                    //batch editing
                                    for (var i = 0; i < e.data.models.length; i++) {
                                        e.data.models[i].Id = nextId++;
                                    }
                                    e.success(e.data.models);
                                } else {
                                    e.data.Id = nextId++;
                                    e.success(e.data);
                                }
                            },
                            read: function(e) {
                                e.success(data);
                            },
                            update: function(e) {
                                if (e.data.models) {
                                    //batch editing
                                    e.success(e.data.models);
                                } else {
                                    e.success(e.data);
                                }
                            },
                            destroy: function(e) {
                                if (e.data.models) {
                                    //batch editing
                                    e.success(e.data.models);
                                } else {
                                    e.success(e.data);
                                }
                            }
                        },
                        schema: {
                            model: {
                                id: "Id",
                                fields: {
                                    Id: { type: "number", editable: false, nullable: true },
                                    FirstName: { type: "string", validation: { required: true } },
                                    LastName: { type: "string" },
                                    City: { type: "string" },
                                    Title: { type: "string" },
                                }
                            }
                        }
                    });

                    setTimeout(function() {
                        initStart = new Date();

                        $("#grid").kendoGrid({
                            dataSource: dataSource,
                            height: 543,
                            scrollable: {
                                virtual: true
                            },
                            editable: {
                                mode: "inline",
                                createAt: "top"
                            },
                            toolbar: ["create"],
                            pageable: {
                                numeric: false,
                                previousNext: false,
                                info:true
                            },
                            columns: [
                                { field: "Id", title: "ID", width: "110px" },
                                { field: "FirstName", title: "First Name" },
                                { field: "LastName", title: "Last Name" },
                                { field: "City", title: "City" },
                                { field: "Title" },
                                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
                            ]
                        });

                        initEnd = new Date();

                        $("#message").text(kendo.format("Kendo UI Grid bound to {0} items in {1} milliseconds", count, initEnd - initStart));
                    });
                });

                $("#editMode").kendoDropDownList({
                    dataSource: {
                        data: [
                            { text: "Inline", value: "inline" },
                            { text: "Incell", value: "incell" },
                            { text: "Popup", value: "popup" }
                        ]
                    },
                    dataTextField: "text",
                    dataValueField: "value",
                    change: function() {
                        applyOptions();
                    }
                });

                $("#createAt").kendoDropDownList({
                    dataSource: {
                        data: [
                            { text: "Top", value: "top" },
                            { text: "Bottom", value: "bottom" }
                        ]
                    },
                    dataTextField: "text",
                    dataValueField: "value",
                    change: function() {
                        applyOptions();
                    }
                });
            });

            function applyOptions() {
                var columns = [
                    { field: "Id", title: "ID", width: "110px" },
                    { field: "FirstName", title: "First Name" },
                    { field: "LastName", title: "Last Name" },
                    { field: "City", title: "City" },
                    { field: "Title" }
                ];

                var createAt = $("#createAt").data("kendoDropDownList").value();
                var editMode = $("#editMode").data("kendoDropDownList").value();

                var inlineOptions = {
                    dataSource: { batch: false },
                    editable: { mode: "inline", createAt: createAt },
                    columns: columns.concat([{ command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }]),
                    toolbar: ["create"]
                };

                var incellOptions = {
                    dataSource: { batch: true },
                    editable: { mode: "incell", createAt: createAt },
                    columns: columns.concat([{ command: "destroy", title: "&nbsp;", width: 150 }]),
                    toolbar: ["create", "save", "cancel"]
                };

                var popupOptions = {
                    dataSource: { batch: false },
                    editable: { mode: "popup", createAt: createAt },
                    columns: columns.concat([{ command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }]),
                    toolbar: ["create"]
                };

                var editOptions = {
                    incell: incellOptions,
                    inline: inlineOptions,
                    popup: popupOptions
                };

                var grid = $("#grid").data("kendoGrid");
                grid.dataSource.page(1);
                grid.setOptions($.extend({}, grid.getOptions(), editOptions[editMode]));
            }
        </script>
    </div>


        

    </body>
    </html>

  10. Tsvetomir
    Admin
    Tsvetomir avatar
    837 posts

    Posted 04 Feb Link to this post

    Hi,

    The scroll virtualization works with a different mechanism for fetching the data compared to conventional paging. It actually makes a fetch request and a pre-fetch request. That is why there might be a mismatch in the actual table from the displayed items. If you would like to use the pager message, I would recommend that you use only the total amount of records.

    For more information on the limitations of the scroll mode:

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/scrolling/virtual-scrolling

     

    Best regards,
    Tsvetomir
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top