This is a migrated thread and some comments may be shown as answers.

Cannot implement endless scrolling

1 Answer 31 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Sohaib
Top achievements
Rank 1
Sohaib asked on 20 Mar 2014, 11:30 AM
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);

1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 24 Mar 2014, 08:04 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ListView (Mobile)
Asked by
Sohaib
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or