ListView endlessScroll problem

7 posts, 0 answers
  1. Ivan
    Ivan avatar
    6 posts
    Member since:
    Jul 2012

    Posted 11 Jul 2012 Link to this post

    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)?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 12 Jul 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Ivan
    Ivan avatar
    6 posts
    Member since:
    Jul 2012

    Posted 13 Jul 2012 Link to this post

    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.
  5. Martin
    Martin avatar
    12 posts
    Member since:
    Mar 2008

    Posted 30 Jul 2012 Link to this post

    Fantastic, thats really helped me with the endless scroll issue.
  6. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 19 Sep 2012 Link to this post

    Is there an endlessScroll option for the normal web version of the ListView?
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 20 Sep 2012 Link to this post

    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!
  8. Joe
    Joe avatar
    4 posts
    Member since:
    Oct 2012

    Posted 07 Nov 2012 Link to this post

    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');
            }
        }
    }
Back to Top
Kendo UI is VS 2017 Ready