AgGridReact stop editing and restore old value

Question

I have a react component with an AgGridReact which has an editable column. I want inside the onCellValueChanged event to check if the new value meets some conditions, and if not stop and restore the old value.

I've read that there is an api stopEditing:

https://www.ag-grid.com/documentation/javascript/cell-editing/#editing-api

Here it says:

"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."

So I've tried using it. Just to test it out I did like this:

const onGridReady = params => 
{
  gridApi.current = params.api;
}

const onCellValueChanged = async (event) => 
{
  gridApi.current.stopEditing(true);
  return;
}

I expected that every time I'll try to edit, no matter what, as soon as I click enter to finish editing, the old value will be restored but it just keeps the new value. The event itself is set properly and it is being invoked.

What am I doing wrong here? And if it's not the way to restore the previous value, what is?

ViqMontana ViqMontana · Accepted Answer · 2021-01-14T17:39:27

stopEditing is called on the gridApi. By calling stopEditing in your onCellValueChanged, it's too late, the value has already changed.

Here's what you can do instead:

Use a valueSetter for your column. This way, you can accept only certain values and reject all others. For example, this valueSetter will only update the value if the newly entered value is "accept":

function myValuSetter(params) {
    if (params.newValue != "accept") {
      return false;
    }
    params.data.make = params.newValue
    return true;
  }

Demo.

AgGridReact stop editing and restore old value

1 Answers