Overview

Swipe-to-execute allows you to implement actions associated with list items which are triggered by swiping the item left or right. For examples, you can organize a TO-DO application and let your users complete or delete to-do items by swiping them. Similar scenarios are also to be found in famous e-mail client apps.

Setting up Swipe-to-execute with RadListView and Angular 2.0

Enabling the swipe-to-execute feature is done by following the steps below:

  1. Enable the swipe-to-execute feature by setting the itemSwipe property to true on RadListView in the template where it is defined.
  2. Define how the content below the item's main content will look like. This is the content revealed by swiping the item left or right. You can do this by using the TKListViewItemSwipeDirective via the listItemSwipeTemplate
  3. Handle the events fired when swipe actions are performed by the end user to understand their intentions.

The following component template demonstrates how swipe-to-execute is enabled. Here, the itemSwipe property is set, a template for the swipe content is defined and handlers for the swipe-to-execute events are provided:

<RadListView id="listView" [items]="dataItems" itemSwipe="true" selectionBehavior="None" (itemSwipeProgressStarted)="onSwipeCellStarted($event)"
    (itemSwipeProgressChanged)="onCellSwiping($event)" (itemSwipeProgressEnded)="onSwipeCellFinished($event)"  (itemTap)="onItemClick($event)">
    <template tkListItemTemplate let-item="item">
        <StackLayout class="listItemStackLayout" orientation="vertical">
            <Label class="labelName" [text]="item.name"></Label>
            <Label class="labelTitle" [text]="item.title"></Label>
            <Label class="labelText" [text]="item.text"></Label>
        </StackLayout>
    </template>
    <GridLayout *tkListItemSwipeTemplate columns="auto, *, auto" class="listItemSwipeGridLayout">
        <StackLayout id="mark-view" class="markViewStackLayout" col="0" (tap)="onLeftSwipeClick($event)">
            <Label text="mark" verticalAlignment="center" horizontalAlignment="center"></Label>
        </StackLayout>
        <StackLayout id="delete-view" class="deleteViewStackLayout" col="2" (tap)="onRightSwipeClick($event)">
            <Label text="delete" verticalAlignment="center" horizontalAlignment="center"></Label>
        </StackLayout>
    </GridLayout>
</RadListView>

Here's the code of the component:

export class ListViewSwipeExecuteComponent implements OnInit {
    private _dataItems: ObservableArray<DataItem>;
    private _selectedItems: string;

    constructor(private _dataItemService: DataItemService) {
    }

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

    ngOnInit() {
        this._dataItems = new ObservableArray(this._dataItemService.getPostDataItems());
    }

    public onCellSwiping(args: listViewModule.ListViewEventData) {
        var swipeLimits = args.data.swipeLimits;
        var currentItemView = args.object;
        var currentView;

        if (args.data.x > 200) {
            console.log("Notify perform left action");
        } else if (args.data.x < -200) {
            console.log("Notify perform right action");
        }
    }

    public onSwipeCellStarted(args: listViewModule.ListViewEventData) {
        var swipeLimits = args.data.swipeLimits;
        var listView = frameModule.topmost().currentPage.getViewById("listView");

        swipeLimits.threshold = listView.getMeasuredWidth();
        swipeLimits.left = listView.getMeasuredWidth();
        swipeLimits.right = listView.getMeasuredWidth();
    }

    public onSwipeCellFinished(args: listViewModule.ListViewEventData) {
        if (args.data.x > 200) {
            console.log("Perform left action");
        } else if (args.data.x < -200) {
            console.log("Perform right action");
        }
    }

    public onItemClick(args: listViewModule.ListViewEventData) {
        var listView = <listViewModule.RadListView>frameModule.topmost().currentPage.getViewById("listView");
        listView.notifySwipeToExecuteFinished();
        console.log("Item click: " + args.itemIndex);
    }

    public onLeftSwipeClick(args) {
        console.log("Left swipe click");
    }

    public onRightSwipeClick(args) {
        console.log("Right swipe click");
    }
}