DataGrid: Selection

Zurück: Demo-Übersicht

Status: [Live]. Referenzen: Fluent UI DetailsList (SelectionMode.multiple), Azure-DevOps-Backlog-Bulk-Edit (Auswahl-Toolbar), DevExpress-Grid-Checkbox-Selection, VS-Code-Listen (Ctrl/Shift-Modell).

Vertieft den selection/rowKey-Teil des dataGrid()-Basiskontrakts: Einzel- und Mehrfachauswahl von Zeilen, Maus-/Tastaturbedienung, JS-API für Konsumenten.

• dataGrid()-Grundkontrakt bereits verstanden.
• Bei multi: jede Zeile braucht einen Spalten-Wert, der sie eindeutig identifiziert (für rowKey).

Auswahlzustand ist ansichts-lokal: Filter-, Sortier- oder Seitenwechsel verwirft die Auswahl (bewusst — keine unsichtbar mitlaufende Auswahl über Ansichten hinweg).

Aktive Zeile ≠ Auswahl: wie in Fluent UI DetailsList sind Fokus-Cursor (Roving-Tabindex) und Auswahl (aria-selected) getrennte Konzepte — Pfeiltasten bewegen den Fokus, Leertaste/Klick ändert die Auswahl.

echo $widgets->dataGrid($columns, $rows, [
    'selection' => 'single',
]);

Falsch: rowKey auf eine Spalte zeigen lassen, deren Wert nicht eindeutig ist (z. B. status). Mehrere Zeilen posten dann denselben selection[]-Wert — der Server kann sie serverseitig nicht unterscheiden.

echo $widgets->dataGrid($columns, $rows, [
    'selection' => 'multi',
    'rowKey'    => 'id',
]);

Klick/Pfeiltasten markieren die aktive Zeile (aria-selected, --wk-admin-row-selected-bg); Strg+C kopiert sie (data-wk-copy der Zeile gewinnt, sonst der Tab-verbundene Zelltext — s. Data Export).

• Checkbox-Spalte: erste Spalte mit echten <input type="checkbox" name="selection[]" value="<rowKey>">-Zellen plus Kopf-Checkbox („alle sichtbaren Zeilen an-/abwählen„, indeterminate bei Teilauswahl). Die Checkboxen liegen in einem umschließenden <form> — die Auswahl funktioniert dadurch vollständig ohne JavaScript (Formular-POST von selection[]).
• Maus: Klick auf die Checkbox togglet; Strg+Klick auf die Zeile togglet ebenfalls; Shift+Klick wählt den Bereich von der zuletzt aktiven bis zur geklickten Zeile.
• Tastatur: Pfeiltasten bewegen die aktive Zeile, Leertaste togglet sie, Shift+Pfeil erweitert den Bereich, Strg+A wählt alle sichtbaren Zeilen, Strg+C kopiert alle gewählten Zeilen (zeilenweise, je Zeile gewinnt deren data-wk-copy-Attribut — s. Data Export). Der Container trägt aria-multiselectable=„true“, Zeilen aria-selected.

• wkDataGrid.getSelection(gridEl) → Array der rowKey-Werte der aktuell gewählten Zeilen.
• Bei jeder Änderung feuert das Grid ein bubbelndes CustomEvent wk-selectionchange mit detail = { keys: string[], count: number }.

document.querySelector('.wk-datagrid').addEventListener('wk-selectionchange', (ev) => {
    console.log(ev.detail.count, 'Zeilen ausgewählt:', ev.detail.keys);
});

echo $widgets->dataGrid($columns, $rows, [
    'selection' => 'multi',
    'rowKey'    => 'id',
]);

• Die Auswahl gilt je Ansicht: Filter-, Sortier- oder Seitenwechsel verwirft sie (bewusst, s. Abschnitt 3).
• Kein „Auswahl über mehrere Seiten hinweg merken„ — jede neue Ansicht startet mit leerer Auswahl.

• Vollständiger Überblick: Accessibility (konsolidiert, nicht hier dupliziert).
• Ohne JavaScript bleibt multi vollständig nutzbar (Formular-POST); single erfordert für die Klick-Markierung JavaScript, native Tab-Navigation bleibt aber immer erhalten.

Symptom: Checkbox-Spalte fehlt trotz selection => 'multi'.

Ursache: rowKey fehlt in $opts — das Widget degradiert still auf none.

Lösung: $opts['rowKey'] auf einen eindeutigen Spalten-Key setzen.

• Demo-Übersicht — alle Kategorien
• DataGrid: Data Editing (Massenaktionen) — Auswahl-Toolbar, Bulk-Operationen auf der Selection
• FluentUI: Vertical Grid (Property Grid) — Demo-Übersicht — Eigenschaften-Inspector, der auf wk-selectionchange reagieren kann
• DataGrid: Accessibility — ARIA-/Tastatur-Gesamtüberblick