Selection API Reference for Single and Multi-Row Selection
Configuration API
Single Row Mode
'singleRow' |
Modifies the selection behaviour when clicking a row. Choosing 'enableSelection' allows selection of a row by clicking the row itself. Choosing 'enableDeselection' allows deselection of a row by CTRL-clicking the row itself. Choosing true allows both selection and deselection of a row by clicking. Choosing false prevents rows from being selected or deselected by clicking. |
Set to true or return true from the callback to render a selection checkbox. |
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. |
Set to true to hide a disabled checkbox when row is not selectable and checkboxes are enabled. |
Callback to be used to determine which rows are selectable. By default rows are selectable, so return false to make a row non-selectable.
|
When enabled and a row is selected, the copy action should copy the entire row, rather than just the focused cell
|
Set to true to allow (possibly multiple) rows to be selected and deselected using single click or touch. |
Multi-Row Mode
'multiRow' |
Determine group selection behaviour |
Determines how "select all" behaviour works. This controls header checkbox selection. |
If true a 'select all' checkbox will be put into the header. |
Modifies the selection behaviour when clicking a row. Choosing 'enableSelection' allows selection of a row by clicking the row itself. Choosing 'enableDeselection' allows deselection of a row by CTRL-clicking the row itself. Choosing true allows both selection and deselection of a row by clicking. Choosing false prevents rows from being selected or deselected by clicking. |
Set to true or return true from the callback to render a selection checkbox. |
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. |
Set to true to hide a disabled checkbox when row is not selectable and checkboxes are enabled. |
Callback to be used to determine which rows are selectable. By default rows are selectable, so return false to make a row non-selectable.
|
When enabled and a row is selected, the copy action should copy the entire row, rather than just the focused cell
|
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:
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. |
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 messages to be logged to the developer console on both these events firing. Click a row while the developer console is open to see an illustration of the events.
Node Selection API
To select rows programmatically, use the node.setSelected(params) method.
Select (or deselect) the node.
|
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:
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. |
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. |
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. |
Returns an unsorted list of selected rows (i.e. row data that you provided). |
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.