[RadListView] Example of usage of loadOnDemandBufferSize

[fthuin]

Please, provide the details below:

Did you verify this is a real problem by searching the NativeScript Forum?

Yes

Tell us about the problem

I didn't find example in the docs or samples about the usage of loadOnDemandBufferSize on a RadListView with Angular, and when I try to use it, it is undefined.

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: "nativescript-ui-listview": "^3.5.8"
• CLI: 4.1.2
• Cross-platform modules: 4.1.0
• Runtime(s): 4.1.3

Please tell us how to recreate the issue in as much detail as possible.

<RadListView #listView
                     *ngIf="!isLoading"
                     [items]="getQuestions()"
                     separatorColor="transparent"
                     [itemTemplateSelector]="templateSelector"
                     (itemLoading)="makeBackgroundTransparent($event)"
                     class="container-fluid first-scroll-wrapper"
                     loadOnDemandMode="Auto"
                     (loadMoreDataRequested)="loadMoreItems($event)"
        >

            <ng-template tkTemplateKey="badge" let-question="item">
                <GridLayout
                            rows="*,auto"
                            columns="*"
                            (tap)="null"
                            class="bg-transparent"
                >
                    ...
                </GridLayout>
            </ng-template>
</RadListView

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Here is a very simple example of what I was trying to implement. I have a big array (currently everything is synchronous for simplicity) and I push inside the ObservableArray returned by getQuestions() each time loadMoreDataRequested is triggered. The problem is that listView.loadOnDemandBufferSize returns undefined, so I have to manage the 'pagination' size myself which is probably not optimal.

loadMoreItems(args: ListViewEventData) {
        const listView: RadListView = args.object;
        const numberOfNewItems = listView.loadOnDemandBufferSize;
        if (this.contentObs.length < this.fullContent.length) {
            const startIndex = this.contentObs.length - 1;
            let endIndex = this.contentObs.length + numberOfNewItems;
            if (this.fullContent.length < endIndex) {
                endIndex = this.fullContent.length;
            }
            const contentToAdd = this.fullContent.slice(startIndex, endIndex);

            this.contentObs.push(...contentToAdd);
        } else {
            listView.loadOnDemandMode =
                ListViewLoadOnDemandMode[ListViewLoadOnDemandMode.None];
        }
        listView.notifyLoadOnDemandFinished();
    }

[tsonevn]

Hi @fthuin, The loadOnDemandBufferSize is used to set up the number of the items, which should be preloaded on an initial time of the listview. This property can be set up inline via HTML code. For example:

<RadListView #listView
                     loadOnDemandMode="Auto"
                     loadOnDemandBufferSize="10"
......
        >
.....
</RadListView>

[fthuin]

Hi @tsonevn,

Thanks for your answer. As it is undefined in my case, what is the default value? If I set it to zero, does that mean that the RadListView will wait until I reach its bottom to ask for new items?

[tsonevn]

Hi @fthuin, There is no default value for this property. When it is not set, the load on demand should load several items, which are needed to fill the device screen. Currently, setting up loadOnDemandBufferSize="10" will disable the load on demand functionality. Regarding that, I logged an issue here, and we will investigate further, why this is happening.