Skip to content
RevoGrid [Pro]

Selecting Cards

Selection marks the cards you want to act on; it does not itself move or save them. A selected group can span columns and swimlanes.

Interactive example

Select and move several cards

A multiple selection can move as one validated group.

Try it: Select both To do cards, then move them to In progress.

Loading example…

What to notice: Both selected cards move together; Clear selection leaves the cards in place.

TypeScript source

Install the packages from Getting Started, then use this source in your app.

board-actions.ts
import type { KanbanPlugin, KanbanConfig } from '@revolist/kanban';
import type { WorkCard } from './first-board';


export function moveResearch(kanban: KanbanPlugin<WorkCard>, columnProp: string) {
  return kanban.moveCards(['task-1'], { columnProp });
}
export function moveResearchToPlatform(kanban: KanbanPlugin<WorkCard>) {
  return kanban.moveCards(['task-1'], { columnProp: 'todo', swimlaneId: 'platform' });
}
export function selectTodoCards(kanban: KanbanPlugin<WorkCard>) {
  kanban.setSelectedCardIds(kanban.getCards().filter(card => card.status === 'todo').map(card => card.id));
}
export const workInProgress: Partial<KanbanConfig<WorkCard>> = {
  columns: [{ prop: 'todo', name: 'To do' }, { prop: 'doing', name: 'In progress', wipLimit: 1 }, { prop: 'done', name: 'Done' }],
  wipBehavior: 'block',
};
export const startBeforeDone: Partial<KanbanConfig<WorkCard>> = {
  rules: { canDrop: ({ cards, targetColumn }) => targetColumn.prop === 'done' && cards.some(card => card.status === 'todo') ? 'Start the task before marking it done.' : true },
};
export function frenchBoard(config: KanbanConfig<WorkCard>): KanbanConfig<WorkCard> {
  return { ...config, locale: 'fr-FR', columns: config.columns?.map(column => ({ ...column, name: ({ todo: 'À faire', doing: 'En cours', done: 'Terminé' } as Record<string, string>)[String(column.prop)] ?? column.name })), labels: { ...config.labels, emptyColumn: 'Aucune carte', dropCardHere: 'Déposer une carte ici', moveCancelled: 'Déplacement annulé', editCard: 'Modifier la carte', deleteCard: 'Supprimer la carte' } };
}
Download board-actions.ts

Try it: select two cards, then move the selected group. Clear selection and check that neither card moves again.

Multiple selection

Section titled “Multiple selection”
  • Click replaces the selection.
  • Cmd/Ctrl-click toggles one card.
  • Shift-click selects a contiguous range in board reading order.
  • Dragging a selected card moves the entire selection.
  • Dragging an unselected card first replaces the selection with that card.

A selection can span several columns and swimlanes. The move is atomic and preserves the selected cards’ prior board reading order.

When filters change, selection is reduced to visible cards. Removed source rows are always pruned.

Configure selection

Section titled “Configure selection”
grid.kanban = {
  ...config,
  selection: { mode: 'multiple', selectedIds: ['task-1', 'task-3'] },
};

For a ready plugin instance:

kanban.setSelectedCardIds(['task-1', 'task-3']);
const selected = kanban.getSelectedCardIds();
kanban.setSelectedCardIds([]);

Obtain kanban through RevoGrid’s plugin collection. Only visible, selectable card IDs are retained.

Keyboard selection

Section titled “Keyboard selection”

Ctrl+Space or Cmd+Space toggles the focused card. Shift+Space extends selection from the current anchor. Space alone starts movement; Escape cancels an active keyboard move. See the keyboard guide for the complete interaction contract.

Next steps

Section titled “Next steps”

Continue with moving cards, toolbar actions and filtering. See the Kanban API for exact types and signatures.