Shellfish

Class: ListViewSelector

ui.ListViewSelector

new ui.ListViewSelector ()

ListViewSelector.shui:38

Abstract element representing a selection decorator for list views.

Adding this element to a html.ListView element adds item selection with or without multi-selection. Use the selection property in the list delegate to determine if the item should be highlighted.

Make the list view focusable in order to enable keyboard navigation.

Use the ui.ListViewSelector#select method to change the selection.

Properties:
Name Type Description
multiple bool

(default: false) If true, multiple list items may be selected.
selection Set

[readonly] The set of the indexes of the currently selected items.
target html.ListView

(default: parent) The target list view.
Example
ListView {
    canFocus: true
    cellWidth: bboxWidth
    cellHeight: theme.itemHeightSmall
    model: myModel
    delegate: template MouseBox {
        color: selector.selection.has(modelData.index) ? theme.highlightBackgroundColor
                                                       : theme.contentBackgroundColor

        onClick: ev =>
        {
            selector.select(modelData.index, ev.ctrlKey ? "toggle" : "replace");
            ev.accepted = true;
        }
    }

    ListViewSelector { id: selector }
}

Extends

Methods

clear ()

ListViewSelector.shui:134

Clears the selection.

select (idx, mode)

ListViewSelector.shui:141

Selects items depending on the given mode.

Modes:

  • "range" - Selects a range of items up to the given item.
  • "replace" - Replaces the selection with the given item.
  • "toggle" - Toggles the selection state of the given item.
Name Type Description
idx number

The index of the item.
mode string

The selection mode. One of range|replace|toggle