This sample demonstrates the default functionality of the selection in Grid, which allows you to select row or cell or column through simple mouse down or keyboard interaction.
Order ID | Customer Name | Order Date | Freight | Shipped Date |
|---|---|---|---|---|
| 10248 | Paul Henriot | 7/4/1996 | $32.38 | 7/16/1996 |
| 10249 | Karin Josephs | 7/5/1996 | $11.61 | 7/10/1996 |
| 10250 | Mario Pontes | 7/8/1996 | $65.83 | 7/12/1996 |
| 10251 | Mary Saveley | 7/8/1996 | $41.34 | 7/15/1996 |
| 10252 | Pascale Cartrain | 7/9/1996 | $51.30 | 7/11/1996 |
| 10253 | Mario Pontes | 7/10/1996 | $58.17 | 7/16/1996 |
| 10254 | Yang Wang | 7/11/1996 | $22.98 | 7/23/1996 |
| 10255 | Michael Holz | 7/12/1996 | $148.33 | 7/15/1996 |
| 10256 | Paula Parente | 7/15/1996 | $13.97 | 7/17/1996 |
| 10257 | Carlos Hernández | 7/16/1996 | $81.91 | 7/22/1996 |
| 10258 | Roland Mendel | 7/17/1996 | $140.51 | 7/23/1996 |
| 10259 | Francisco Chang | 7/18/1996 | $3.25 | 7/25/1996 |
Selection provides an interactive support to highlight the row or cell or column that you select. Selection can be done through a simple
Mouse down or Keyboard interaction. To enable selection, set
allowSelection
as true.
Grid component supports two types of selection which can be set using
selectionSettings->type
property.
They are
Single - Enabled by default. Allows the user to select single row/cell/column at a time.Multiple - Allows the user to select more than one row/cell/column at a time.Also, supports three modes of selection which can be set using
selectionSettings->mode
property. They are
Row - Enabled by default. Enables the row selection in Grid.Cell - Enables the cell selection in Grid.Both - Enables both the row and cell selection in Grid. Clicking any cell will select both row and cell
simultaneouslyTo perform the column selection, enable the
selectionSettings->allowColumnSelection
property.
To perform the multi-selection, hold CTRL key and click the desired rows/cells/columns. To select range of rows/cells/columns, hold SHIFT key and click the rows/cells/columns.
While using the Grid in a touch device environment, there is an option for multi-selection through a single tap on the row and it will show a popup with the multi-selection symbol. Tap the icon to enable multi-selection in a single tap.
In this demo, multiple row selection is enabled, click any row to select.
More information on the selection configuration can be found in this documentation section.