angularmobilenativescriptangular2-nativescriptradlistview

How to restart a Load on demand in Nativescript?


I have a Radlistview where the data changes based on the day chosen by the user in a calendar.

I am using loadOnDemandMode = "Manual" and it works fine until the current query is exhausted. When that happens, I use listView.notifyLoadOnDemandFinished (true), but if the user tries to choose another day I am not able to use "Load on Demand" again.

I've tried instance the ObservableArray again, but it doesn't work. If any know how to restart Load on Demand i will apreciate

I follow THIS for create the code, and I tried THIS, but it doesn´t work for me. My code is something like this

<RadListView [items]="dataItems" 
loadOnDemandMode="Manual" 
(loadMoreDataRequested)="onLoadMoreItemsRequested($event)">
export class ListViewFixedSizeManualComponent implements OnInit {
    private _dataItems: ObservableArray<DataItem>;
    private _sourceDataItems: ObservableArray<DataItem>;
    private layout: ListViewLinearLayout;

    constructor(private _changeDetectionRef: ChangeDetectorRef) {
    }

    ngOnInit() {
        this.layout = new ListViewLinearLayout();
        this.layout.scrollDirection = ListViewScrollDirection.Vertical;
        this.initDataItems();
        this._changeDetectionRef.detectChanges();
        this._dataItems = new ObservableArray<DataItem>();
        this.addMoreItemsFromSource(6);
    }

    public get dataItems(): ObservableArray<DataItem> {
        return this._dataItems;
    }


    public addMoreItemsFromSource(chunkSize: number) {
        let newItems = this._sourceDataItems.splice(0, chunkSize);
        this.dataItems.push(newItems);
    }

    public onLoadMoreItemsRequested(args: LoadOnDemandListViewEventData) {
        const that = new WeakRef(this);
        const listView: RadListView = args.object;
        if (this._sourceDataItems.length > 0) {
            setTimeout(function () {
                that.get().addMoreItemsFromSource(2);
                listView.notifyLoadOnDemandFinished();
            }, 1500);
        } else {
            args.returnValue = false;
            listView.notifyLoadOnDemandFinished(true);
        }
    }

    private initDataItems() {
        this._sourceDataItems = new ObservableArray<DataItem>();
        for (let i = 0; i < posts.names.length; i++) {
            if (androidApplication) {
                this._sourceDataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i].toLowerCase()));
            }
            else {
                this._sourceDataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i]));
            }
        }
    }
}

Solution

  • I solve the problem removing the true option from the listView.notifyLoadOnDemandFinished() and add the option ListViewLoadOnDemandMode.None, so when i change the day, just need to add ListViewLoadOnDemandMode.Manual again

          if (this.getHistoricData.length > 0) {
            setTimeout(function () {
              that.get().addMoreItemsFromSource(10);
              listView.notifyLoadOnDemandFinished();
            }, 1500);
          } else {
            list.listView.loadOnDemandMode = ListViewLoadOnDemandMode.None;
            listView.notifyLoadOnDemandFinished();
    
    

    Reference: nativescript-ui-samples-angular