ag react grid applyTransactionAsync api replace all column values instead of columns passed to update

Question

How can I retain the values of the column not passed to the update of applyTransactionAsync in ag-react grid.

Step 1: Add a new row

gridApi.applyTransactionAsync({add: {id:1, col1:1, col2:2, col3:3}});

Step 2: Update the col1

gridApi.applyTransactionAsync({update: {id:1, col1:10}});

Step 3: Update the col2

gridApi.applyTransactionAsync({update: {id:1, col2:9}});

AG Grid Row Data Output

{id:1, col2:9}

Expected output

{id:1, col1:10, col2:9, col3:3}

Answer 1

When you call update, all the data for the row has to be included. The grid will check for changes and only update the necessary fields. If you remove columns, the grid will understand that you want the data for them removed.

See the documentation here: https://www.ag-grid.com/javascript-data-grid/data-update-transactions/#example-updating-with-transaction (the updateItems method is relevant for you).

For a quick illustration of what you should do, I created this working example with steps 1, 2 and 3 as described above: https://plnkr.co/edit/iVT6dLozhTLU6HlP