"Resetting" endlessScroll after PullToRefresh

8 posts, 0 answers
  1. Robin
    Robin avatar
    40 posts
    Member since:
    Jul 2012

    Posted 26 Feb 2013 Link to this post

    Using pullToRefresh together with endlessScroll is causing the following headache:

    1. User uses endlessScroll, new data is loaded to the listView
    2. User refreshes by pullToRefresh
      (and this is set to only load the first five entries from the datasource)
    3. Now when attempting a new endlessScroll, the endlessScroll continues from where it was before (i.e. from entry 10 (skip=10)), instead of "restarting" (which would be entry 5 (skip=5)).
    So how can I "reset" the endlessScroll when the user does a pullToRefresh?
    $("#custom-listview2").kendoMobileListView({
           dataSource: datakilde_nyheter,
           template: $("#customListViewTemplate2").html(),
           endlessScroll: true,
           pullToRefresh: true,
           pullParameters: function(item) { //pass first data item of the ListView
                   return {
                       since_id: item.id_str,
                       page: 1,
                       skip: 0
                   };
               }
    });


  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 28 Feb 2013 Link to this post

    Hi Robin,

    The behaviour which you described is expected - when the user performs pull-to-refresh action the service should return only the records (on the server) that are newer than the first one (on the client). In other words to refresh, but not reset the data. For more information about how to work with dynamic data please see this tutorial and pull with endless scrolling demo.

    If you want to change the default behaviour, you can modify the endlessScrollParameters send to the service. In addition you would have to clear the <li> elements of the previously retrieved records.

    Kind regards,
    Alexander Valchev
    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. Robin
    Robin avatar
    40 posts
    Member since:
    Jul 2012

    Posted 01 Mar 2013 Link to this post

    Thanks a lot, this was very helpful. 

    For our case the best would be to do a complete reload when the user pulls to refresh (because older elements might also have changed). What is the recommended way of "resetting everything" and do a completely new load on the pullToRefresh?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 05 Mar 2013 Link to this post

    Hi Robin,

    Please try to hook up to the pull event of the scroller, where you can clear the existing DataSource data and respectively existing ListView items. As an example:
    //assuming that you initialize the ListView at the init event
    function onInit(e) {
        $("#list").kendoMobileListView({
            //...
        });
     
        e.view.scroller.bind("pull", function(e) {
            $("#list").data("kendoMobileListView").dataSource.data([]);
        });
    }


    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Robin
    Robin avatar
    40 posts
    Member since:
    Jul 2012

    Posted 05 Mar 2013 Link to this post

    Thanks, this works fine for making a fresh load of data. Two other problems still persist: 

    Problem 1
    The click-event only works on the most recently loaded items. Using endlessScroll or loadMore makes the click event only fire when the user clicks on the recently loaded items in the listView.

    click: function(e) {
        console.log("Is about to show item: "+e.dataItem.id);
    }

    Problem 2
    Using endlessScroll after having refreshed the listView with pullToRefresh, it continues where it left off. Meaning it sends i.e. skip=20 instead of skip=5. How can I also reset the endlessScroll count, so that it still works correctly after pullToRefresh?

    Complete code:
    function mobileListViewTemplatesInit2(e) {  
        $("#custom-listview2").kendoMobileListView({
            dataSource: datakilde_nyheter,
            template: $("#customListViewTemplate2").html(),
            loadMore: true,
            loadMoreText: "Vis eldre saker",
            pullToRefresh: true,
            click: function(e) {
                console.log("Is about to show item: "+e.dataItem.id);
            }
        });
        e.view.scroller.bind("pull", function(e) {
            $("#custom-listview2").data("kendoMobileListView").dataSource.data([]);
        });
    }



  7. Robin
    Robin avatar
    40 posts
    Member since:
    Jul 2012

    Posted 06 Mar 2013 Link to this post

    In case anyone else struggles with the second problem mentioned, "resetting" the skip and page for the endlessScroll / loadMore, I added the following in the pull event of the scroller:

    $("#custom-listview2").data("kendoMobileListView").dataSource._page=1;
    $("#custom-listview2").data("kendoMobileListView").dataSource._skip=0;

    Thanks a lot to forum user Ali for solving this problem!

    As for the first problem with the click-event, it is still unresolved.
  8. John
    John avatar
    13 posts
    Member since:
    Feb 2013

    Posted 07 Mar 2013 Link to this post

    To solve problem 1, I embed an attribute in my elements called "lookup-key", then when the click even fires I re-read the data via jQuery.ajax() and populate a view the app.navigate() to that view. 

    This is described by another post somewhere in the forum (which took me a while to find - and no, I don't know which one :-)).

    In my case I need to do this because my data source is using server-side paging and sorting, and iirc the Kendo data-source in this case only "remembers" the UID values for the most recently retrieved records.  Sure, the <li> items are still there in your view - but the data source is no longer aware of them. 

    Thus the need for some kind of reference to get back to the data. 
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 07 Mar 2013 Link to this post

    Hello guys,

    @Robin: By default the dataSource keeps only the dataItems received by the last fetch. This is the reason why e.dataItem is undefined for records older than the most recently loaded. The workaround, as @John suggested, is to store the item ID in a custom HTML data attribute. When user navigates, you can extract the HTML data and read the details for corresponding record from the server.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready