How to get Reorder list items to work (radlistview, angular)


#1

Does anyone have working code for radlistview with reorder for angular?

I have a list in the RadListView form, and I am trying to enable the user to reorder the items in the list. I am using NS Angular, and its not working properly on iOS. (I haven’t tested android yet.)

Here’s the issue: the reorder handle only works properly for dragging an item up. Specifically, the reorder handle does not work at all to drag an item down–rather, you have to drag the item header (noted with the class=“header”), and only then can it reorder down. The reorder handle does work if you press on the reorder handle and drag the item (above the others).

Below is my code. Is there something I am missing?

Note: I would prefer not to require a reorder handle at all, so a user could just reorder by dragging anywhere in the item. But if I set itemReorder=“true” (which should be enough per the docs), but do not include both reorderMode=“Drag” and the reorderhandle, then there is no reordering action at all. this is different than what the docs provide.

Here is the html code I am using:

<RadListView [items]="arrayItems" (itemReordered)="onItemReordered($event)" itemReorder="true" reorderMode="Drag">
        <ng-template tkListItemTemplate let-arrayItem="item">
            <StackLayout>
                <Label class="header"  [text]="arrayItem.name"></Label>
                <ReorderHandle>
                    <Label text="Reorder This!"></Label>
                </ReorderHandle>
                <Label [text]="arrayItem.detail"></Label>
            </StackLayout>
        </ng-template>
</RadListView>

Docs I reference:
https://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/ListView/item-reorder
https://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/ListView/item-reorder


#2

Just itemReorder to true always worked for me. Would you mind preparing a playground example if it doesn’t work for you?


#3

Thanks for the reply. Not able to do playground at the moment. I will see if I am able later on.


#4

Have you been able to get itemReorder to work with angular and ios, where you have no reorder handle? That should be possible from the docs, but if I don’t have a reorder handle there is no dragging at all for me.


#5

Here’s a related question that may be easier to answer:

Once I reorder the RadListView, how do I get the new order the items are in? The docs show you how to get the index of the item just moved, but how do I translate that to the new order of the items in the underlying array?

If I have an array of items that are displayed in a radlistview, I can get the index of the item just moved, like so:

onItemReordered(args) {
    console.log("Item reordered. Old index: " + args.index + " " + "new index: " + args.data.targetIndex);
})

This means that the items are displayed in a different order on the screen–but it does not change the underlying array. How do I update the order of the array itself?


#6

I’m using it with Angular only with simple array, the positions are automatically modified in the source array. I didn’t have to monitor moves.


#7

I see–that does seem to work for me too. The underlying array gets modified on the drag action. The problem is that for me, using code like the code I put above, the reorder is not stable. Strangely, if I reorder one item, sometimes the other items shift too (so, I move item 4 up to item 1, and items 2 and 3 switch places, even though I haven’t touched them).

Do you have sample working code for angular? I have not found any full html examples of a radlistview with reorder for angular online.


#8

If you move 4th item to 1st position, technically 1 through 4 everything get’s switched in the array. 4th becomes 1st, there before 1st becomes 2nd and so on?


#9

I mean the list items switched in the view itself (and then actually the underlying array gets confused and out of order). Its unstable.

Like this:
Array in view:

Red
Blue
Yellow
Green

Let’s say I want to drag Green up to first position, so the result SHOULD be:
Green
Red
Blue
Yellow

But it often happens (even most of the time), that other things get switched too. Glitchy. So I am dragging only Green, but others move too, so resulting array in the view could be:

Green
Yellow
Blue
Red

I have tried different methods of dragging, and they have not had an impact in changing this result.


#10

A playground example could work, otherwise it’s difficult to analyse.


#11

Thanks. I’ll see if I can set one up later.


#12

Hi,
I have set up a playground at: https://play.nativescript.org/?template=play-ng&id=rMvnby&v=6

I am experiencing the same issues discussed before:

  1. When I specify reorderMode=“Drag” and a reorder handle, the reorder action is glitchy, moving around items on the screen other than the selected item.

  2. The docs say I should be able to not specify any reorderMode, and not have a reorder handle. But, when I take those out, there is no reorder activity at all.

You see what I am saying?

fyi, here is the code I am using in the playground:

html:

<ActionBar title="Home" class="action-bar">
</ActionBar>

<GridLayout rows="30, *, 60">
	<GridLayout row="0">
		<Label text="Here is the top row (included for example purposes)"></Label>
	</GridLayout>
	<RadListView style="margin-top: 20px;" row="1" [items]="colorArray" (itemReordered)="onItemReordered($event)" itemReorder="true"
	 reorderMode="Drag">
		<ng-template tkListItemTemplate let-color="item">
			<StackLayout style="margin-top: 50px; border-width: 10px; border-color: blue;">
				<Label [text]="color"></Label>
				<StackLayout horizontalAlignment="left">
					<Label text="some text"></Label>
				</StackLayout>
				<ReorderHandle horizontalAlignment="right" style="margin-left: 50px">
					<Label text="ClickToReorder"></Label>
				</ReorderHandle>
			</StackLayout>
		</ng-template>
	</RadListView>
	<GridLayout row="2">
		<Label text="And Here is the bottom row (for example purposes)"></Label>
	</GridLayout>
</GridLayout>

ts:

import { Component, OnInit } from "@angular/core";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

    public colorArray: Array<any> = [];
    constructor() {
    }

    ngOnInit(): void {
        this.colorArray = ['Red', 'Blue', 'Yellow', 'Orange', 'Purple']
    }

    onItemReordered(args) {
        console.log('old index number of dragged item = ' + args.index)
        console.log('new index number after drag = ' + args.data.targetIndex)
       console.log('color array after drag = ' + this.colorArray)
    }
}

#13

With your same example in playground, I don’t see the issue only that the item reorder event is never called. But when I remove the drag mode option, keep only reorder handle, it works as expected and event is also called.


#14

That is not what I experience at all. If I remove the 'reorderMode=“Drag” ’ I get no reorder action at all (not able to drag). When I leave it in, it has clear glitches–I try to move one item (say, moving yellow to the top), and other items shift (like, blue and green switch places).

It is also tricky to use with scroll action on, because sometimes when trying to drag the phone thinks I am trying to just scroll instead.

So overall, using the exact code I have pasted above and the playground I noted, the reorder action is essentially not useable.

This is with iphone, iOS 10.3.2.

You are seeing no issues with iOS?