Single Row Selection
Single Row selection can be enabled by setting the enabled
prop of the GridSelectableSettings
to true
and its mode
prop to single
.
The following example demonstrates how to enable the single-row selection of the Grid where the select
state is handled internally by the Grid.
Checkbox Selection
The Grid provides both checkbox and row-click selection options which can be applied to single or multiple records.
To configure the checkbox selection:
-
Configure the
GridSelectableSettings
as follows:jsxselectable={{ enabled: true, drag: false, cell: false, mode: 'single' }}
-
Handle the
GridSelectionChangeEvent
and theonHeaderSelectionChange
events which will be fired once the user clicks a checkbox. -
Update the built-in
select
in the events handled above.
The following example demonstrates how to implement multiple selection both on row click and with checkboxes.