RadListView/notifyPullToRefreshFinished() not getting rid of the spinner image


#1

Hi, I’ve moved from the basic listview to the RadListview (seems to be faster!) and I’m trying to implement the pullToRefresh utility. However I cannot get rid of the spinner when it finishes loading…

I also use an initial activityIndicator but that is working fine so far.
While the refresh function seems to be running (and via console I get a message that that the notify finish ran too) I still can see the spinner there and the pullToRefresh won’t start again…

XML

    <GridLayout rows="*" columns="*" class="page-content">
        <StackLayout  visibility="{{ !isLoading ? 'visible' : 'collapse'}}" row="0" column="0">
            <lv:RadListView id="listview" items="{{ listArray }}" itemTap="onItemTap" pullToRefresh="true" 
                            pullToRefreshInitiated="pullToRefreshInitiated" class="list-group"> 
                      (.... )
            </lv:RadListView>
        </StackLayout>
        <!--Indicator on whole page, colSpan and rowSpan force ActivityIndicator to takes whole page-->
        <ActivityIndicator visibility="{{ isLoading ? 'visible' : 'collapse'}}" busy="{{ isLoading }}" rowSpan="1" colSpan="1"  row="0" column="0" />
    </GridLayout>

PAGE.JS

function pullToRefreshInitiated (args) {

  const page = args.object;
  const vm = page.bindingContext;
  const newArray = [];
  
  //clean array
  vm.set("listArray", []);

  http.request({        
     (...)
  }).then((r) => {
      (... Load newArray...)
      vm.set("listArray",newArray);       
      // notify the refresh (if doing a refresh)
     
       page.getViewById("listview").notifyPullToRefreshFinished();
                 
  }, (e) => {
      console.log("Error: ");
      console.log(e);

      // cancel the loading indicator
      page.getViewById("listview").notifyPullToRefreshFinished();
  });
};

VIEW MODEL

function RequestsViewModel() {
    SelectedPageService.getInstance().updateSelectedPage("Requests");

    // creating an Observable and setting title property with a string value
    const viewModel = new observableModule.Observable();
          viewModel.set("listArray", listArray);  
          viewModel.set("isLoading",true);
          
    return viewModel;
}

module.exports = RequestsViewModel;

#2

For me, it only works if I call notifyPullToRefreshEnabled() on the event object. Here’s a function I have:

function onPullToRefreshInitiated(args) {
  args.object.notifyPullToRefreshFinished();
}

#3

Thanks Nick. I’ll take this into account.

Doesn’t work though :frowning:
image

Anyway for now I’ve suspended that bit and moved to add a manual refresh button (you see it up there by the pencil). This works fine in Android. BUT I have now another problem to investigate… it ain’t working at all in iOS, I mean, the listview is empty.

When I first used the listview, it would only bring half of the items (?) in iOS. Now with RadListView none will appear, with or without the refresh or the activityindicator. I’ll have to start from scratch! Maybe something related with the http request…


#4

I’ve definitely noticed some unexpected behavior with the pull-to-refresh feature. When you get back around to it, you might try logging in your then function to see if you’re hitting it twice for each “pull” on iOS. It was getting called twice in my code (yet the second iteration’s “notifyComplete” call failed to do anything, resulting in exactly what you’re seeing).

My (hacky) solution was to guard against the second iteration like this:

  function onPullToRefreshInitiated(args) {
    // iOS hits this event twice, so guard against that
    if (this.reloadInProgress) { return; }
    this.reloadInProgress = true;
    this.refreshSessions()
    this.reloadInProgress = false;

    args.object.notifyPullToRefreshFinished();
  }

Let us all know if you figure it out when you get back into that code! :slight_smile:


#5

You’re a genius! That worked perfectly … for ios :frowning: Now somehow the spinner will stay there in Android! Did a full rebuild (removed platform, build, run) and still, that bug.

It’s really maddening working in two platforms. First I tried a manual refresh and a full screen activityIndicator (with the visibility toggled off after my ajax call finished) and it worked perfectly in Android but gave me a blank screen with iOS. Now the pulltorefresh works in OS but fails in Android!

True is I’m loading data from a server and it can potentially take time so i’ll need the first-load spinner… i’ll need to keep investigating… As per the pulltorefresh, it isn’t so essential I can do it by a button.


#6

I’ve finally come to a working solution (so it seems for now)
I’ve found the ios: conditional tag and i’ve used it to set pullToRefresh as true only for ios.
After juggling with the layout the activityIndicator is working for both platforms (both for manual refresh and initial load). And, again, pullToRefresh in iOS, using your trick above.
Seems good to me! Thanks again