Endless scrolling stopped working with the new version

Thread is closed for posting
28 posts, 0 answers
  1. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 18 Jul 2013 Link to this post

    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. 
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 19 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 19 Jul 2013 Link to this post

    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. 
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 19 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Texas
    Texas avatar
    5 posts
    Member since:
    May 2013

    Posted 19 Jul 2013 Link to this post

    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
  7. Mohammad
    Mohammad avatar
    20 posts
    Member since:
    Feb 2013

    Posted 20 Jul 2013 Link to this post

    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.
  8. Adrian
    Adrian avatar
    15 posts
    Member since:
    Dec 2011

    Posted 21 Jul 2013 Link to this post

    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. 
  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 22 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  10. Texas
    Texas avatar
    5 posts
    Member since:
    May 2013

    Posted 22 Jul 2013 Link to this post

    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,
  11. Mohammad
    Mohammad avatar
    20 posts
    Member since:
    Feb 2013

    Posted 22 Jul 2013 Link to this post

    for the local source yes you can am using jayData.org websql and its working fine with kendo lists
  12. Texas
    Texas avatar
    5 posts
    Member since:
    May 2013

    Posted 23 Jul 2013 Link to this post

    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,
  13. Mohammad
    Mohammad avatar
    20 posts
    Member since:
    Feb 2013

    Posted 23 Jul 2013 Link to this post

    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
  14. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 24 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Mohammad
    Mohammad avatar
    20 posts
    Member since:
    Feb 2013

    Posted 24 Jul 2013 Link to this post

    In the example you gave am only getting 12 stores so whats the story here ? Cant pull to update nor scroll to get more !
  16. Texas
    Texas avatar
    5 posts
    Member since:
    May 2013

    Posted 24 Jul 2013 Link to this post

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

    Thanks,
  17. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 26 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  18. Mohammad
    Mohammad avatar
    20 posts
    Member since:
    Feb 2013

    Posted 26 Jul 2013 Link to this post

    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
  19. Richard
    Richard avatar
    2 posts
    Member since:
    Mar 2011

    Posted 26 Jul 2013 Link to this post

    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
  20. Texas
    Texas avatar
    5 posts
    Member since:
    May 2013

    Posted 26 Jul 2013 Link to this post

    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.
  21. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 30 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  22. KSBA Techie
    KSBA Techie avatar
    27 posts
    Member since:
    Aug 2012

    Posted 10 Aug 2013 Link to this post

    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
  23. Relez
    Relez avatar
    45 posts
    Member since:
    Jan 2013

    Posted 19 Aug 2013 Link to this post

    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!
  24. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 19 Aug 2013 Link to this post

    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.
  25. Relez
    Relez avatar
    45 posts
    Member since:
    Jan 2013

    Posted 19 Aug 2013 Link to this post

    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!
  26. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 19 Aug 2013 Link to this post

    Probably something like that, but I have to look for my code to see how it was done. I can not do it now.
  27. Relez
    Relez avatar
    45 posts
    Member since:
    Jan 2013

    Posted 19 Aug 2013 Link to this post

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

    Thanks Ron!
  28. Mohammad
    Mohammad avatar
    20 posts
    Member since:
    Feb 2013

    Posted 24 Sep 2013 Link to this post

    Any updates on this one ?
  29. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 26 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready