Listview with endless scrolling shows only one item

[Stefan]

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.}

[Kiril Nikolov]

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.

[Stefan]

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?

[Steve]

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.

[Stefan]

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.

[Kiril Nikolov]

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