This sample demonstrates the selection functionality of the Grid, you can select the type and mode from the desired button
Selection provides an interactive support to highlight the row or cell or column that you select. Selection can be done through 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 row selection in Grid.Cell - Enables cell selection in Grid.Both - Enables both row and cell selection in Grid. Clicking any cell will select both the row and cell
simultaneously
To 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, click the toolbar options to toggle between the selection type and selection mode available in Grid.
More information on the selection configuration can be found in this documentation section.