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

Panit Wechasil

This formatter is useful so I'll add it together with the TR-Grid in the next release so people can just use it as a built-in formatter.

Taghrid Yaghi

Thank you Panit. Worked like a charm!

Panit Wechasil

Taghrid, This is a better approach. I created this as a reusable class. [
http://plnkr.co/edit/uQWyjgcQV3UqPIXjLHsG?p=preview](http://plnkr.co/edit/uQWyjgcQV3UqPIXjLHsG?p=preview) I created this hub page for storing the collection of formatter for people to reuse [
https://thehub.thomsonreuters.com/docs/DOC-999357](https://thehub.thomsonreuters.com/docs/DOC-999357)