AgGrid: How to blink cell in different color depending on change

Question

I'm using ag-grid-react like this:

import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

and declares it like this in render(some details removed for clarity):

return <div className="MarketGrid ag-theme-balham" >
    <AgGridReact domLayout='autoHeight'
        enableCellChangeFlash={true}
        rowSelection={'single'}
        onSelectionChanged={this.onSelectionChanged.bind(this)}
        onGridReady={this.onGridReady.bind(this)} />
    </div>;

the "enableCellChangeFlash" property works fine, and I know how to change the color of it, but what if I want to change the color depending on whether the new value is higher or lower than the previous?

My update code looks somewhat like this:

let row = this.gridApi.getRowNode(this.props.productIds.indexOf(id));
    for (var f in data) {
        row.setDataValue(f, data[f]);
    }
}

I guess I should set the cell style somewhere, but I'm not sure where.

UPDATE: According to this page https://www.ag-grid.com/javascript-grid-data-update/#flashing I should do this:

"If you want to override how the flash presents itself (eg change the background color, or remove the animation) then override the relevant CSS classes."

Anyone knows how to do this?

score 1 · Accepted Answer · answered Nov 05 '19 at 19:38

I almost got this now. The answer I found out is based on CSS. Set the classname for blinking/stop-blinking like:

return (<div key={Math.random()}
  className={some logic to set classname here, like "blink-red" or "blink-blue"}
  onAnimationEnd={() => this.setState({ fade: false })}
  > {this.state.value} </div>);

and use onAnimationEnd to set some state variable that will affect that logic.

Then add the fading logic like this to CSS:

.blink-red {
  animation: redtotransparent 3s ease 5s;
}

@keyframes redtotransparent {
  from {
    background-color: red;
    color: white;
  }
  to {
    background-color: transparent;
    color: black;
  }
}

It's still not perfect, but almost there. Changing the key makes React think the DOM has changed. When I come up with anything better I will add it here.

score -1 · Answer 2 · answered Aug 21 '19 at 16:18

-1

Click on the Flashing Cell option in the dropdown at the top and then you can choose a different color for an up change and a down change. you can also set how long it will flash for.

answered Aug 21 '19 at 16:18

Henders

112
2
9

1

can you elaborate? I have no dropdown with Flashing Cell option? How do I enable that? – Peter Andersson Aug 22 '19 at 07:59
1

@Henders - your answer is not accurate. The option you are seeing to click on the Flashing Cell is an Adaptable Blotter function. The Adaptable Blotter is a tool that sits on top of, and extends, the (brilliant and wonderful) ag-Grid, and this is one of the things it does (see https://demo.adaptableblotter.com/style/aggridflashingcelldemo/). So it is not available in 'pure' ag-grid. Peter - check out https://stackoverflow.com/questions/53770930/ag-grid-angular6-color-change-for-flashing-on-grid-refresh though Im not sure it fully answers you question – Jonny Wolfson Aug 23 '19 at 07:21
2

I understand. Adaptable Blotter seems like a great solution, but I guess it comes at a price. When the license cost isn't public its usually very high... Regarding the other SO question I know how to change the flash/blink color but I need to have it blink in different colors depending on the type of change, much like a stock market grid. – Peter Andersson Aug 25 '19 at 20:15

AgGrid: How to blink cell in different color depending on change

2 Answers2