Listview Load More not working with kendo.mobile.min.js

Thread is closed for posting
11 posts, 0 answers
  1. Derrick
    Derrick avatar
    4 posts
    Member since:
    Jun 2013

    Posted 06 Nov 2013 Link to this post

    I have taken the code from this Listview Load More demo:

    http://demos.kendoui.com/mobile/listview/press-to-load-more.html#/

    and tried running it on an iPhone UIWebView using these files:

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.mobile.min.js"></script>
    <link href="css/kendo.mobilecommon.min.css" rel="stylesheet" />
    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />

    When I use these, the same code from the demo doesn't work with page sizes smaller than 50.  When I change to the kendo.all.min.js like the demo, the Load More works.  I would rather not include the kendo.all.min.js file in the app just for the Load More functionality.  What are the correct minimal includes necessary for the Kendo Mobile Listview Load More to work?

     
    Thanks,
    Derrick

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 07 Nov 2013 Link to this post

    Hi Derrick,

    The pagesize setting is a requirement for the endless scrolling to work as expected, since our Q2 release - you can read more about it here and here. Is there a chance that you are using an older version of kendo.all? This is the only reason I can think of for such behavior.  

    Regards,
    Petyo
    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. Derrick
    Derrick avatar
    4 posts
    Member since:
    Jun 2013

    Posted 07 Nov 2013 Link to this post

    Hi Petyo,

    Thanks for the reply.  The Load More function does work with the kendo.all js (2013.2.716.)...However, since it is a mobile list view, should that work with the kendo.mobile js as well?  So my question is, what are the kendo mobile includes necessary for the mobile Listview Load More to work.  Also I am using the same code from the demo (just changed the kendo.all js to kendo.mobile js), so the pagesize is included.

    Thanks,
    Derrick
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 08 Nov 2013 Link to this post

    Hello Derrick,

    kendo.mobile.min.js should be sufficient enough for load more/endless scrolling to work as expected. Please check this jsbin

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Derrick
    Derrick avatar
    4 posts
    Member since:
    Jun 2013

    Posted 17 Dec 2013 Link to this post

    Petyo,

    Thanks for the suggestion to use Endless Scrolling with kendo mobile, it worked.  However, using the endless scroll list view has caused another issue.  

    There are times when I want the Endless Scrolling list items to persist.  Like when you click on a row and go to a detail and then go back.  This works.  But, if I then go back to the main app page and go back to the Endless Scroll I want to completely clear it.  With a normal List View I can use this code to clear it:

                    contactListSource = null;
                    contactListSource = new kendo.data.DataSource.create({data:[]});
                    $("#contacts_list_search_results").kendoMobileListView({
                        dataSource: contactListSource,
                        template: $("#contact_list_item_template").html()
                    });

    When I do this with the endless scoll listview it breaks...the initial page will load, but not subsequent pages, it locks up.  I can add a data-reload="true" to the view and this will make the page work.  But the problem with that is when I go to the detail page and back it will be cleared out which I don't want.  I can persist the data items themselves from the detail and when I go back and recreate the endless scroll list view...but then it will lose its scroll position.

    So after all that my question is 1) do you know how to clear out and reset a Endless Scroll list view in code or 2) do you know how to persist the scroll position if I use a data-reload = "true" on the view?

    Thanks again,
    Derrick
  7. Derrick
    Derrick avatar
    4 posts
    Member since:
    Jun 2013

    Posted 18 Dec 2013 Link to this post

    The question about reseting the Endless Scrolling is really it's own topic, so I created another thread for it:
    http://www.kendoui.com/forums/kendo-ui-mobile/listview/how-do-you-clear-and-reset-an-endless-scrolling-listview-.aspx

    -Derrick
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 18 Dec 2013 Link to this post

    Hello Derrick,

    The problem most probably comes from the fact that you are initializing the ListView again when you navigate to the view which is not supported. If you want to clear out a ListView, you can use the setDataSource() method and just pass the data that you want to be displayed, or use its destroy() method to completely remove the widget, as clearing the html() with jQuery is not enough even with the "normal" listview.

    As for your second question - there is not built-in way to persist the scroll position of the ListView when endless scroll is enabled, as with this configuration the ListView dataSource contains only the elements shown in the view and not all the elements loaded, which makes it not possible to persists the scroll position.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Zachary
    Zachary avatar
    4 posts
    Member since:
    Dec 2013

    Posted 20 Dec 2013 Link to this post

    Petyo,

    Your JSBin example doesn't work.  How is this a solution?  Has there been a fix for this problem?

    Zach
  10. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 20 Dec 2013 Link to this post

    Hello,

    The jsbin works as expected when I test it. What browser are you using? Here is a short video that I have recorded: http://screencast.com/t/nwyjdjjFwnJ


    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Zachary
    Zachary avatar
    4 posts
    Member since:
    Dec 2013

    Posted 21 Dec 2013 Link to this post

    I  am using Chrome on Ubuntu.  

    First, How is this considered an example of serverPaging if you have a method that generates the entire dataset at once?  

    Second, if you change pageSize to anything other than '50', it doesn't work.  I don't want 50.  I don't consider this functional.  The same issue happens with "LoadMore: true".

    Zach
  12. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 21 Dec 2013 Link to this post

    Hello,

    I updated the demo to use a remote service and different page size: http://jsbin.com/ObUBUSE/45/edit

    I also suggest checking this help article which explains how scrolling works. Here is an important excerpt:

    In order for the scrolling to occur smoothly, the page size should not be too low. For example, if 5 items are visible on the page, at least 15 physical DOM elements are needed, which means that the DataSource page size should be 30 or greater.

    Regards,
    Atanas Korchev
    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