Endless Scrolling Listview

[Kevin]

OK. I usually do my listviews manually (clearing and appending items from ajax results) but I really want to get endless scrolling working so i've been banging my head against the wall trying to get a very very simple example working with no success.

Here is the HTML:

<div id="test-view" data-role="view" data-title="Test" data-layout="default-layout" data-init="app.test.init" data-show="app.test.showView">
    <ul id="test-list" class="ul-content" data-role="listview">

    </ul>
</div>

<script type="text/x-kendo-tmpl" id="endless-scrolling-template">
    <li>#: name#</li>
</script>

As you can see its a simple html view with a UL inside it. Now for my JS

(function(global) {
    var app = global.app = global.app || {};

    app.test = {
        init: function(e) {
            $("#test-view ul#test-list").kendoMobileListView({
                dataSource: new kendo.data.DataSource({
                    type: "json",
                    serverPaging: true,
                    pageSize: 50,
                    transport: {
                        read: {
                            url: "http://www.somedomain.com/script.php",
                            dataType: "json"
                        }
                    },
                    schema: {
                        type: "json",
                        data: function(data) {
                            return data.result;
                        },
                        total: function(data) {
                            return data.total;
                        }
                    }
                }),
                template: $("#endless-scrolling-template").text(),
                endlessScroll: true
            });
        },
        showView: function(e) {
            $("#loading-overlay").show();
            app.application.showLoading();

            setTimeout(function () {
                $("#loading-overlay").hide();
                app.application.hideLoading();
            }, 2000);
            e.view.scroller.reset();
        }
    };
})(window);

So in the init, its suppose to initialize the listview and pull from my php script which returns JSON. I know my service is serving up the data as you can do an alert in the data handler and see the object it returns, in addition im emailing myself in the service the results anytime a request is made.

Here is example output from my service:

{"result":[{"name":"Item 1"},{"name":"Item 2"},{"name":"Item 3"},{"name":"Item 4"},{"name":"Item 5"},{"name":"Item 6"},{"name":"Item 7"},{"name":"Item 8"}],"total":8}

As you can see its a simple object with a result value that is an array of objects each containing a name key.

The result I am getting is a javascript alert and then only a single item is in the listview

"TypeError: 'undefined' is not a function (evaluating 'n.getAttribute(\"data-\"+dt.ns+\"role\")')"..... yadda yadda in kendo.mobile.minjs

Any help would be most appreciated. I've gone down every google search and avenue i can think of. I've used only the data-attributes instead of the js initialization, etc. All with no success.

Thanks!

[Kiril Nikolov]

Hi Kevin,

You are initializing the ListView twice, first with the data-role attribute, and then you are using the JavaScript initialization. Please keep in mind that this is unsupported and will not work.

I would suggest you to check this demo, showing how exactly you need to implement this feature :

http://demos.telerik.com/kendo-ui/mobile/listview/endless-scrolling.html

And you will also need to check how to correctly configure the endless scrolling functionality:

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

Regards,
Kiril Nikolov
Telerik

[Kevin]

Thanks. the seemed to get me going. Now I have a different issue. Styling related. My list styles don't seem to be applying to this listview for some reason. Here they are (work on a standard listview where i just $().append items to it.

#test-view ul.ul-content {
    opacity: 0.7;
    border-radius: 9px;
    background-color: #000;
    color: #fff;
}

#test-view ul.ul-content > li:first-child {
    border-radius: 9px 9px 0px 0px;
}

#test-view ul.ul-content > li:last-child {
    border-radius: 0px 0px 9px 9px;
}

It only puts the style on the first element, the rest are unstyled. very odd indeed. any ideas?

[Kevin]

Oops forgot to add screenshot

[Kevin]

I'm going to forget styling issues I can work around it by doing the styling a different way. After some testing it seems this method (vs the local data pagination) is a lot more stable. I do have a few complaints though. 

It seems very hard to get the last  few items to load. (drag really far multiple times until it finally pops onto the end of the list (so far it usually happens on the very last item. sometimes the last 2-3 items.) I am not sure if this is a bug, but it seems inconvenient to me anyways as a user. This also happens if you are scrolling backwards through the list back to the beginning it hangs on the very first item of the list in the same manner.

Second, I think it's really odd that after I load the entire list and then say I want to scroll back up it seems to have to reload the list as I go back up through the list. It's awkward on styled lists because it starts loading the items in the middle of the phone screen (as opposed to lets say one block off of the screen which would make sense to me. So you are left with half a styled list and half blank space as the items load in while you scroll up. Again, i'm not sure if this is intended behavior but it looks kind of jarring to me as a user.

I'll link a video demonstrating what I'm talking about. In the video it doesn't hang loading the last item (400) but it does hang going back up the list in item 1.

All in all. this is a very functional listview!! Thanks for such a cool widget. My only complaints are "where" the loading is done (middle of screen) I would very much rather it occur as either the very last visible item on the listview or the very first (scrolling down or up). So there is not a huge half of the screen filled with blank unstyled space.

video: http://youtu.be/5841mmbrAgs

[Kiril Nikolov]

Hello Kevin,

The idea behind the data virtualization (as in endless scrolling) is to load and show only the data that is needed at the current moment, as this way it loads fewer DOM elements, which improves the overall performance. So when you try to scroll back the items are again loaded, as they have been released already as not needed. 

As for the other issues - setting a bigger value for the pageSize property of the dataSource might result in better performance.

Regards,
Kiril Nikolov
Telerik