Endless scroll with data pulled from local database does not render properly

2 posts, 0 answers
  1. Mihai
    Mihai avatar
    1 posts
    Member since:
    Feb 2009

    Posted 11 Nov 2013 Link to this post


    I am experiencing an issue with the endless scroll when used with data pulled from the local database. When I scroll down the loading image appears at the bottom and it never disappears. Also, when I reach a point in the list and I scroll up there is almost a third of the screen that is not visible until I reach the top. 

    I tried it with data pulled from a server and works perfectly but not with data pulled from the local database. To me it looks like it does not know when the request is over so that it can hide the loading image.

    This is the code I am using:

    var dataSource = new kendo.data.DataSource({
               type: "json",
               transport: {
                   read: function(options) {
                       db.transaction(queryRows, app.dbError);
                       function queryRows(tx) {
                           tx.executeSql("SELECT comps.*, (SELECT COUNT(*) FROM comps WHERE comps.comp_name LIKE ?) as total FROM comps WHERE comps.comp_name LIKE ? LIMIT ?, ?", ["%" + $("#search-comp-name").val() + "%", "%" + $("#search-comp-name").val() + "%", (options.data.page - 1) * 20, 20], queryRowsSuccess, queryRowsFailure);
                       function queryRowsSuccess(tx, results) {
                           var res = Array();
                           var total = 0;
                           for(var i = 0; i < results.rows.length; i++) {
                           if(results.rows.length > 0)
                               total = results.rows.item(0).total;
                           var resSchema = {
                               results: res, total: total
                       function queryRowsFailure(err) {
               schema: {
                   total: function (response) {
                           return response.total;
                   data: function(response) {
                           return response.results;
               serverPaging: true,
               pageSize: 20
               dataSource: dataSource,
               template: $("#endless-scrolling-template").text(),
               endlessScroll: true
  2. Kiril Nikolov
    Kiril Nikolov avatar
    2596 posts

    Posted 12 Nov 2013 Link to this post

    Hi Mihai,

    With the Q2 release the endless scrolling feature was changed a lot. The breaking changes in question have been documented in our changes and backwards compatibility section. 

    The most common problems we have traced so far are:

    - server paging was not enabled;
    - page size set to a low number (please check the documentation above)
    - server paging not working due to missing schema.total configuration

    From what I can see in your code you have set pageSize that will not be enough for the endless scrolling to work as smoothly as possible. I would suggest you check this article in order to calculate the correct pageSize required for your case:


    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