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

ListView EndlessScroll doesn't work?

4 Answers 207 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Mohammed
Top achievements
Rank 1
Mohammed asked on 03 Dec 2013, 10:51 PM
Hi, I'm trying to put some results in a ListView with Endless Scroll.

I have
<div class="view-content">
    <ul id="searchResults"></ul>
</div>

<script type="text/x-kendo-tmpl" id="template">
            <a data-role="button" data-bind="click: onDetails(#= var1 #)">
                <div class="person">
                    <h3>#:var2#</h3>
                    <p>#:var3#</p>
                    <p>#:var4#</p>
                </div>
            </a>
        </script>
in my index.html file.

Then, I have
var dataSource = new kendo.data.DataSource({
    data: response
});

$("#searchResults").kendoMobileListView({
    dataSource: dataSource,
    template: $("#template").text(),
    endlessScroll: true,
    virtualViewSize: 50
});
in a separate script file.

The variable response is the response from the success callback of an ajax call. The initialization of the Mobile ListView is inside of the success callback. I have my reasons for doing this instead of using the transport: read option in the Kendo UI's DataSource.
In the Q2 version of Kendo UI, it would bunch all the results at the top; that is, all the results would be shoved into the space for one result.
In the Q3 version of Kendo UI, I get an uncaught TypeError: "Cannot call method 'makeVirtual' of null at kendo/js/kendo.mobile.min.js (line: 15)."

I have tried setting the pageSize of the dataSource, but the Q3 release brought the promise of virtualizing local data. Unfortunately, it isn't working.
Thanks in advance!

4 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 05 Dec 2013, 03:22 PM
Hi Mohammad,

it looks like you are initializing the listview before the containing mobile view is initialized. I would like to suggest following the practices which the mobile listview documentation outlines


Alternatively, it can be initialized using jQuery plugin syntax in the containing mobile View init event handler


In addition to that, you can always check our online demos for working examples of given features. 

Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mohammed
Top achievements
Rank 1
answered on 05 Dec 2013, 08:31 PM
Hi Petyo,

Thanks for the heads up! I navigated to the view before initializing the ListView, and it doesn't return the error anymore. However, it doesn't seem to actually be endless scrolling when I use virtualViewSize.

I attempted to put a pageSize and schema.total in the dataSource instead of the virtualViewSize, and it gives me a single page and a loading icon at the bottom (the other pages never load).

Is it bad practice/incorrect to use pageSize and schema.total on local data?

Thanks for your help.
0
Mohammed
Top achievements
Rank 1
answered on 05 Dec 2013, 08:46 PM
Additionally, your documentation at http://docs.kendoui.com/howto/howto-use-the-mobile-listview-with-endless-scrolling provides a ListView example for local data, but that example doesn't implement endless scrolling. If you look at the scrollbar on the right side, it is clearly loading all of the data at once instead of loading more when you scroll down. Just a heads up.

Thanks!
0
Mohammed
Top achievements
Rank 1
answered on 05 Dec 2013, 08:57 PM
Never mind, I fixed it using the documentation found at http://docs.kendoui.com/api/mobile/listview#configuration-endlessScroll
Thanks!
Tags
ListView (Mobile)
Asked by
Mohammed
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Mohammed
Top achievements
Rank 1
Share this question
or