Overview

The Item Selection feature allows the end users to select items. A couple of selection modes are available, as well as events which are fired when the selection state of an item changes.

There are two selection behaviors which define how item selection works:

  • None - items cannot be selected
  • Press - items are selected by tapping on them
  • LongPress - items are selected by holding them

There are two main selection modes:

  • multiple selection - allows for selecting multiple items. RadListView keeps track of which items are selected and exposes them through a getSelectedItems() method. Multiple selection is enabled by setting the multipleSelection property to true.
  • single selection - only one item can be selected at a time. This mode is enabled by setting the multipleSelection property to false.

Selection events

To notify you when the selection state of an item is changed, RadListView exposes the following events:

  • itemSelecting - fired before an item is selected. Can be used to cancel the operation
  • itemSelected - fired after an item is successfully selected. At this point the item is already in the selected items array returned by the getSelectedItems() method
  • itemDeselecting - fired before an item is deselected. Can be used to cancel the operation
  • itemDeselected - fired after an item has been successfully deselected. At this point the item is not part of the selected items array returned by the getSelectedItems() method.

Example

The following snippets demonstrate how item selection is used.

<RadListView row="0" [items]="dataItems" selectionBehavior="Press" (itemSelected)="onItemSelected($event)" (itemDeselected)="onItemDeselected($event)">
export class ListViewItemSelectionComponent implements OnInit {
    private _dataItems: ObservableArray<DataItem>;
    private _selectedItems: string;

    constructor(private _dataItemService: DataItemService) {
    }

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

    get selectedItems(): string {
        return this._selectedItems;
    }

    ngOnInit() {
        this._dataItems = new ObservableArray(this._dataItemService.getNameEmailDataItems());
        this._selectedItems = "No Selected items.";
    }

    public onItemSelected(args: ListViewEventData) {
        var listview = args.object as RadListView;
        var selectedItems = listview.getSelectedItems() as Array<DataItem>;
        var selectedTitles = "Selected items: ";
        for (var i = 0; i < selectedItems.length; i++) {
            selectedTitles += selectedItems[i].name;

            if (i < selectedItems.length - 1) {
                selectedTitles += ", ";
            }
        }

        this._selectedItems = selectedTitles;
        console.log("Item selected.");
    }

    public onItemDeselected(args: ListViewEventData) {
        var listview = args.object as RadListView;
        var selectedItems = listview.getSelectedItems() as Array<DataItem>;
        if (selectedItems.length > 0) {
            var selectedTitles = "Selected items: ";
            for (var i = 0; i < selectedItems.length; i++) {
                selectedTitles += selectedItems[i].name;

                if (i < selectedItems.length - 1) {
                    selectedTitles += ", ";
                }
            }

            this._selectedItems = selectedTitles;
        } else {
            this._selectedItems = "No Selected items.";
        }

        console.log("Item deselected.");
    }
}