RadListView Item Selection

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.

The value of the selectionBehavior property determines how the item selection works. It accepts the values from the ListViewSelectionBehavior enumeration:

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

Additionally, the value of the multipleSelection property determines which selection mode will be used. The available options are:

• multiple selection mode - 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 mode - 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)" (itemSelecting)="onItemSelecting($event)" (itemDeselecting)="onItemDeselecting($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) {
        const listview = args.object as RadListView;
        const selectedItems = listview.getSelectedItems() as Array<DataItem>;
        let selectedTitles = "Selected items: ";
        for (let i = 0; i < selectedItems.length; i++) {
            selectedTitles += selectedItems[i] ? selectedItems[i].name : "";

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

        this._selectedItems = selectedTitles;
        const selectedItem = this.dataItems.getItem(args.index);
        console.log("Item selected: " + (selectedItem && selectedItem.name));
    }

    public onItemSelecting(args: ListViewEventData) {
        const listview = args.object as RadListView;
        const selectedItems = listview.getSelectedItems() as Array<DataItem>;
        let selectedTitles = "Selecting item: ";
        for (let i = 0; i < selectedItems.length; i++) {
            selectedTitles += selectedItems[i] ? selectedItems[i].name : "";

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

        const selectedItem = this.dataItems.getItem(args.index);
        console.log("Item selecting: " + (selectedItem && selectedItem.name));
    }

    public onItemDeselecting(args: ListViewEventData) {
        const listview = args.object as RadListView;
        const selectedItems = listview.getSelectedItems() as Array<DataItem>;
        let selectedTitles = "Deselecting item: ";
        for (let i = 0; i < selectedItems.length; i++) {
            selectedTitles += selectedItems[i] ? selectedItems[i].name : "";

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

        const selectedItem = this.dataItems.getItem(args.index);
        console.log("Item deselecting: " + (selectedItem && selectedItem.name));
    }

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

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

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

        const deselectedItem = this.dataItems.getItem(args.index);
        console.log("Item deselected: " + (deselectedItem && deselectedItem.name));
    }
}