Kendo UI ListView Infinite Scroll for Non-Mobile ListView

The Kendo UI non-mobile ListView does not come with infinite scrolling. However, I've managed to invent a hack which makes it work for cases where the ListView items are read-only. This solution uses a ListView to fetch new pages of data while a div above it holds all previous pages of data.

The Kendo UI non-mobile ListView does not come with infinite scrolling.  However, I've managed to invent a hack which makes it work for cases where the ListView items are read-only.

This solution uses a ListView to fetch new pages of data while a div above it holds all previous pages of data.

    <div id="noResults"></div>
    <div id="listPrev"></div>  <!-- Archive of previous pages -->
    <div id="list"></div>  <!-- ListView to fetch new pages of data -->
    <div id="loading">

    <script id="myTemplate" type="text/x-kendo-tmpl">
        <!-- Kendo template goes here -->
    </script>

    <script>

    var viewModel = kendo.observable({
        MyObjects: [],
        PreviousScrollPosition: 0,
        FetchMore: true
    });

    $(document).ready(function () {
        $("#list").kendoListView({
            template: kendo.template($("#myTemplate").html()),
            autoBind: true,
            dataSource: getDataSource(),

            dataBound: function() {
                viewModel.FetchMore = true;
            }
        });
        kendo.bind(document.body, viewModel);
    });

    function getDataSource()
    {
        return new kendo.data.DataSource({
            data: viewModel.Interactions,
            pageSize: viewModel.MyObjects,
            schema: {}
            }
        });
    }

    // Handle scroll Event
    $(window).scroll(function() {
        var scrolled = Math.max(Math.max(document.body.scrollTop, (window.pageYOffset - 1)), 0);
        // Anytime user scrolls to the bottom
        if (isScrolledToBottom(viewModel.ScrollBottomPadding) === true) {
            // Get data for infinite scroll
            infiniteScrollDown();
        }
        viewModel.PreviousScrollPosition = scrolled;
    });

    function isScrolledToBottom(buffer) {
            var pageHeight = document.body.scrollHeight;
            // NOTE:  IE and the other browsers handle scrollTop and pageYOffset differently
            var pagePosition = document.body.offsetHeight + Math.max(document.body.scrollTop, (window.pageYOffset - 1));
            buffer = buffer || 0;
            return pagePosition >= (pageHeight - buffer);
    }

    function infiniteScrollDown() {
        console.log("infiniteScrollDown()");
        viewModel.FetchMore = false;
        // For endless scrolling:  Append contents of ListView to div above the ListView.
        $("#listPrev").append($("#list").html());
        // Add new page of data to the bottom of the Infinite scroll.
        var lv = $("#list").data("kendoListView").dataSource;
        lv.page(lv.page() +1);
    }

    </script>