RadListView tkListLoadOnDemandTemplate Not Working

[Ericky14]

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

Yes

Tell us about the problem

When defining the template for loadOnDemand, the custom template is not displayed and the default one is used. (loadOnDemandMode="Manual")

Which platform(s) does your issue occur on?

Both

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

• Progress NativeScript UI version: 3.5.7
• CLI: 4.0.0
• Cross-platform modules: 4.0.1
• Runtime(s): 4.1.2/4.1.0

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

Use a load on demand template.

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

<GridLayout *tkListLoadOnDemandTemplate backgroundColor="transparent" class="footer" columns="*" rows="auto">
    <Button class="action-button" text="View More" (tap)="getComments()"></Button>
</GridLayout>

[tsonevn]

Hi @Ericky14, I tested your case with the below-attached code, however, was unable to recreate the issue on my side. Regarding that, it will help if you send us sample project, which can be used for debugging. HTML

<GridLayout tkExampleTitle tkToggleNavButton>
    <!-- >> angular-listview-load-on-demand -->
    <RadListView [items]="dataItems" loadOnDemandMode="Manual" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)">
    <!-- << angular-listview-load-on-demand -->
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout class="itemTemplateStackLayout" orientation="vertical">
                <StackLayout class="innerOtemTemplateStackLayout" orientation="horizontal">
                    <Image *tkIfIOS [src]="item.image" stretch="aspectFit" width="100"></Image>
                    <FrescoDrawee *tkIfAndroid height="100" width="80" [imageUri]="item.image"></FrescoDrawee>

                    <StackLayout class="labelsStackLayout" orientation="vertical">
                        <Label class="labelName" [text]="item.name"></Label>
                        <Label class="labelTitle" [text]="item.title" textWrap="true"></Label>
                        <Label class="labelText" [text]="item.text" textWrap="true"></Label>
                    </StackLayout>
                </StackLayout>
            </StackLayout>
        </ng-template>

        <ListViewLinearLayout *tkIfIOS tkListViewLayout itemHeight="120"></ListViewLinearLayout>

        <div *tkIfIOS>
            <!-- >> listview-load-on-demand-custom-view -->
            <GridLayout *tkListLoadOnDemandTemplate class="loadOnDemandItemGridLayout">
                <Label text="Load More" horizontalAlignment="center" verticalAlignment="center"></Label>
            </GridLayout>
            <!-- << listview-load-on-demand-custom-view -->
        </div>
    </RadListView>
</GridLayout>

TypeScript

import { Component, OnInit, ChangeDetectorRef } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { DataItem } from "../../dataItem";
import { ListViewLinearLayout, ListViewEventData, RadListView, ListViewLoadOnDemandMode } from "nativescript-ui-listview";
import { android as androidApplication } from "tns-core-modules/application";
import { setTimeout } from "tns-core-modules/timer";
const posts = {
    "names": [
      "Joyce Dean",
      "Joel Robertson",
      "Sherman Martin",
      "Lela Richardson",
      "Jackie Maldonado",
      "Kathryn Byrd",
      "Ervin Powers",
      "Leland Warner",
      "Nicholas Bowers",
      "Alex Soto",
      "Naomi Carson",
      "Rufus Edwards",
      "Ian Ellis",
      "Pat Vasquez",
      "Chelsea Burton",
      "Karl Bates",
      "Evan Rivera",
      "Tony Lawson",
      "Wallace Little",
      "Carrie Tran",
      "Tyler Washington"
    ],
    "titles": [
      "Sales report for January",
      "Planned network mainternance",
      "IT help desk",
      "Summaries of my interviews with customers",
      "REMINDER: corporate meeting",
      "Stock options",
      "Thank you!",
      "Meeting with Jack",
      "Please share these articles",
      "Additional information for Jack",
      "Miss you!",
      "Training",
      "Do you like this blog article?",
      "The latest UI design",
      "Need this article!",
      "Training update",
      "Safety instructions",
      "Missed our converstation",
      "Swift is awessome",
      "Missed conference call with Jack",
      "HR question"
    ],
    "text": [
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam",
      "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.",
      "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam",
      "Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?",
      "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores",
      "Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda",
      "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates",
      "Quot decore facilisi ne duo. Quo an diceret explicari definitionem, ea quo modus fierent apeirian",
      "Ex dicta nonumy consetetur mei, cu mea dico iisque. Saperet officiis legendos at mel.",
      "Molestie officiis ut vis, at sea case sapientem. Nonumy primis percipit vim te, iusto commune quo ea.",
      "Ut quot rebum praesent nec, ius nobis nominavi sententiae id. Wisi facilisi perpetua ea eum, ut unum rationibus sadipscing est.",
      "Usu in veritus vulputate. Scribentur omittantur ne ius, sit eros percipit ocurreret ne.",
      "Per tollit dicunt utroque ut. Volutpat erroribus no duo, est in brute munere epicuri, ad cum justo commodo.",
      "Qui ex nulla assentior, ne cum minim intellegat suscipiantur. Quodsi oportere gubergren vel cu. Nec ei meis nonumy torquatos, eleifend salutandi",
      "Cibo quaeque est at, vel tritani maiorum apeirian ut. Et eos vulputate scribentur. An duis propriae voluptatibus vel, error iudico tamquam quo ne",
      "Dicat quaeque rationibus ei has, ne quis recteque cotidieque vis. Mutat accusam vim ex, sit an homero phaedrum partiendo. ",
      "Ad mea magna meliore, facete disputando id duo, ea sit elitr omittam interesset. Omnes fabulas signiferumque ad mel"
    ],
    "images": [
      "QUEEN",
      "FRANK",
      "ANTON",
      "LAMAI",
      "TOMSP",
      "FOLIG",
      "QUEDE",
      "LAZYK",
      "QUICK",
      "TRAIH",
      "LETSS",
      "RANCH",
      "BONAP",
      "FURIB",
      "BSBEV",
      "GODOS",
      "MAGAA",
      "RICSU",
      "WARTH",
      "WELLI",
      "CENTC"
    ]
  }

