2

I am using ag-grid to display stock prices. These prices get updated at real time through a feed.

  • I am using gridApi.updateRowData() to update rows accordingly.
  • And gridApi.flashCells() to flash whenever there are updates.
  • I have set enableCellChangeFlash="true" in the html.

This setup is working fine. The rows flash when there are changes in data.

My requirement is if the incoming price is below a threshold price, i need the flash color to be red, and if its above threshold price, the flash color to be green.

How can I achieve this?

un.spike
  • 4,857
  • 2
  • 18
  • 38
Ranjeeth Rao
  • 155
  • 1
  • 10

1 Answers1

0

Basically, you can override styles the default flash-color on your case

.ag-theme-balham .ag-cell-data-changed {
    background-color: red !important;
}

Another possible way is to use an existing approach:

agAnimateShowChangeCellRenderer: The previous value is temporarily shown beside the old value with a directional arrow showing increase or decrease in value. The old value is then faded out.

agAnimateSlideCellRenderer: The previous value shown in a faded fashion and slides, giving a ghosting effect as the old value fades and slides away.

cellRenderer: "agAnimateShowChangeCellRenderer"

and the third one is to create own, custom cellRenderer - but, it would be a complicated solution I suppose.

Community
  • 1
  • 1
un.spike
  • 4,857
  • 2
  • 18
  • 38
  • 1
    Thanks @un-spike for your comment. However, overriding default style will not help for me because I want it conditionally. Iverriding would make it default red. I want red only if the price drops down. Else it should be green. Do you know of any such trick? Also "agAnimateShowChangeCellRenderer" will animate the cell only. I would need the entire row to be flashed with the respective color. – Ranjeeth Rao Oct 10 '18 at 18:18