Selection Events and the API

One of the really nice things about ag-Grid is that it provides a powerful API for nearly every feature. Selection is no different, so let's learn about the selection API as well as the events the grid fires when selecting and deselecting rows.

Selection Events

The grid fires two events when selection changes to which we can attach handlers:

• rowSelected: Called when a 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: Called when one or more rows are selected or deselected. Use the grid API to get a list of selected nodes if you want them.

We can see these events in action by creating functions to handle them when they fire:

// App.js
// Put these methods in the class.
onRowSelected = event => {
   console.log(event);
};

onSelectionChanged = event => {
   console.log(event);
};

And then passing them as props to our grid component:

// App.js
// AgGridReact component props
onRowSelected={this.onRowSelected}
onSelectionChanged={this.onSelectionChanged}

Note that onRowSelected fires when a row is selected and deselected.

The Selection API

To select rows programmatically, use the node.setSelected() method. This method takes two parameters:

• selected: Set to true to select, false to un-select
• clearSelection (optional): For selection only. If true, any other selected nodes will be deselected. Use this if you do not want multi-selection and want this node to be exclusively selected.

The grid API also has the following methods for selection:

• api.selectAll(): Select all rows in the grid, regardless of filtering.
• api.deselectAll(): Un-select all rows, regardless of filtering.
• api.selectAllFiltered(): Select all filtered rows in the grid.
• api.deselectAllFiltered(): Un-select all filtered rows.
• api.getSelectedNodes(): Returns a list of all the selected row nodes, regardless of filtering.

In the video, we make buttons to test these out:

<button type="button" onClick={() => this.gridApi.selectAll()}>
  Select All
</button>
<button type="button" onClick={() => this.gridApi.deselectAll()}>
  Deselect All
</button>
<button type="button" onClick={() => this.gridApi.selectAllFiltered()}>
  Select All Filtered
</button>
<button   type="button" onClick={() => this.gridApi.deselectAllFiltered()}>
  Deselect All Filtered
</button>
<button type="button" onClick={this.selectCreditCards}>
  Select Credit Cards
</button>

The selectCreditCards method is a custom function that selects all of the credit card accounts using the forEachNode function along with the node's setSelected function:

selectCreditCards = () => {
  this.gridApi.forEachNode(function (node) {
    node.setSelected(node.data.accountName === "Credit Card Account");
  });
};

Note: I use Emmet to create these buttons. It's built into VS Code, but you do need to enable it for JSX by adding "javascriptreact" to Emmet's included languages. The docs for Emmet show you how to do this.

Up next, we'll learn about one of ag-Grid's enterprise features: range selection.