Single Row Selection

Updated on Aug 14, 2026

Enable single-row selection by setting the enabled prop of GridSelectableSettings to true and its mode prop to single.

vue

<Grid :selectable="{ enabled: true, mode: '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.

Loading ...

Checkbox Selection

The Grid supports single-row selection through checkboxes and row clicks.

To configure the checkbox selection:

1. Configure the GridSelectableSettings as follows:

   html

   <Grid
       :selectable="{
           enabled: true,
           drag: false,
           cell: false,
           mode: 'single'
       }"
   >

2. Add a column with columnType set to checkbox.

3. Bind the select prop and update it in the selectionchange and headerselectionchange event handlers.

The following example demonstrates single-row checkbox selection with controlled state management.

Loading ...

Persisting Checkbox Selection

The select state object maps dataItemKey values to booleans, so you can serialize it with JSON.stringify and store it in localStorage. When initialized, the example reads the saved selection from storage and passes it to the select prop.

The following example demonstrates this pattern. Use the Save Selection button to write the current selection to localStorage, and Load Selection to read it back. A saved selection also persists after a page refresh.

Loading ...

Suggested Links

• Grid API Reference
• Grid API Index