ag Grid change cell color on Cell Value Change

0
votes

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.cellStyle = function(e) {return { backgroundColor: 'green' };
}

But when save is hit or data is reloaded, it changes the column color to green.

1
reactjsag-grid
it is unclear from this snippet. you probably need to use api.refreshCells() – Pratik Bhat
onCellValueChanged = e => { console.log(e); // access the entire event object e.data.modified = true; if (e.oldValue === e.newValue) { e.colDef.cellStyle = function(e) { return { backgroundColor: 'green' }; }; } } I need to change the color of cell which has changed value. – Tulika

1 Answers

2
votes

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
        }