"Resetting" endlessScroll after PullToRefresh

[Robin]

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

               };

           }

});

[Alexander Valchev]

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

[Robin]

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?

[Alexander Valchev]

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

[Robin]

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([]);

    });

}

[Robin]

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.

[John]

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. 

[Alexander Valchev]

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