5

I am working on endless scroll functionality in kendo UI

So far I have managed to load data from url and show on list, but once my list ends, I need to load data from next url

here is my code

var i = 0, pageSize = 10;
function mobileListViewEndlessScrolling() {
        var dataSource = new kendo.data.DataSource({
      type: "odata",
            transport      : 
                    read: {
                        type       : "GET",
                        url        : "https://graph.facebook.com/siedae/feed?access_token=150129068491462|a8HxcqfRA-Bn1M59A_wefbEMs9c",
                        contentType: "application/json; charset=utf-8",
                        dataType   : "json",
                        error      : function (xhr, ajaxOptions, thrownError) {
                            alert("error " + xhr.responseText);
                        },
                    }
                },
            serverPaging: true,
            pageSize: pageSize,
            schema: {
                     data : "data",
                     total: function() { return 25; }
                    },
        });
        $("#endless-scrolling").kendoMobileListView({
            dataSource: dataSource,
            template: $("#endless-scrolling-template").text(),
            endlessScroll: true,
            scrollTreshold: 30,
            });
    }
zkent
  • 980
  • 1
  • 10
  • 22
Sourabh Saldi
  • 3,567
  • 6
  • 34
  • 57
  • How many items are going to show on each page? It should be roughly (items * 3 * 2). Basically, if you are displaying 5 items on the screen, endless scrolling needs at least 15 items loaded in the DOM so the pageSize should be double that, or 30. – zkent Mar 02 '14 at 07:51
  • Also, why are you hard-coding the schema.total? This should be dynamic and contain the total number of all of the records that will be displayed, regardless of the pageSize. – zkent Mar 02 '14 at 07:54

1 Answers1

0

You may define the dataSource.transport.read.url as a function. The function will execute every time the dataSource is about to make a read request which will give you the opportunity to change the URL at runtime.

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.url

sasheto
  • 531
  • 4
  • 9