LiveLoveApp logo

Persisting

Persisting Edits

We have several options for persising data:

  • By default the field bound to the rowData is updated.
  • The valueSetter function.
  • The Grid API onCellValueChanged event
  • The Grid API onCellEditRequest event

valueSetter function

  • Data is managed by the grid.
  • Inverse of the valueGetter function.
  • Invoked by AG Grid with the ValueSetterParams<TData> params object.
  • Return true to indicate that the value was updated successfully and to refresh the cell.
  • Return false to indicate that the value was not updated.

Let's look at an example:

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      headerName: 'Customer Name',
      field: 'customer.name',
      editable: true,
      valueSetter: (params) => {
        if (params.oldValue === params.newValue) {
          return false;
        }
        props.onNameChange(params.data);
        return true;
      },
    },
  ]);
}

A few things to note:

  • First, we check if the oldValue strictly equals the newValue, and if so, we return false indicating that the cell does not need to be refreshed.
  • Next, we call an onNameChange callback function to notify the parent component that the value has changed.
  • We return true to indicate that the grid should refresh the cell.

onCellValueChanged event

  • Data is managed by the grid.
  • The onCellValueChanged event is emitted when a cell value has been updated after a user edit (excluding pasting from the clipboard).
  • We'll use the onCellValueChanged prop binding on the <AgGridReact> component.
  • The event emits the CellValueChangedEvent<TData = any, TValue = any> object containing the oldValue and newValue.

Let's see an example.

export default function Grid() {
  return (
    <div className="ag-theme-quartz-auto-dark">
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        onCellValueChanged={(event: CellValueChangedEvent) => {
          console.log(
            'Old Value:',
            event.oldValue,
            'New Value:',
            event.newValue
          );
        }}
      ></AgGridReact>
    </div>
  );
}

In this example:

  • The cell data is managed external to the grid.
  • First, we use the onCellValueChanged prop binding to invoke a callback function with the CellValueChangedEvent object.
  • The callback function logs out the old value and the new value.

onCellEditRequest event

  • Event is emitted when the cell value has changed after editing.
  • The grid must use the read-only mode.
  • We'll use the onCellEditRequest prop binding on the <AgGridReact> component.
  • The event emits the CellEditRequestEvent<TData = any> object.

Let's look at an example:

export default function Grid() {
  return (
    <div className="ag-theme-quartz-auto-dark">
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        getRowId={getRowId}
        readOnlyEdit={true}
        onCellEditRequest={(event: CellEditRequestEvent) => {
          console.log(
            'Old Value:',
            event.oldValue,
            'New Value:',
            event.newValue
          );
        }}
      ></AgGridReact>
    </div>
  );
}

Let's review:

  • First, we use the getRowId prop binding to provide a reference to a function that tracks the unique row key/id.
  • Next, we enable the read-only edit mode using the readOnlyEdit prop binding and set the value to true.
  • The onCellEditRequest prop binding to handle the cellEditRequest event
  • The onCellEditRequest callback is invoked with the CellEditRequestEvent<TData> object.
  • In this example, we're just logging out the data.

But, how is the cell value updated?

Good question!

  • Because we only log out the data, the cell value is not updated.
  • We need to use a strategy for updating the cell value.

Strategies for updating the cell value when using the onCellEditRequest event:

  1. In conjunction with the getRowId function, use immutable data (such as Redux).
  2. Use the Grid API setRowData() method.
  3. Apply a transaction via the Grid API.