Ag-grid highlight cell logic not working properly

Question

I created an editable grid using ag-grid and I need to highlight the cells that were changed. I added the following code:

    (cellValueChanged)="onDemandsCellValueChanged($event)"

And the method:

    onDemandsCellValueChanged(params): void {
    if (params.oldValue === params.newValue) {
      return;
    }

    params.data.modified = true; // add modified property so it can be filtered on save

    const column = params.column.colDef.field;
    params.column.colDef.cellStyle = { 'background-color': '#e1f9e8' }; // highlight modified cells
    params.api.refreshCells({
      force: true,
      columns: [column],
      rowNodes: [params.node],
    });
  }

The cell is highlighted but when I scroll up and down all the cell from that column are highlighted.

You can check the behavior on stackblitz.

Also if you have a better way of doing this I'm open to new solutions.

Answer 1

I understand your problem You can achieve what you want like this - you should use cellStyle in your column definition as showing in docs and for this code is below

cellStyle: params => {
      if (
        params.data["modifiedRow" +
                     params.node.rowIndex +"andCellKey"+ 
                     params.column.colDef.field]
      ) {
        return { backgroundColor: "#e1f9e8" };
      } else {
        return null;
      }
    },

and after that in this function onDemandsCellValueChanged please add and modify this property modified as true and change your function like this as shown below

onDemandsCellValueChanged(params): void {
    if (params.oldValue === params.newValue) {
      return;
    }
    const column = params.column.colDef.field;
    params.data["modifiedRow" + params.rowIndex + "andCellKey" + column] = true;
    params.api.refreshCells({
      force: true,
      columns: [column],
      rowNodes: [params.node]
    });
  }

Now it should work even when you scroll. Here is complete working Example on stackblitz