angularnativescriptradlistview

Dynamic change of itemRorder value in RadListView UI in Nativescript Angular app


I'm trying to dynamically change the value of itemReorder boolean in RadListView Ui list for Nativescript Angular App without success. I get every time this error: Behavior is not attached to RadListView, use RadListView addbehavior method to attach it.

HTML:

<GridLayout  tkExampleTitle tkToggleNavButton class="proposedLettersRow">
        <RadListView #itemReord [items]="items" selectionBehavior="LongPress" reorderMode = "Drag" [itemReorder]="itemReorder" (itemReordered)="onItemReordered($event)" multipleSelection= "false"
                    >
                <ng-template tkListItemTemplate let-item="item">
                    <GridLayout class="listItemTemplateGrid" >
                        <Label
                            [text]="item"
                            [ngClass]="!isWin ?  'proposed' : 'proposedIsDone'"
                            class="list-group-item ">
                        </Label>
                    </GridLayout>
                </ng-template>

                <ListViewGridLayout tkListViewLayout
                                    scrollDirection="Vertical"
                                    height="150"
                                    ios:itemHeight="150"
                                    spanCount="7"
                                    horizontalAlignment="center">
                </ListViewGridLayout>
        </RadListView>
    </GridLayout>

Typescript:

At the beginning this.itemReorder is set to true, then a function comes to change it to false, the error appears when i execute this function.

Terminal log

Code


Solution

  • I think you are setting itemReorder to false too early, may be the component requires it to be true while on itemReordered event. Since it's not open source yet, I don't have much information on this. But an easy workaround is to add a timeout,

    public youWin() {
        if (this.newIndex < this.oldIndex) {
            setTimeout(() => {
                this.itemReorder = false;
            }, 100);
        }
    }
    

    Updated Playground