Search

Vue Data GridRow Selection API Reference

Selection API Reference for Single and Multi-Row Selection

Configuration API

Single Row Mode

mode
'singleRow'
'singleRow'
enableClickSelection
boolean | 'enableDeselection' | 'enableSelection'
default: false
Modifies the selection behaviour when clicking a row, or pressing Space while focusing a row.
checkboxes
boolean | CheckboxSelectionCallback
default: true
Set to true or return true from the callback to render a selection checkbox.
checkboxLocation
CheckboxLocation
default: 'selectionColumn'
Configure where checkboxes are displayed. Choosing 'selectionColumn' displays checkboxes in a dedicated selection column. Choosing 'autoGroupColumn' displays checkboxes in the autoGroupColumn. This applies to row checkboxes and header checkboxes.
hideDisabledCheckboxes
boolean
default: false
Set to true to hide a disabled checkbox when row is not selectable and checkboxes are enabled.
isRowSelectable
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.
copySelectedRows
boolean
When enabled and a row is selected, the copy action should copy the entire row, rather than just the focused cell
enableSelectionWithoutKeys
boolean
default: false
Set to true to allow (possibly multiple) rows to be selected and deselected using single click or touch.

Multi-Row Mode

mode
'multiRow'
'multiRow'
groupSelects
GroupSelectionMode
default: 'self'
Determine group selection behaviour
selectAll
SelectAllMode
default: 'all'
Determines how "select all" behaviour works. This controls header checkbox selection.
headerCheckbox
boolean
default: true
If true a 'select all' checkbox will be put into the header.
enableClickSelection
boolean | 'enableDeselection' | 'enableSelection'
default: false
Modifies the selection behaviour when clicking a row, or pressing Space while focusing a row.
checkboxes
boolean | CheckboxSelectionCallback
default: true
Set to true or return true from the callback to render a selection checkbox.
checkboxLocation
CheckboxLocation
default: 'selectionColumn'
Configure where checkboxes are displayed. Choosing 'selectionColumn' displays checkboxes in a dedicated selection column. Choosing 'autoGroupColumn' displays checkboxes in the autoGroupColumn. This applies to row checkboxes and header checkboxes.
hideDisabledCheckboxes
boolean
default: false
Set to true to hide a disabled checkbox when row is not selectable and checkboxes are enabled.
isRowSelectable
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.
copySelectedRows
boolean
When enabled and a row is selected, the copy action should copy the entire row, rather than just the focused cell
enableSelectionWithoutKeys
boolean
default: false
Set to true to allow (possibly multiple) rows to be selected and deselected using single click or touch.

Selection Events

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

rowSelected
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.
selectionChanged
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.

setSelected
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.
isSelected
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:

    selectAll
    Function
    Select all rows. By default this ignores filtering, expansion and pagination settings. Pass the appropriate select all mode as an argument in order to select only rows that satisfy the filter, or those rows on the current page.
    deselectAll
    Function
    Clear all row selections. By default this ignores filtering, expansion and pagination settings. Pass the appropriate select all mode as an argument in order to select only rows that satisfy the filter, or those rows on the current page.
    getSelectedNodes
    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.
    getSelectedRows
    Function
    Returns an unsorted list of selected rows (i.e. row data that you provided).
    setNodesSelected
    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.