TaskBoard - Selection
Use single or multiple card selection and handle selected-card payloads.
#Usage
import { TaskBoard } from '@primeui/vue-taskboard';<TaskBoard.Root v-model:tasks="tasks" data-key="id" column-field="columnId" selection-mode="multiple" @selection-change="onSelectionChange">
<!-- TaskBoard parts -->
</TaskBoard.Root>Selection mode controls how card clicks and keyboard selection update selected ids. Use @selection-change to keep toolbars, batch actions, or route state in sync.
#Selection Modes
| Mode | Result |
|---|---|
none | Card clicks do not change selected ids. |
single | One selected card is tracked at a time. |
multiple | Toggle and range-style selection can track multiple cards. |
features.cardSelection = false disables selection even when selection-mode is set. Escape, a click outside the board, or clearSelection() clears the current selection.
#Pointer Selection
| Gesture | Result |
|---|---|
| Click | Selects the clicked card and clears the previous selection. |
| Ctrl or Cmd click | Toggles one card in multiple mode. |
| Shift click | Selects a range within the same column and swimlane from the last selected card. |
Range selection is column and swimlane local. If the Shift target is in another column or swimlane row, TaskBoard selects only the target and resets the range anchor.
#Selection and Dragging
When a selected card is dragged in multiple mode, TaskBoard moves the selected group together and keeps the group in rendered source order. When an unselected card is dragged while other cards are selected, only the dragged card moves and the existing selected ids remain selected.
#Selection Payload
| Field | Meaning |
|---|---|
selectedIds | Stable ids for the selected cards. |
cards | Task objects matching the selected ids. |
#Selection Methods
Use getSelectedCardIds, getSelectedCards, setSelectedCards, and clearSelection from the root ref when a toolbar needs imperative control.
The methods use the field configured by data-key, so custom ids such as ticketId work the same way as the default id field.
#Single Selection
The single-selection sample shows one active card and the card-select payload.
#Multiple Selection
The multiple-selection sample shows range and toggle selection with a selected-card summary.