Row selection
Choose bulk-operation targets through checkboxes and row selection.
Options
Changes below update the Grid and code immediately.
Use the left-hand checkboxes to select ORD-0001 and ORD-0003. Selected rows also have a distinct background.
View code
Sample data included in the code · 6 rows
Usage guide
#Choose orders for bulk processing. Collect checked row IDs and pass them to app operations.
Try it yourself
- Select two orders
Use the left-hand checkboxes to select ORD-0001 and ORD-0003. Selected rows also have a distinct background.
- Inspect selection results
Check selectionChanged in the latest results immediately above the code view. Selecting different rows updates the result.
- Deselect some rows
Click a checkbox again to deselect a row. The header checkbox can select the currently displayed scope.
Read selected order IDs to define export or bulk-operation targets in your app.
Selection alone does not delete, approve, or save orders. Connect business operations in the app receiving the selection.
Useful terms
- selectionChanged
- An event emitted when row selection changes.
- getSelectedRowIds
- A method reading currently selected row IDs.
Key API examples
Application code that references the registered Grid element as grid.
await grid.selectRows(['ORD-0001','ORD-0003']);
console.log(await grid.getSelectedRowIds());API reference
#Key properties
| Attribute / Property | Type / Default | Description |
|---|---|---|
| rowSelection | RowSelectionModeDefault: 'none' | Row selection mode. |
| getRowId | (row: Readonly<GridData>) => GridRowIdDefault: undefined | Optional domain-stable row id extractor for selection persistence. |
| selectionCheckbox | booleanDefault: false | Render a selection checkbox column when multi-row selection is active. |
Other properties2
| Attribute / Property | Type / Default | Description |
|---|---|---|
| showSelectionCheckbox | booleanDefault: false | Select a name to inspect its type contract. |
| shiftClickAdditive | booleanDefault: false | Add shift-click ranges to the existing multi-selection instead of replacing it. |
Events1
| Events | Detail type | Description |
|---|---|---|
GridSelectionChangedDetail | Fires when the row selection set changes. |
Methods2
| Method / Arguments | Return type | Description |
|---|---|---|
| ids: Array<string | number> | Promise<void> | Replace the current row selection. |
Promise<ReadonlyArray<string | number>> | Read the current selected row ids. |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.