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

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

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

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

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

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

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

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

Petyo,

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

Zach

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

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

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