ag Grid change cell color on Cell Value Change

Question

I am trying to change cell color when cell old value != cell new value in a grid.

I\'ve tried:

if (e.oldValue === e.newValue)    {   
    e.colDef.cellS         


        

Answer 1

Ag-grid does not have a built in feature to highlight edited cells. you can solve this in 2 ways.

1. Dynamically updating cell Style -

   onCellValueChanged(params) {
     if (params.oldValue !== params.newValue) {
         var column = params.column.colDef.field;
               params.column.colDef.cellStyle = { 'background-color': 'cyan' };
               params.api.refreshCells({
                   force: true,
                   columns: [column],
                   rowNodes: [params.node]
           });
     }}
   

2. Using a combination of cellClassRules, an edit flag and onCellValueChanged -

   • Define a css class for edited cell.
     .green-bg {background-color: olivedrab;}

   • Define cellClassRules for the column which applies style based on flag you update on edit. cellClassRules: { 'green-bg': (params) => { return params.data.isEdited} }

   • Then you set the flag in your onCellValueChanged something like this -

onCellValueChanged(params) {
          if (params.oldValue !== params.newValue) {
             params.data.isEdited = true; // set the flag
          }
          params.api.refreshCells(); //causes styles to be reapplied based on cellClassRules
        }