Callback after update cell value programatically

Question

I have a case where I need to update grid cell value via "editable" cell and via external action (programatically). On every update (regardless the source) I would like to call a callback (API call to sync data with backend).

For update through editable cell the callback I am using is valueSetter.

Programatically I am updating a cell value using applyTransaction. However applyTransaction doesn't call valueSetter.

I have extracted exactly the case to show the problem:

https://codesandbox.io/p/sandbox/ag-grid-modules-tsp64f?file=%2Fsrc%2Findex.tsx

So my questions are:

1. What's the pattern to have a common callback for both cases?
2. Why applyTransaction is moving the row to the bottom of the table? (https://monosnap.com/file/dACiTbQ7wjj4aoBbZBwg5sRpgFOfQY)

Answer 1

To answer your questions:

1. The pattern I'd go for is to call your valueSetter on the column when you edit the cell via the button. You can do this by retrieving the column and executing the valueSetter on the column like this:

     const success = column.valueSetter({
       newValue: newValue,
       oldValue: oldValue,
       data: rowNode.data,
       node: rowNode,
       colDef: column,
       column: column,
       api: gridApi,
     });
   

2. Your getRowId function was always returning undefined. This function takes the parameter params from which you can then get your id like this:

     getRowId={(params) => {
       console.log(params.data.id);
       return params.data.id;
     }}
   

Demo.