Load and append more Grid records as the user scrolls down

Thread is closed for posting
1 posts, 0 answers
  1. AA935EF1-0CA8-4FFB-84B0-095C38A68F6E
    AA935EF1-0CA8-4FFB-84B0-095C38A68F6E avatar
    165 posts
    Member since:
    Aug 2011

    Posted 21 May 2014 Link to this post

    Requirements

    Telerik Product and Version

    		 Kendo UI

    Supported Browsers and Platforms

    		 all

    Components/Widgets used (JS frameworks, etc.)

    		 Grid

    PROJECT DESCRIPTION 
    The example demonstrates how to load more records when scrolling the Grid rows. The difference between this scenario and virtual scrolling is that here the number of records constantly increases, while virtual scrolling replaces the existing records with new ones. Please note that increasing the page size will make data requests slower.

    There are two things to be done:
    1. Subscribe to the Grid's data container's scroll event and increment the page size by a desired value.
    2. Use a flag to prevent multiple simultaneous page size increments. The flag should be set in the scroll event handler, and cleared in the Grid's dataBound event handler.

    HTML

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

    CSS

    #grid
    {
        height: 300px;
    }

    JS

    var gridElement = $("#grid")
    var pagingIncrement = 20;
    var scrollbarWidth = kendo.support.scrollbar();
    var dataBindingFlag = true;
       
    gridElement.kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
            },
            schema: {
                model: {
                    fields: {
                        OrderID: { type: "number" },
                        Freight: { type: "number" },
                        ShipName: { type: "string" },
                        OrderDate: { type: "date" }
                    }
                }
            },
            pageSize: 20,
            serverPaging: true
        },
        pageable: true,
        dataBound: function() {
            dataBindingFlag = true;
        },
        columns: [{
            field:"OrderID"
        }, {
            field: "Freight"
        }, {
            field: "OrderDate",
            title: "Order Date",
            format: "{0:MM/dd/yyyy}"
        }, {
            field: "ShipName",
            title: "Ship Name"
        }]
    });
       
    var gridDataSource = gridElement.data("kendoGrid").dataSource;
       
    gridElement.children(".k-grid-content")
        .on("scroll", function(e){
            if (dataBindingFlag) {
                var dataDiv = e.target;
                var currentPageSize = gridDataSource.pageSize();
                if (dataDiv.scrollTop >= dataDiv.scrollHeight - dataDiv.offsetHeight - scrollbarWidth && gridDataSource.total() > currentPageSize) {
                    dataBindingFlag = false;
                    gridDataSource.pageSize(currentPageSize + pagingIncrement);
                }
            }
        });

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.