This is a migrated thread and some comments may be shown as answers.

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

10 Answers 153 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Derrick
Top achievements
Rank 1
Derrick asked on 06 Nov 2013, 11:48 PM
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

10 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 07 Nov 2013, 07:52 AM
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!
0
Derrick
Top achievements
Rank 1
answered on 07 Nov 2013, 02:02 PM
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
0
Petyo
Telerik team
answered on 08 Nov 2013, 01:15 PM
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!
0
Derrick
Top achievements
Rank 1
answered on 18 Dec 2013, 12:20 AM
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
0
Derrick
Top achievements
Rank 1
answered on 18 Dec 2013, 02:54 PM
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
0
Kiril Nikolov
Telerik team
answered on 18 Dec 2013, 02:58 PM
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!
0
Zachary
Top achievements
Rank 1
answered on 20 Dec 2013, 02:37 PM
Petyo,

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

Zach
0
Atanas Korchev
Telerik team
answered on 20 Dec 2013, 04:28 PM
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!
0
Zachary
Top achievements
Rank 1
answered on 21 Dec 2013, 09:11 AM
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
0
Atanas Korchev
Telerik team
answered on 21 Dec 2013, 09:28 AM
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!
Tags
ListView (Mobile)
Asked by
Derrick
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Derrick
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Zachary
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or