Endless scrolling stopped working with the new version

[Ron]

Once we updated to latest release our endless scrolling list
views stopped working. We can see the datasource has the correct data but no
items are rendered in the list itself except for the loading element.

We managed to find that
it is all because of the “endlessScroll : true” option – if we comment it we see all
the data rendered. Code:

 

       var dsOpts = {

                     pageSize
: FDData.connection.pageSize,

                     serverPaging
: true,

                     transport
: {

                           read
: {

                                  url
: hostPrefix + "getTrans",

                                  dataType
: "json"

                           },

                           parameterMap
: function(options)

                           {

                                  var parameters = {

                                         session
: FDData.connection.sessionID,

                                         selector
: FDData.mainWalletID,

                                         pageSize
: FDData.connection.pageSize,

                                         nextToken :
FDData.connection.transNextToken,

                                         sortBy
: FDData.connection.sortBy

                                  };

 

                                  return parameters;

                           }

                     },

                     schema
: {

                           data
: function(response)

                           {

                                  if (!response.success)

                                  {

                                         showError("error: " +
response.errorMessage);

                                         return [];

                                  }

                                  FDData.connection.transNextToken
= response.nextToken;

 

                                  console.log("showWallet
connection : " + FDData.connection);

                                  return
response.transactions;

                           }

                     },

                     change
: function(e)

                     {

                            console.log("wallet data
update : ");

                           console.log(e);

                                 

                          

                           for ( var i = 0; i <
e.items.length; i++)

                           {

                                  var t = e.items[i];

                                  if
(FDData.connection.sortBy === "TransValueDate")

                                  {

                                         t.SortByDate
= t.TransValueDate;

                                  }

                                  else

                                  {

                                         t.SortByDate
= t.TransDate;

                                  }

                                  t.CategoryDescription
= getCategoryDesc(t.Category);

                                  FDData.walletData.push(t);

                           }

                     }

              };
//
dsOpts

 

              FDData.walletData
= [];

              FDData.walletDS
= new
kendo.data.DataSource(dsOpts);

 

              $("#wallet-container").kendoMobileListView({

                     dataSource
: FDData.walletDS,

                     template
: $("#tranTemplate").text(),

                     endlessScroll
: true,

                     scrollTreshold
: 30 //treshold
in pixels

              });

An image with some console readings is attached to show some more details.


If we go back to last quarter's sources - everything works just fine. 

[Kiril Nikolov]

Hi Ron,

With the Q2 release of Kendo UI Pull to Refresh / Endless Scrolling triggers virtual mode for the listview widget, which behaves in a different manner than current implementation. You can check the release notes on the following link:

http://www.kendoui.com/mobile/whats-new/release-notes/q2-2013-mobile.aspx

In order to investigate your problem, please extract a runnable demo in a jsBin/jsFiddle that we can test.

Thank you in advance for your cooperation.

Regards,
Kiril Nikolov
Telerik

[Ron]

Before I spend all this time to create a sample - is there an up to date sample of how to do it with the new release? Because the ones we looked at were exactly like our code.

I also do not understand why the list view will not even show the first page of data when I can see that it is in the data structure referenced by the data-source - and it shows it just fine if we just remove the endlessScroll:true - the data is there, so this is even before the pull to refresh or scroll happens that it breaks. 

[Kiril Nikolov]

Hi Ron,

You can check our demo for endless scrolling as it is using the latest release of Kendo UI mobile on the following link:

http://demos.kendoui.com/mobile/listview/endless-scrolling.html#/

In order to answer your other questions you will need to provide us with a running demos, that can be used for investigation.
 
Regards,
Kiril Nikolov
Telerik

[Texas]

I am running into the same problem.  When a listView has the endlessScroll or loadMore option set to true the listview does not show the correct number of records and will not load more.  Here is a jsFiddle example demonstrating this problem.

http://jsfiddle.net/n_dngr_foster/Kt8Xe/1/

Thanks,
Nathaniel

[Mohammad]

Same thing has happened to me just as soon as i updated to Q2 all the lists having this property endlessScrolling failed to load properly and the loader keeps on showing.

[Adrian]

Also, experiencing the same (on some listviews only) - others load and show data - but scrolling up and down the items that are visible do not take up the entire size of the listview. They are incorrectly offset for the visible area. 

[Kiril Nikolov]

Hi Guys, 

In the example that you provided there is no schema.total property for the dataSource. Please check this example for more information how to implement the Kendo UI Mobile ListView + Endless Scrolling:

http://demos.kendoui.com/mobile/listview/endless-scrolling.html#/

I would also recommend you to go through this article from the Kendo UI documentation explaining how enabling the Endless Scroll triggers the virtual mode of the ListView.

Regards,
Kiril Nikolov
Telerik

[Texas]

Kiril, 

I have updated my Example to use the schema.total property.  The listView still does not show the correct number of list items when loadMore or endlessScroll equal true.  My dataSource is a json object, similar to in my example.  I am not pulling from an external server.  Can I use a local dataSource with the listview and use the loadMore or endlessScroll options?

Thanks,

[Mohammad]

for the local source yes you can am using jayData.org websql and its working fine with kendo lists

[Texas]

Thanks Mohammad.

A lot of the examples in the API documentation use an array of objects as a dataSource.  Is it possible to use listview to scroll through a large array of objects without using a tool like jayData?  The loadMore option worked to scroll through a large array of objects before upgrading to the Q2 release.

Thanks,

[Mohammad]

Yes sure you dont need jayData if your loading into an array and then hooking it as a dataSource. JayData is just a javaScript orm which enables you to communicate with different stores using the same line of code. e.g online offline

[Petyo]

Hello,

The example you have posted features several problems in terms of widget and application instantiation. In addition to that, if you want to perform endless scrolling on local data, you should use a custom transport. Please see the updated example for a reference (make sure that you resize the result pane to a device height).

Regards,
Petyo
Telerik

[Mohammad]

In the example you gave am only getting 12 stores so whats the story here ? Cant pull to update nor scroll to get more !

[Texas]

The example looks the same as before.  I do not think the example got updated.

Thanks,

[Petyo]

Hi Mohammad,

The behavior you observe is described in our documentation, as well as in our changes and backwards compatibility section. Please review the linked articles.

I am sorry for the lack of changes in the example - it looks like jsfiddle ate the changes. I re-created the example - please check it here.

Regards,
Petyo
Telerik

[Mohammad]

Hi,

Thanks for the updated solution but unfortunately it is also not working at all. The same thing happened to me with my app. So this is exactly whats happening.

Best Regards,
Mohammad Chehab

[Richard]

Petyo,

Can you please just provide a link to a working endless scroll example using local data. Or just paste some working code into the forum post.
Your example doesn't work with exactly the issues Mohammed has been detailing earlier in the thread. I've been waiting for a fix to virtual listviews for months and need to get this sorted now.

It looks like some of the issues have been resolved in your latest internal builds but as your example uses CDN which doesn't support internal builds it's not really helping.

Regards
Andrew

[Texas]

The updated example works better.  If you make the display window "mobile" size where it is only showing 6 items at a time.  As you scroll down more stores are loaded.  When I made the display window larger so 7 items were showing it still worked some but the loading indicator was visible while loading additional stores.

[Petyo]

Hi,

In case you need to target a larger screen size, you can increase the datasource page size configuration. The example below uses local data to demonstrate that. 

In case you need any further assistance (and the documentation and examples below does not work for your case), please consider opening separate threads or support tickets along with samples of the cases in question. We will do our best to help. 

Regards,
Petyo
Telerik

[KSBA Techie]

I installed the latest build (2013.2.808) and the endless scroll is still acting funky...

• The scrolling image would show and stay on the screen on page load.
• It would not show all the items but would cut it off after 5 items in a 35 item list and show the loading icon...

I've resolved to go back to the previous build for my iPhone/iPad app...  I've started using the Flat design on my Android app but I will have to revert that as well if this issue is not resolved...

Thanks,
Nathan

[Relez]

I am having the same issue when I upload to the latest version of Kendo UI (2013.2.716), please let us know when the issue is fixed.

Thanks!

[Ron]

We managed to fix this in our App, by properly defining the count (or length, I do not have the code in front of my now) property on the first call.

In the old version it did not need to know it in the properties, but now it seems to need to.

If you can have this information, pass it in the first call and it should be ok.

[Relez]

Hi Ron, thanks for your fast reply, are you talking about configuring the endlessScrollParameters in the first call? Something about this?

$("#listView").kendoMobileListView({
  dataSource: data,
  template: kendo.template(template),
  endlessScroll: true,
  endlessScrollParameters: function(firstItem) {
    if (firstItem) {
      return {
        count: 20
      };
    }
  }
});

Thanks!

[Ron]

Probably something like that, but I have to look for my code to see how it was done. I can not do it now.

[Relez]

Hi Ron, I tried this code and didn't work, I will wait for yours.

Thanks Ron!

[Mohammad]

Any updates on this one ?

[Petyo]

Hello Mohammad,

this thread has grown a bit long, so I am not sure who you are replying to. However, in case you need any assistance from telerik, you may always open a support ticket with your case outlined. 

Regards,
Petyo
Telerik