Value Change Event and the Editing API

In this video we'll learn about the cell value changed event and the editing API.

Event: Cell Value Changed

After a cell has been changed with default editing (i.e. not your own custom cell renderer), the cellValueChanged event is fired. You can listen for this event in the normal way, or additionally you can add a onCellValueChanged() callback to the colDef. This is used if your application needs to do something after a value has been changed.

To try this out, we first need to add a prop to our AgGridReact component that refers to an event handler function we'll write next:

// App.js
// AgGridReact component props
onCellValueChanged={this.onCellValueChanged}

We can then write that event handler callback:

// App.js
onCellValueChanged = ({ data }) => {
   console.log(data);
};

This is where you'd call an API to save your data changes.

Editing API

The grid has the following API methods for editing:

• startEditingCell(params): Starts editing the provided cell. If another cell is editing, the editing will be stopped in that other cell. Parameters are as follows:
  • rowIndex: The row index of the row to start editing.
  • colKey: The column key of the column to start editing.
  • rowPinned: Set to 'top' or 'bottom' to started editing a pinned row.
  • keyPress, charPress: The keyPress and charPress that are passed to the cell editor.
• stopEditing(cancel): If the grid is editing then editing is stopped. Passing cancel=true will keep the cell's original value and passing cancel=false will take the latest value from the cell editor.
• getEditingCells(): If the grid is editing, returns back details of the editing cell(s). The result is an array of objects. If only one cell is editing (the default) then the array will have one entry. If multiple cells are editing (e.g. Full Row Edit) then the array contains all editing cells. (We don't see this one in the video.)

In the video, we create two buttons.

// App.js
<button type="button" onClick={this.startEditing}>
   Start Editing
</button>

We can then create a function. Let's sort the grid by amount descending and then start editing the first last name cell in the first row.

// App.js
startEditing = () => {
    this.gridApi.setSortModel([
      {
        colId: "amount",
        sort: "desc",
      },
    ]);
    this.gridApi.startEditingCell({
      rowIndex: 0,
      colKey: "lastName",
    });
  };

To stop editing, we first create a button:

// App.js
<button type="button" onClick={this.stopEditing}>
    Stop Editing
</button>

And then create its corresponding function:

// App.js
stopEditing = () => {
   this.gridApi.stopEditing();
 };

By default, stopEditing() will commit the edit in the same way that pressing enter does. To change this and cancel editing instead, we can pass a booelan as an argument to this function:

// App.js
stopEditing = () => {
   this.gridApi.stopEditing(true);
};

In the next video, we'll learn about custom cell editors.

Curious about the HTML snippets I use to create the buttons? It's called Emmet and it's built right in to Visual Studio Code.