ListView EndlessScroll doesn't work?

5 posts, 0 answers
  1. Mohammed
    Mohammed avatar
    4 posts
    Member since:
    May 2009

    Posted 03 Dec 2013 Link to this post

    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!
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 05 Dec 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Mohammed
    Mohammed avatar
    4 posts
    Member since:
    May 2009

    Posted 05 Dec 2013 Link to this post

    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.
  5. Mohammed
    Mohammed avatar
    4 posts
    Member since:
    May 2009

    Posted 05 Dec 2013 Link to this post

    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!
  6. Mohammed
    Mohammed avatar
    4 posts
    Member since:
    May 2009

    Posted 05 Dec 2013 Link to this post

    Never mind, I fixed it using the documentation found at http://docs.kendoui.com/api/mobile/listview#configuration-endlessScroll
    Thanks!
Back to Top
Kendo UI is VS 2017 Ready