Vue Data GridRow Selection API Reference

Selection API Reference for Single and Multi-Row Selection

Configuration API

Single Row Mode

'singleRow'

boolean | 'suppressDeselection' | 'suppressSelection'

default: false

Modifies the selection behaviour when clicking a row, or pressing Space while focusing a row.

boolean | CheckboxSelectionCallback

default: false

Set to true or return true from the callback to render a selection checkbox.

boolean

default: false

Set to true to hide a disabled checkbox when row is not selectable and checkboxes are enabled.

IsRowSelectable

Callback to be used to determine which rows are selectable. By default rows are selectable, so return false to make a row non-selectable.

boolean

When enabled and a row is selected, the copy action should copy the entire row, rather than just the focused cell

Multi-Row Mode

'multiRow'

GroupSelectionMode

default: 'self'

Determine group selection behaviour

SelectAllMode

default: 'all'

Determines how "select all" behaviour works. This controls header checkbox selection.

boolean

default: false

If true or the callback returns true, a 'select all' checkbox will be put into the header.

boolean

default: false

Set to true to allow multiple rows to be selected using single click.

boolean | 'suppressDeselection' | 'suppressSelection'

default: false

Modifies the selection behaviour when clicking a row, or pressing Space while focusing a row.

boolean | CheckboxSelectionCallback

default: false

Set to true or return true from the callback to render a selection checkbox.

boolean

default: false

Set to true to hide a disabled checkbox when row is not selectable and checkboxes are enabled.

IsRowSelectable

Callback to be used to determine which rows are selectable. By default rows are selectable, so return false to make a row non-selectable.

boolean

When enabled and a row is selected, the copy action should copy the entire row, rather than just the focused cell

Selection Events

There are two events with regards to selection, illustrated in the example below:

RowSelectedEvent

Row is selected or deselected. The event contains the node in question, so call the node's isSelected() method to see if it was just selected or deselected.

SelectionChangedEvent

Row selection is changed. Use the grid API getSelectedNodes() or getSelectedRows() to get the new list of selected nodes / row data.

The example below has configured alerts to be displayed on both these events firing. Click a row to see an illustration of the events.

Node Selection API

To select rows programmatically, use the node.setSelected(params) method.

Function

Select (or deselect) the node.

newValue - true for selection, false for deselection.
clearSelection - If selecting, then passing true will select the node exclusively (i.e. NOT do multi select). If doing deselection, clearSelection has no impact.

Function

Returns:

true if node is selected.

false if the node isn't selected.

undefined if it's partially selected (group where not all children are selected).

// set selected, keep any other selections
node.setSelected(true);

// set selected, exclusively, remove any other selections
node.setSelected(true, true);

// un-select
node.setSelected(false);

// check status of node selection
const selected = node.isSelected();

The isSelected() method returns true if the node is selected, or false if it is not selected. If the node is a group node and the group selection is set to 'children', this will return true if all child (and grandchild) nodes are selected, false if all unselected, or undefined if a mixture.

Grid Selection API

The grid API has the following methods for selection:

Function

Select all rows, regardless of filtering and rows that are not visible due to grouping being enabled and their groups not expanded.

Function

Clear all row selections, regardless of filtering.

Function

Select all filtered rows.

Function

Clear all filtered selections.

Function

Returns an unsorted list of selected nodes. Getting the underlying node (rather than the data) is useful when working with tree / aggregated data, as the node can be traversed.

Function

Returns an unsorted list of selected rows (i.e. row data that you provided).

Function

Set all of the provided nodes selection state to the provided value.

If you want to select only the filtered rows, you could do this using the following:

// loop through each node after filter
const nodes = [];
api.forEachNodeAfterFilter(node => {
   nodes.push(node);
});
api.setNodesSelected({ nodes, newValue: true });

Next up

Continue to the next section to learn about Cell Selection.