export class DataItem {
    constructor(public id?: number, public name?: string, public description?: string, public title?: string, public text?: string, public image?: string, public selected?: boolean, public type?: string, public category?: string) {
    }
}

@Component({
    moduleId: module.id,
    selector: "tk-listview-fixed-size-manual",
    templateUrl: "listview-fixed-size-manual.component.html",
    styleUrls: ["listview-fixed-size-manual.component.css"]
})
// >> angular-listview-load-on-demand-code
export class ListViewFixedSizeManualComponent implements OnInit {
    private _dataItems: ObservableArray<DataItem>;
    private _numberOfAddedItems;
    private layout: ListViewLinearLayout;

    constructor(private _changeDetectionRef: ChangeDetectorRef) {
    }

    ngOnInit() {
        this.layout = new ListViewLinearLayout();
        this.layout.scrollDirection = "Vertical";
        this.initDataItems();
        this._changeDetectionRef.detectChanges();
    }

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

    public onLoadMoreItemsRequested(args: ListViewEventData) {
        const that = new WeakRef(this);
        setTimeout(function () {
            const listView: RadListView = args.object;
            const initialNumberOfItems = that.get()._numberOfAddedItems;
            for (let i = that.get()._numberOfAddedItems; i < initialNumberOfItems + 2; i++) {
                if (i > posts.names.length - 1) {
                    listView.loadOnDemandMode = ListViewLoadOnDemandMode[ListViewLoadOnDemandMode.None];
                    break;
                }

                const imageUri = androidApplication ? posts.images[i].toLowerCase() : posts.images[i];
                that.get()._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + imageUri));
                that.get()._numberOfAddedItems++;
            }

            listView.notifyLoadOnDemandFinished();
        }, 1000);
        args.returnValue = true;
    }

    private initDataItems() {
        this._dataItems = new ObservableArray<DataItem>();
        this._numberOfAddedItems = 0;
        for (let i = 0; i < posts.names.length - 15; i++) {
            this._numberOfAddedItems++;
            if (androidApplication) {
                this._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i].toLowerCase()));
            }
            else {
                this._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i]));
            }
        }
    }
}
// << angular-listview-load-on-demand-code

[Ericky14]

@tsonevn Well, you seem to have tested no iOS only because of *tkIfIOS. What about android?

[racknoris]

@tsonevn Problem still exists in tns 4.2 in Android iOS works fine

[comporell]

any news on this?

[jfturcot]

I also would like to customize the LoadOnDemand template on Android, I tried playing with the javascript of the package files to fix this, but it seems like the LOAD MORE template is hard coded within the compiled AAR.

[comporell]

tkListLoadOnDemandTemplate still does not work on Android. It is a major issue as the text "Load More" cannot be changed to other languages.

[mayander30]

nativescript vue solution was to put a footer with the view ref

and manipulate prop visibility in the hideShowMore method. method hideShowMore(b){ if(b){ this.$refs.stkLoadMore.nativeView.visibility = "visible"; }else{ this.$refs.stkLoadMore.nativeView.visibility = "hidden"; } }, Template footer `

            </v-template>`

[alihimad]

any solution for Angular -> Android ?

[mayander30]

yes, its used in vue but it can be angular too.

[comporell]

any solution for Angular -> Android ?

There is no solution. tkListLoadOnDemandTemplate is broken on Android. But you can use tkListViewFooter instead. Just use a customized loadmore button and control its visibility yourself.

<RadListView [items]="tasks" loadOnDemandMode="None">
    <ng-template tkListItemTemplate let-task="item">
            <Label [text]="task.code"></Label>
             ....
    </ng-template>

    <ng-template tkListViewFooter>
           <GridLayout id="loadMoreGrid">
                    <Button text="More..." (tap)="loadMoreItems()"></Button>
           </GridLayout>
     </ng-template>

</RadListView>

[mayander30]

qualquer solução para Angular -> Android?

Não há solução. tkListLoadOnDemandTemplate está quebrado no Android. Mas você pode usar o tkListViewFooter. Basta usar um botão loadmore personalizado e controlar sua visibilidade.

<RadListView [items]="tasks" loadOnDemandMode="None">
    <ng-template tkListItemTemplate let-task="item">
            <Label [text]="task.code"></Label>
             ....
    </ng-template>

    <ng-template tkListViewFooter>
           <GridLayout id="loadMoreGrid">
                    <Button text="More..." (tap)="loadMoreItems()"></Button>
           </GridLayout>
     </ng-template>

</RadListView>

That's right, that's how I did it

[alihimad]

any solution for Angular -> Android ?

There is no solution. tkListLoadOnDemandTemplate is broken on Android. But you can use tkListViewFooter instead. Just use a customized loadmore button and control its visibility yourself.

<RadListView [items]="tasks" loadOnDemandMode="None">
    <ng-template tkListItemTemplate let-task="item">
            <Label [text]="task.code"></Label>
             ....
    </ng-template>

    <ng-template tkListViewFooter>
           <GridLayout id="loadMoreGrid">
                    <Button text="More..." (tap)="loadMoreItems()"></Button>
           </GridLayout>
     </ng-template>

</RadListView>

thanks, its working. although i have to apply some tweaks but eventually things are on the track.

[virtualbjorn]

Do we have updates for this?

[micahlt]

Just checking - is this completely abandoned?