This sample demonstrates the selection feature in Grid, which allows you to select a row or cell or column through simple mouse down or keyboard interaction. You can change type and mode from the properties panel.
Enable Column Selection
Selection provides an interactive support to highlight the row or cell that you select.
Selection can be done through a simple
Mouse down or Keyboard interaction. To enable selection, set
allowSelection as true.
Grid supports two types of selection which can be set using the
selectionSettings->type property. They are,
Single- Enabled by default. Allows the user to select a single row/cell 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 the
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 the row and cell simultaneously.
To perform the column selection, enable the
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, select the selection type and selection mode from the properties panel to do the selection.