Issue while styling a cell on onCellValueChanged in ag-grid

Question

I am trying to style a cell with a particular background color if the 'oldValue' and 'newValue' are not equal in the 'onCellValueChanged' handler.

var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    onCellValueChanged: function(params) {
      if(params.oldValue !== params.newValue) {
        params.colDef.cellStyle = function(params) {
        return { backgroundColor: 'green'}; 
      }
    }
  }
 };

When I am editing the cell value to a new value, I don't see the style change being applied on tabbing out or clicking any other cell. Rather, I have to click back on the edited cell again and click outside after that to see the style being applied. I am not sure what is happening, can someone guide me here. I am also adding the demo

Have a look at the API documentation for refreshCells(). That should enable to force the change to appear immediately. — S. Baggy
params.api.redrawRows() is forcing the change to appear immediately. — C.O.G

Chanaka Weerasinghe Chanaka Weerasinghe · Accepted Answer · 2019-07-24T04:03:38

Bind it to your template

<ag-grid-angular  (cellValueChanged)="onCellValueChanged($event)">
</ag-grid-angular>

Issue while styling a cell on onCellValueChanged in ag-grid

1 Answers