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.