This guide describes how users interact with the RealGrid control using the keyboard and mouse.
Common interactions with RealGrid include navigation, selection, and editing. Selection behavior is affected by the SelectionStyle property. The default value, which causes the behavior described in this topic, is BLOCK . Changing this value may result in behavior that is different from what is described. Edit behavior is affected by the editOptions property.
Default Keyboard Behavior
The following table shows the default keyboard behavior for RealGrid.
| Default Shortcuts Windows | macOS Shortcuts | Description |
|---|---|---|
| ↓ (down arrow) | ↓ | Move focus to the cell below (no action on the last row, add a new row if appendable=true) |
| ↑ (up arrow) | ↑ | Move focus to the cell above (no action on the first row) |
| ← (left arrow) | ← | Move focus to the previous cell (no action on the first cell) |
| → (right arrow) | → | Move focus to the next cell (no action on the last cell) |
| Home | ⌘ + ← | Move focus to the first cell in the current row |
| End | ⌘ + → | Move focus to the last cell in the current row |
| Page Down | Fn + ↓ | Scroll down by the number of rows |
| Page Up | Fn + ↑ | Scroll up by the number of rows |
| Tab | Tab | Move focus to next cell (no action on last cell) |
| Shift + Tab | Shift + Tab | Move focus to previous cell (no action on first cell) |
| Shift + Insert | Shift + Fn + Return | Add node to same level (On Mac, Shift+Insert can usually be replaced with Fn+Return) |
| Ctrl + Home | ⌘ + Fn + ← | Move focus to first row |
| Ctrl + End | ⌘ + Fn + → | Move focus to last row |
| Ctrl + Delete | ⌘ + Delete | Delete current row (see the Delete row demo) |
| Ctrl + Left | ⌘ + ← | Collapse node |
| Ctrl + Right | ⌘ + → | Expand node |
| Ctrl + Insert | ⌘ + Fn + Return | Add node as child level |
| F2 | F2 | Enter cell edit mode (when readOnly=false) |
| Enter | Return | Commit changes to cell/row, move to next cell if enterToTab=true |
| Esc | Esc | Cancel editing and revert value when in edit mode, exit row edit mode when entering Esc key again in cancel state |
| Backspace | Delete (←) | Delete character in front of cursor or remove existing value when editing, then switch to edit |
| Delete | Fn + Delete (→) | Delete character behind cursor or remove existing value when editing, then switch to edit |
| Insert | Fn + Return | Add new row to the row where focus is, cancel row addition when moving to another row after not entering data |
| Alt + Down | Option + ↓ | dropDown, show date column editor |
Default Mouse Behavior
The following table shows the default mouse behavior for RealGrid.
| Mouse Actions | Description |
|---|---|
| Click an unselected row | Make the clicked row the current row and the clicked cell the current cell. |
| Click the current cell. | Switch the current cell to edit mode. |
| Drag column title cell | If the GridView.DisplayOptions.columnMovable property is True, the column is moved so that it can be placed in a new position. |
| Drag column title separator | If the GridView.DisplayOptions.columnResizable property is true, the column is resized. |
| Double-click the column title divider | If the GridView.DisplayOptions.columnResizable property is true, the column is automatically resized using the Auto resizing mode. |
| Click the column title cell | If the GridView.sortingOptions.enabled property is true, the column is sorted.Clicking the title of an already sorted column changes the sort direction of that column. If the GridView.sortingOptions.style property is INCLUSIVE, the columns are sorted in order, with the first clicked column as the priority. If it is REVERS, the columns are sorted in order, with the last clicked column as the priority. |
| Shift+Click a cell | If SelectionStyle is set to BLOCK, the selection of multiple consecutive cells will be modified. |
| Click a row group header | Expand or collapse the group. |
| Click a checkbox in a checkbar | Changes the selected checkboxes to checked. |
| Click a checkbar header | Changes all checkboxes in the checkbar to checked. |
| Ctrl (Windows), Command (Mac) +Click a cell | Multiple ranges can be selected when displayOptions.selectionMode is extended. |
Mouse Selection
If the SelectionStyle property is set to ROWS, holding down the Shift key while clicking on a row modifies the selection of multiple rows.
If you hold down the Shift key while clicking on a row, the selection includes all rows between the anchor row at the current row position before the click and the current row.
If the SelectionStyle property is set to BLOCK, holding down the left mouse button while moving the mouse cursor increases the selection of cells in the direction the mouse is moved.