Changing Layout of ItemTemplate inside RadListView is very slow for ios

[nmongiya]

"tns-ios": { "version": "4.0.1" }, "nativescript-ui-listview": "^3.5.11", "tns-core-modules": "~3.4.0", P.S. I tried with "tns-core-modules": "4.2.0", as well.

I have a RadListView where I have grouping function enabled and selectionBehavior is LongPress, I want to show the check box in the list row when selected. That works fine in android but on ios it takes 10 second for checkbox to appear.

Here I have attached the screenshots of what I want to achieve and the code snippet.

  <RadListView #myListView [items]="dataItems" row="0" (loaded)="onListLoaded($event)" selectionBehavior="LongPress" (itemSelected)="onItemSelected($event)"
                    swipeActions="false" pullToRefresh="true" (pullToRefreshInitiated)="onPullToRefreshInitiated($event)" [selectedIndex]="selectedOrderIndex"
                     loadOnDemandMode="Manual" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)" [groupingFunction]="myGroupingFunc" [sortingFunction]="mySortingFunc">

 <ng-template tkListItemTemplate let-item="item" let-i="index">
                        <StackLayout orientation="horizontal" width="100%" >
                            <listRowTemplate [index]="i" [templateLayout]="getTemplateLayout(item.deliveryStatus)" [item]="item" [isCheckBoxVisible]="isCheckBoxVisible"
                                [isImageVisible]="isImageVisible" [imgSrc]="getTemplateImage(item.deliveryStatus)" (imageButtonClicked)="imageButtonClicked($event)"></listRowTemplate>
                        </StackLayout>
                    </ng-template>

                    <ng-template tkGroupTemplate let-category="category">
                        <StackLayout orientation="horizontal" style.backgroundColor="#90A4AE" ios:height="30">
                            <Label class="title-spacing" width="200" [text]="getGroupName(category)"></Label>
                        </StackLayout>
                    </ng-template>

public onItemSelected(args: ListViewEventData) {
this.isCheckBoxVisible = CommonConstants.VISIBLE;
}

[tbozhikov]

Hi @nmongiya, I just tried to reproduce a similar case to yours using the RadListView's Grouping sample from the nativescript-ui-samples-angular repo. I used a similar item template with checkbox implemented by an Image widget:

 <RadListView [items]="dataItems" row="1" #myListView selectionBehavior="LongPress" (itemSelected)="onItemSelected($event)" (itemDeselected)="onItemDeselected($event)"
        [groupingFunction]="myGroupingFunc">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout>
                <Label class="nameLabel" [text]="item.name"></Label>
                <Label class="descriptionLabel" [text]="item.description"></Label>
                <Label class="descriptionLabel" [text]="item.selected"></Label>
                <Image [src]="item.selected ? 'https://cdn0.iconfinder.com/data/icons/harmonicons-02/64/check-circle-512.png' : 'https://cdn0.iconfinder.com/data/icons/harmonicons-02/64/circle-512.png'" width="48" height="48"></Image>
            </StackLayout>
        </ng-template>
        <ng-template tkGroupTemplate let-category="category">
            <GridLayout ios:height="50">
                <Label class="nameLabel" [text]="category" class="groupLabel"></Label>
            </GridLayout>
        </ng-template>
    </RadListView>

... and just switch it through the item.selected property in onItemSelected/onItemDeslected handler:

    public onItemSelected(args: ListViewEventData) {
        const item = this.dataItems.getItem(args.index);
        item.selected = true;
    }

Though not an optimal implementation, this works OK, without delays. Maybe something in your item template and the listRowTemplate component could cause the delays that you experience? Can you send us a sample project/repo or code that could help us debug this issue?

Also, try to update the {N} CLI and Runtimes to latest versions, some fixes there could resolve the case. ;)

[tbozhikov]

closing due to inactivity