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

ListView endlessScroll problem

6 Answers 383 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Ivan
Top achievements
Rank 1
Ivan asked on 11 Jul 2012, 11:41 AM
Hi,
I have a problem with endlessScroll in mobile ListView. The problem is, when last page is loaded, if I scroll down it continue to load last page over and over again.

Here are the code snippets that show how list is defined and initialized:
<div id="view-list" data-role="view" data-layout="view-layout">
    <div>
        <ul id="list">
        </ul>
    </div>
</div>

var dataSource = new kendo.data.DataSource({
    pageSize: 10,
    page: 1,
    serverPaging: true,
    transport: {
        read: {
            url: url,
            dataType: "jsonp"
        },
        parameterMap: function (options) {
            var parameters = {
                pageSize: options.pageSize,
                page: options.page
            }
 
            return parameters;
        }
    },
    schema: {
        data: function (data) {
            return data.result;
        },
        total: function (data) {
            return data.count; // total number of items
        }
    },
    error: function () {
        onError("Communication error");
    }
});

if ($("#list").data("kendoMobileListView") == undefined) {
    $("#list").kendoMobileListView({
            dataSource: dataSource,
            template: $("#template").html(),
            endlessScroll: true,
            scrollTreshold: 30,
            click: function (e) {
                ...
            }
        });
}
else {
    $("#list").data("kendoMobileListView").dataSource = dataSource;
    $("#list").data("kendoMobileListView").refresh();
}

Additional notes: List shows items based on selection in previous view. Data source is created every time from beginning. Upon first selection, list is initialized. Other selections change data source and refresh list.

I get same behaviour if I use loadMore option instead of endlessScroll. 

Could you please help? If this is expected behaviour, is there an option to disable endless scroll using JavaScript (for example, when last page is loaded)?

6 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 12 Jul 2012, 09:41 AM
Hi Ivan,

I am afraid that is the default behavior of both Endless scrolling and the Load More, and it can not be prevented - the list view widget does not store the total number of records and as a result it is not aware when the last data page is reached. As a possible workaround at this stage I would suggest to implement a custom logic that will check on the server and send back and empty array after all data parts are requested by the client.  

I hope this helps.
 
Greetings,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ivan
Top achievements
Rank 1
answered on 13 Jul 2012, 10:32 AM
Thanks for the quick response. Reading other posts on forum I realized that I have started this thread on wrong place (on Kendo UI Web instead on Mobile) and that there are others with same problem.
Proposed workaround does work but it has two really annoying side effects:
1. large number of requests send to service
2. loading image shown if trying to scroll down

I have found another solution to my problem. I don't know if it can be applied to others, but it definitely worked for me.
On data source change event, when I detect that last page is loaded I disable 'scroll' event of list view scroller:

change: function (e) {
        var hasMorePages = e.sender._pageSize * e.sender._page < e.sender.total();
        if (hasMorePages == false) {
            var list = $("#list").data("kendoMobileListView")
            if (list != undefined && list._scrollerInstance != undefined) {
                list._scrollerInstance.unbind('scroll');
            }
        }
    }

The result is: no more requests to service and loading image is not shown when scrolling down.
When I want to change data source, I re-initialize list view with new data source and endless scroll works again.
0
Martin
Top achievements
Rank 1
answered on 30 Jul 2012, 02:15 PM
Fantastic, thats really helped me with the endless scroll issue.
0
Joshua
Top achievements
Rank 1
Veteran
Iron
answered on 19 Sep 2012, 04:32 PM
Is there an endlessScroll option for the normal web version of the ListView?
0
Iliana Nikolova
Telerik team
answered on 20 Sep 2012, 11:58 AM
Hello Joshua,

I am afraid the endlessScroll functionality is not available for the ListView for Kendo UI Web, however you I will suggest to send his idea as a feature request at our UserVoice portal. This way the community would be able to vote and comment it and if this suggestion turns out to be popular we will consider its implementation.
 
Kind regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Joe
Top achievements
Rank 1
answered on 07 Nov 2012, 08:22 PM
The following would work for disabling endless scrolling when no results are returned and pull to refresh is not enabled.
change: function (e) {
    if (e.items.length < e.sender._pageSize) {
        var list = $("#list").data("kendoMobileListView");
        if (list && list._scrollerInstance) {
            list._scrollerInstance.unbind('scroll');
        }
    }
}
Tags
ListView
Asked by
Ivan
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Ivan
Top achievements
Rank 1
Martin
Top achievements
Rank 1
Joshua
Top achievements
Rank 1
Veteran
Iron
Joe
Top achievements
Rank 1
Share this question
or