onLoadMoreItemsRequested called before webservice returned the response

[punj]

My purpose is for using RadListView is to loads 20 Records from the webservice call at the loading in the RadListView and upon scroll, it should call the web service again and load 20 more records and so on. But, onLoadMoreItemsRequested is calling before the webservice returned the response and therefore the page is loading blank.

onLoadMoreItemsRequested is CALLED BEFORE WEBSERVICE RETURNED THE RESPONSE. SO RADLISTVIEW IS BLANK.

Platform: I am currently running on iOS

• Progress NativeScript UI plugin version: 8.1.2

• CLI: 6.5.0

• Cross-platform modules: (the version of tns-core-modules in the package.json)

  
  {
  "name": "Vinayaka",
  "nativescript": {
  "id": "org.nativescript.Vinayaka",
  "tns-android": {
    "version": "6.5.0"
  },
  "tns-ios": {
    "version": "6.5.0"
  }
  },
  "version": "0.0.0",
  "scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "android": "tns run android",
  "ios": "tns run ios",
  "mobile": "tns run",
  "preview": "tns preview"
  },
  "private": true,
  "dependencies": {
  "@angular/animations": "~8.2.0",
  "@angular/common": "~8.2.0",
  "@angular/compiler": "~8.2.0",
  "@angular/core": "~8.2.0",
  "@angular/forms": "~8.2.0",
  "@angular/http": "~8.0.0-beta.10",
  "@angular/platform-browser": "~8.2.0",
  "@angular/platform-browser-dynamic": "~8.2.0",
  "@angular/router": "~8.2.0",
  "@fortawesome/angular-fontawesome": "^0.5.0",
  "@nativescript/theme": "~2.2.1",
  "core-js": "^2.6.9",
  "nativescript-angular": "~8.20.0",
  "nativescript-ui-listview": "^8.1.2",
  "nativescript-ui-sidedrawer": "^8.0.1",
  "reflect-metadata": "~0.1.12",
  "rxjs": "~6.4.0",
  "tns-core-modules": "~6.3.0",
  "tslib": "1.10.0",
  "zone.js": "~0.9.1"
  },
  "devDependencies": {
  "@angular/cli": "~8.3.0",
  "@angular/compiler-cli": "~8.2.0",
  "@angular-devkit/build-angular": "~0.803.0",
  "@nativescript/schematics": "~1.0.0",
  "@nativescript/tslint-rules": "~0.0.5",
  "@types/jasmine": "~3.3.8",
  "@types/jasminewd2": "~2.0.3",
  "@types/node": "~8.9.4",
  "codelyzer": "^5.0.0",
  "jasmine-core": "~3.4.0",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~4.1.0",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "~2.0.1",
  "karma-jasmine": "~2.0.1",
  "karma-jasmine-html-reporter": "^1.4.0",
  "nativescript-dev-webpack": "~1.4.0",
  "protractor": "~5.4.0",
  "ts-node": "~7.0.0",
  "tslint": "~5.15.0",
  "typescript": "~3.5.3"
  }
  }

ngOnInit() { this.layout = new ListViewLinearLayout(); this.layout.scrollDirection = ListViewScrollDirection.Vertical; // this.initDataItems(); this.handleListProducts(); // Calls the webservice this._changeDetectionRef.detectChanges(); this._dataItems = new ObservableArray(); this.addMoreItemsFromSource(6, null); }

handleListProducts() { this._sourceDataItems = new ObservableArray();

this._searchService.getProductList(1)
  .subscribe(
    data => {
      this.products = data;
      console.log('Data retrieved: ${this.products}' + this.products.length);
      //for(let m=0;m<20;m++){
      for(let i=0;i<this.products.length;i++){
        this._sourceDataItems.push(new DataItem(
          this.products[i].id, 
          (i +1 )+" "+  this.products[i].name,
          this.products[i].title, 
           "Hello",
           "Hello",
           "string"));
      }//
  //  }
    }
  )  

}

public onLoadMoreItemsRequested(args: LoadOnDemandListViewEventData) { console.log("**** onLoadMoreItemsRequested ****"); const that = new WeakRef(this); const listView: RadListView = args.object; if (this._sourceDataItems.length > 0) { setTimeout(function () { that.get().addMoreItemsFromSource(20, listView); }, 0); } else {
args.returnValue = false; listView.notifyAppendItemsOnDemandFinished(0, true); } }

 I really appreciate if you can share us the code which  is using webservice to load the data and then loads the onLoadMoreItemsRequested().

@darind @lini @jordanilchev @rdlauer @etabakov   Thanks in Advance!

[felixkrautschuk]

I can confirm that issue on iOS in our app (NativeScript core, no angular, RadListView 8.1.2). Android is working as expected.

When the request to the webservice starts, the RadListView already calls the onLoadMoreItemsRequested method on iOS. At this moment, there are no dataitems available yet, so

args.returnValue = false;
listView.notifyAppendItemsOnDemandFinished(0, true);

disables the loadOnDemand feature at all.

Even when I try to re-enable it via

setTimeout(function () {
        listview.loadOnDemandMode = rlvModule.ListViewLoadOnDemandMode.Auto;
, 3000);

it has no effect. Scrolling down to the end of the list after the 3 seconds does not call the onLoadMoreItemsRequested method anymore. (Ths also does not work on Android, but it is not necessary for us on Android, because the onLoadMoreItemsRequested is not called immediatly there so the loadOnDemand feature keeps enabled until the user scrolls down and there are no more items available).