TR Composite Grid and Cell Blinking

Taghrid Yaghi

I am trying to implement the Cell Blinking feature on my Composite Grid.

My Composite Grid displays realtime data so I am using the example provided under EikonWebUI under Realtime Market Data. However, I want to implement the Cell Blinking feature that exists in the Core Grid. I checked the Core Grid Example and it shows a plugin called "CellBlinking" that is used. So I added the following to my grid:

var cbp = grid.getCoreGrid().loadPlugin("CellBlinking");
var blinker = cbp.getDefaultBlinker();
blinker.setBgColors("green", "red", "white"); // Up, down, no-change colors
blinker.setTextColors("black", "black", "black"); // Up, down, no-change colors

Is there any additional thing I should add? Because this is not working. I can't see any blinking cell although data is always changing.

Panit Wechasil

Hi Taghrid,

Here's a quick solution. You can create a formatter that do the flashing and add to the formatter property of each column definition.

var realtimeFlasherFormatter = {
bind: function(rowIndex, columnIndex, value, cell, columnDef, dataRow, dataTable) {
if (value !== undefined && value !== null && value.raw !== null && value.raw !== undefined) {
if (cell.lastValue) {
var flashColor = null;
var fontColor = null;
if (rowIndex == cell.lastValue.rowIndex) {
if (cell.lastValue.value < value.raw) {
flashColor = "#39c46e";
fontColor = "white";
} else
if (cell.lastValue.value > value.raw) {
flashColor = "#f5475b";
fontColor = "white";
}
}
cell.setStyle("color", fontColor);
cell.setStyle("background-color", flashColor);
setTimeout(function() {
cell.setStyle("color", null);
cell.setStyle("background-color", null);
}, 200);
} else {
cell.lastValue = {
rowIndex: rowIndex,
value: value.raw
}
}
cell.lastValue.rowIndex = rowIndex;
cell.lastValue.value = value.raw;
} else {
cell.setStyle("color", null);
cell.setStyle("background-color", null);
}
}
}

In you column definition, you can pass in this formatter for example

{id: "c7", title: "Pct.Change", field: "PCTCHNG", sortBy: "PCTCHNG", formatter: [realtimeDataFormatter, realtimeFlasher]}

Formatter can be passed as array and please refer to realtimeDataFormatter in the Realtime Market Data sample of CompositeGrid in Eikon Web UI