Cannot implement endless scrolling

[Sohaib]

Hi,
I am new to kendo ui, trying to work with endless scrolling with local data in json form, but this shows me all data at once, i want to show first 5 records first than as user scrolls down it should show 5 more and so on,
Here is my code, please help me to make it done,.


(function (global) {
    var WeatherViewModel,
        app = global.app = global.app || {};

    WeatherViewModel = kendo.data.ObservableObject.extend({
        weatherDataSource: null,
        init: function () {
            var that = this,
            dataSource;
            kendo.data.ObservableObject.fn.init.apply(that, []);

            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "data/weather.json",
                        dataType: "json"
                    }
                },
                parameterMap: function (options) {
                    var parameters = {
                        pageSize: options.pageSize,
                        page: options.page
                    }

                    return parameters;
                },
                schema: {
                    total: function () { return 16; }
                },
                total: function (data) {
                    return data.count; // total number of items
                },
                change: function(e) {
                    var data = this.data();
                    console.log(data.length);
                },
                serverPaging: true,
                serverSorting: true,
                pageSize: 3
            });


            $("#home-data-ul").kendoMobileListView({
                dataSource: dataSource,
                template: $("#home-data-template").text(),
                endlessScroll: true
            });

            that.set("weatherDataSource", dataSource);
        }
    });

    app.weatherService = {
        viewModel: new WeatherViewModel()
    };
})(window);

[Kiril Nikolov]

Hi Sohaib,

You need to configure your ListView to use local data virtualization. First of all you need to include the virtualViewSize property of the ListView and remove the pageSize property set on the dataSource. Please check the following example, showing how to configure and use local data virtualization:

http://demos.telerik.com/kendo-ui/mobile/listview/local-virtualization.html

I hope this information will help, but if you have any further questions, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik