RadListView Item Reorder

The item reorder feature allows the end users to change the position of an item by dragging it. This is particularly useful in scenarios where lists of items with priorities are created. Reordering an item is used to change the item's priority. The Item Reorder feature is enabled by setting the itemReorder property to true.

Example

The following simple scenario demonstrates how the item-reorder feature is used. A handler for the itemReordered event is provided which prints out the indices of the item being reordered.

export default {
  name: 'ItemReorder',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <StackLayout>
      <RadListView ref="listView"
                   for="item in itemList"
                   itemReorder="true"
                   @itemReordered="onItemReordered">
        <v-template>
          <StackLayout class="item m-10" orientation="vertical">
            <Label :text="item.name" class="nameLabel"></Label>
          </StackLayout>
        </v-template>
      </RadListView>
    </StackLayout>
  </Page>
  `,
  data () {
    return {
      title: description,
      itemList: simpleItemList,
      selectedItems: [],
    };
  },
  methods: {
    onItemReordered({ index, data, object }) {
      console.log(`Item reordered from index ${index} to ${data.targetIndex}`);
    },
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    }
  }
};