Cannot implement endless scrolling

2 posts, 0 answers
  1. Sohaib
    Sohaib avatar
    1 posts
    Member since:
    Mar 2014

    Posted 20 Mar 2014 Link to this post

    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 = = || {};

        WeatherViewModel ={
            weatherDataSource: null,
            init: function () {
                var that = this,
      , []);

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

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

                    dataSource: dataSource,
                    template: $("#home-data-template").text(),
                    endlessScroll: true

                that.set("weatherDataSource", dataSource);

        app.weatherService = {
            viewModel: new WeatherViewModel()
  2. Kiril Nikolov
    Kiril Nikolov avatar
    2596 posts

    Posted 24 Mar 2014 Link to this post

    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:

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

    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top