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

[Mihai]

Hello,

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++) {
                           res.push(results.rows.item(i));
                       }

                       if(results.rows.length > 0)
                           total = results.rows.item(0).total;

                       var resSchema = {
                           results: res, total: total
                       };

                       options.success(resSchema);

                   }

                   function queryRowsFailure(err) {
                       app.compListDbError();
                   }
               }
           },
           schema: {
               total: function (response) {
                       return response.total;
                   },
               data: function(response) {
                       return response.results;
                   },
           },
           serverPaging: true,
           pageSize: 20
       });



       $("#companyResultList").kendoMobileListView({
           dataSource: dataSource,
           template: $("#endless-scrolling-template").text(),
           endlessScroll: true
       });

[Kiril Nikolov]

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:

http://docs.kendoui.com/getting-started/mobile/listview#press-to-load-more-/-endless-scrolling

Regards,
Kiril Nikolov
Telerik