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 class GridComponent {
  columnDefs = [
    {
      headerName: 'Customer Name',
      field: 'customer.name',
      editable: true,
      valueSetter: (params) => {
        if (params.oldValue === params.newValue) {
          return false;
        }
        this.change.emit(params.data);
        return true;
      }
    }
  ] as ColDef<RowData>[];
}

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 use an EventEmitter 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 cellValueChanged output binding on the <ag-grid-angular> component.
• The event emits the CellValueChangedEvent<TData = any, TValue = any> object containing the oldValue and newValue.

Let's see an example.

@Component({
  selector: 'app-grid',
  standalone: true,
  imports: [AgGridModule],
  template: `
    <ag-grid-angular
      class="ag-theme-material"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
      (cellValueChanged)="onCellValueChanged($event)"
    ></ag-grid-angular>
  `
})
export class GridComponent {
  onCellValueChanged({ data }) {
    this.store.dispatch(accountUpdate({ data }));
  }
}

In this example:

• The cell data is managed external to the grid.
• First, we use the cellValueChanged output binding syntax and invoke the onCellValueChanged() method with the CellValueChangedEvent object.
• The onCellValueChanged destructures the CellValueChangedEvent object and dispatches an action to update the account.

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 cellEditRequest output binding on the <ag-grid-angular> component.
• The event emits the CellEditRequestEvent<TData = any> object.

Let's look at an example:

@Component({
  selector: 'app-grid',
  standalone: true,
  imports: [AgGridModule],
  template: `
    <ag-grid-angular
      class="ag-theme-material"
      [columnDefs]="columnDefs"
      [getRowId]="getRowId"
      [readOnlyEdit]="true"
      [rowData]="rowData"
      (cellEditRequest)="onCellEditRequest($event)"
    ></ag-grid-angular>
  `
})
export class GridComponent {
  onCellEditRequest({ data }) {
    console.log(data);
  }
}

Let's review:

• First, we use the getRowId input 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 input binding and set the value to true.
• The cellEditRequest output binding invokes the onCellEditRequest() method when the event is emitted.
• The onCellEditRequest method 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 NgRx).
2. Use the Grid API setRowData() method.
3. Apply a transaction via the Grid API.