How to change styling of cells that has been edited in ag-Grid?

2
votes

I want to mark cells who has been edited so the user can see which cells have been touched and altered. I know there is a cell flash option, but that just changes the background colors for a bit. What I want is a background color change when an edit has been done.

Cannot seem to find any specific documentation on accessing for example the html element or the styling of affected cell.

Anyone got any ideas?

2
javascriptangularag-grid

2 Answers

1
votes

You can use ColDef.onCellValueChanged to detect if something changes and update the cell style accordingly using GridApi.refreshCells()

const columnDefs = [{
  headerName: "Athlete",
  field: "athlete",
  onCellValueChanged: this.markAsDirty
},...]

...

private markAsDirty(params: ICellRendererParams) {
  params.colDef.cellClass = (p) =>
    p.rowIndex.toString() === params.node.id ? "ag-cell-dirty" : "";

  params.api.refreshCells({
    columns: [params.column.getId()],
    rowNodes: [params.node],
    force: true // without this line, the cell style is not refreshed at the first time
  });
}

In your css file

:host ::ng-deep .ag-cell-dirty {
  background-color: rgba(255, 193, 7, 0.5) !important;
}

You may also want to use defaultColDef if you want this behavior applied to all columns

this.gridOptions = {
  defaultColDef: {
    editable: true,
    onCellValueChanged: this.markAsDirty
  },
};

Live Demo

Edit AgGrid Mark Dirty On Editing

-1
votes

I did this on a project I was working on.

There is a cellClass property that you can define in your column definitions (https://www.ag-grid.com/javascript-grid-cell-styles/) and it can take a callback function with params: CellClassParams.

So try doing:

cellClass: (params: CellClassParams) => {
  // you need to have a handle on the original untouched data
  // See if the original value does not equal the modified value in params
  // For shortness, I will write pseudocode
   if (originalValue !== modifiedValue) {
     return 'ag-cell-was-modified';
   }
}

If many columns are editable, you may want to use a re-usable function for cellClass for each column.

That should apply the class ag-cell-was-modified conditionally whether the cell was modified or not and in your style.scss or main stylesheet, you can add:

.ag-cell-was-modified {
  background: red;
}

Of course, if you are using SASS, you can place this class definition in somewhere more appropriate.