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!

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

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.

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!

Never mind, I fixed it using the documentation found at http://docs.kendoui.com/api/mobile/listview#configuration-endlessScroll
Thanks!