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

Listview with endless scrolling shows only one item

5 Answers 76 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Stefan
Top achievements
Rank 1
Stefan asked on 21 Jan 2014, 10:50 AM
I have a problem with creating a listview. I have a category page from where i navigate to a messages page specific to the chosen category. The messages view is a listview with and endless scroll in it. The problem is that I always only see one item in the listview and when i try to update the listview i get a TypeError undefined has no properties.

I have attached the code below, Im really stuck on what to do?

categories.html
01.<div id="category" data-role="view" class="NoBack" data-init="getCategories" data-show="categoryShow" data-title="Categories">
02.    <header data-role="header" data-id="defaultHeader">
03.        <div data-role="navbar" data-id="firstNavbar">
04.            <a class="nav-button" data-role="backbutton" data-align="left">Back</a>
05.            <span data-role="view-title"></span>
06.        </div>
07.        <div data-role="navbar" data-id="secondNavBar">
08.            <ul id="buttongroup" data-role="buttongroup" data-index="0" data-select="redirect">
09.                <li>View Categories</li>
10.                <li>View All</li>
11.            </ul>
12.        </div>
13.    </header>
14.    <div>
15.        <ul data-role='listview' data-style='inset' data-source="categoryListDS" data-template="categoryTemplate" data-select-on="up">
16.        </ul>
17.    </div>
18.    <script id="categoryTemplate" type="script/x-kendo-template">
19.        <a id="#: id#" title="#: title#" onclick="updateMessages(id,title);return false;">
20.            <img src="#: icon#"/>#: title#</a>
21.    </script>
22.</div>

messages.html
01.<div id="messageList" data-role="view" data-title="Secrets">
02.        <!-- list of secrets -->
03.        <ul id="messageList" data-role="listview"  data-source="messagesDS" data-endless-scroll="true" data-template="messagesTemplate">
04.        </ul>
05. 
06.     
07.    <script type="text/x-kendo-template" id="messagesTemplate">
08.        <a id="#:id#" href="messageDetails.html?id=#:id#&message=#:message#">
09.            <p>#:message#</p>
10.        </a>
11.    </script>
12.</div>


Snippet of JS associated with the problem
01.var messagesDS = new kendo.data.DataSource({
02.    data: [],
03.    pageSize: 60,
04.});
05. 
06. 
07.function clearMessages(){
08.    messagesDS.data([]);
09.}
10. 
11.// Updates the messages and shows them to the user
12.// TODO: make the language dynamic
13.function updateMessages(id, title) {
14. 
15.    clearMessages();
16. 
17.    var data = {
18.        'language': "en",
19.        'api_version': '2'
20.    };
21.    var categoryId = id.split('-').pop();
22.    categoryId = typeof categoryId !== 'undefined' ? categoryId : "";
23. 
24.    var url = SERVER_NAME;
25.    if (categoryId === "") {
26.        url += '/secret/all';
27.    }
28.    else {
29.        url += '/secret/category/' + categoryId;
30.    }
31.    url += '?callback=?';
32. 
33.    $.getJSON(url, data, function(json) {
34.        $.each(json.messages, function() {
35.            messagesDS.add({id: this.id, message: this.message, machineTimestamp: this.machine_timestamp, humanTimeStamp: this.human_timestamp, comments: this.number_comments})
36.        });
37.    });
38.    app.application.navigate('messages.html');
39.}

5 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 23 Jan 2014, 08:49 AM
Hi Stefan,

The way you update your dataSource is not supported with the ListView and endless scrolling enabled. I would suggest you to take a look at the following demo showing how to create a Kendo UI Mobile ListView with endless scrolling enabled:

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

Regards,
Kiril Nikolov
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Stefan
Top achievements
Rank 1
answered on 24 Jan 2014, 08:31 AM
Hi Kiril,

Thank you for your suggestion I have implemented the code as in the example, I still have on question though, can the datasource be in a viewmodel or is this not possible or desired?
0
Steve
Telerik team
answered on 24 Jan 2014, 08:39 AM
Hi Stefan,

Take a look at the following forum thread for clarification: DataSource, Model and ViewModel.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Stefan
Top achievements
Rank 1
answered on 24 Jan 2014, 10:04 AM
Thanks Steve,
As far as I can tell its perfectly fine to use a datasource in a viewmodel, 

I still have a problem with the endless scroll. If I try to scroll it sometimes hangs and freezes the view, I can go back using the back button in the navbar. But if i try to get back to the view I get the frozen view again.


This does not happen if I scroll very slowly.
0
Kiril Nikolov
Telerik team
answered on 29 Jan 2014, 08:20 AM
Hi Stefan,

The problem you are describing might be caused by a pageSize property set to a lower value than what is needed. Please check this documentation article that might help you setting up the ListView correctly:

http://docs.telerik.com/kendo-ui/getting-started/mobile/listview#press-to-load-more-/-endless-scrolling

Regards,
Kiril Nikolov
Telerik

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
General Discussions
Asked by
Stefan
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Stefan
Top achievements
Rank 1
Steve
Telerik team
Share this question
or