CODEWITHSUNDEEP
angularag-gridag-grid-angular
Ana_30
Ana_30

Reputation: 375

Ag-grid. Change Row Color After Cell Value Is Changed

When a cell is updated, I would like the row to change color.

I have been able to update the cell color but not the row color

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

Upvotes: 0

Views: 2432

Answers (2)

Patrick Desjardins
Patrick Desjardins

Reputation: 140993

As of 2023, it is possible to provide to the grid a cellFlashDelay and cellFadeDelay to configure the behavior when a cell flash for cells that has a column definition sets with enableCellChangeFlash: true.

For your particular case where you want specific row to be selected you can select the row desired by index and call the flashCells function which also allow provide the fade delay and flash delay.

// Add this in your event to flash:
const row = gridRef.current.api.getDisplayedRowAtIndex(0);
gridRef.current!.api.flashCells({
      rowNodes: [row],
      flashDelay: 5000,
      fadeDelay: 1000,
});

//...
const gridRef = useRef<AgGridReact>(null);
<AgGridReact
    ref={gridRef}
/>

For the style, you can override the css variable --ag-value-change-value-highlight-background-color. However, that is limited to the background color and not the foreground color. Hence, you can override the CSS using .ag-cell.ag-cell-not-inline-editing.ag-cell-normal-height.ag-cell-value.ag-cell-data-changed and set the color and background-color

Upvotes: 0

Rohan
Rohan

Reputation: 71

gridOptions.getRowStyle = function(params) {
   if (params.node.rowIndex === 'the index of row you want to change color ') {
      return { background: 'red' }
   }
}

Upvotes: 2

Related Questions