ListView endlessScroll problem

[Ivan]

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)?

[Iliana Dyankova]

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

[Ivan]

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.

[Martin]

Fantastic, thats really helped me with the endless scroll issue.

[Joshua]

Is there an endlessScroll option for the normal web version of the ListView?

[Iliana Dyankova]

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

[Joe]

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');

        }

    }

}