Skip to content

Commit d74b366

Browse files
DataGrid: Add shortcuts to Row Selection demo (#30126)
1 parent 4193f04 commit d74b366

File tree

2 files changed

+8
-2
lines changed

2 files changed

+8
-2
lines changed

apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/description.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,10 @@ To configure when the checkboxes appear, set the [showCheckBoxesMode](/Documenta
55
The checkbox in the header selects all rows or current page rows, depending on the [selectAllMode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#selectAllMode) value. If you want to disable this checkbox, set [allowSelectAll](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#allowSelectAll) to **false**.
66

77
In this demo, you can use the drop-down menus under the grid to change the **showCheckBoxesMode** and **selectAllMode** values.
8-
<!--split-->
8+
<!--split-->
9+
10+
If **showCheckBoxesMode** is *"always"*, you can select and unselect a row by clicking its checkbox. Focus the component's data cells with the arrow keys, **Tab**, **Shift+Tab**, **Home**, and **End**, and press **Space** to select or unselect a row.
11+
12+
If **showCheckBoxesMode** is *"none"*, *"onCLick"*, or *"onLongTap"*, you can click a row or focus a data cell and press **Space** to select a row. Unselect a row or select one without clearing previous selection with **Ctrl+Click**/**Ctrl+Space**.
13+
14+
Use **Shift+Click**/**Shift+Space** to select all items between two rows. For more details, refer to the DataGrid [Keyboard Navigation](/Documentation/Guide/UI_Components/DataGrid/Accessibility/#Keyboard_Navigation) help topic.
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
In this demo, the DataGrid allows users to select only one row at a time. To enable this mode, set the **selection**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#mode) property to *"single"*. Press Ctrl to unselect a row.
1+
In this demo, the DataGrid allows users to select only one row at a time. To enable this mode, set the **selection**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#mode) property to *"single"*. You can click a row to select it, and **Ctrl+Click** to unselect it. Focus the component's data cells with the arrow keys, **Tab**, **Shift+Tab**, **Home**, and **End**, and press **Space** to select a row. Use **Ctrl+Space** to unselect the selected row.
22

33
You can access the selected row data from the [onSelectionChanged](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onSelectionChanged) function. In this demo, this function fetches the selected row's information and displays it under the grid.
44
<!--split-->

0 commit comments

Comments
 (0)