Virtual Scrolling Issues

[Scott]

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?

[Dimo]

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

 

 

[Scott]

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?

[Dimo]

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

[Scott]

Thanks for the thorough answer!

[Marina]

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

Rows have same height.

Still no solution?

[Konstantin Dikov]

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

[Abdullah]

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

[Abdullah]

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>

[Tsvetomir]

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