I have a Handsontable which I'm programmatically making changes to. Is it possible to highlight cells that have changed for a fixed time period?
EDIT: e.g. for a numeric field, I would like to be able to highlight a cell in green if the new value is higher than the old value and in red for the opposite case. Then after a short period of time allow the highlighting to disappear.
What you seem to be wanting to do is add a customRenderer
to your cells and do some custom validation on them. I suggest you read up on both of these topics because the documentation has plenty of information to help you understand how to do the red/green rendering. For the timed aspect, this is simple JS logic that could go as follows:
Realistically, you shouldn't have thousands of these at the same time but even so, this solution should work alright, efficiency-wise. What we'll do is create a map to store validated cells. Upon rendering, you will check this map and color only if the cell is in the map. We'll be using mpusarla
's answer to achieve part of the behavior.
Logic
Define var validatedCells = {}
as your map of validated cells with coordinates as the keys and color as the values.
Start by creating your validation callback. In here, make sure to add/remove the cell from validatedCells
when necessary. Now, your custom renderer should be using this map to color green/red depending on the value of the validation. It would be something like this:
var possibleColor = validatedCells[[row,col]];
if (possibleColor) {
td.style['background-color'] = possibleColor;
}
This would be enough to do coloring only. Now for the timeout, what you should do is immediately after your validator sets a cell in validatedCells
, create a timeout to remove the value after some amount of time:
validatedCells[[row,col]] = 'green';
setTimeout(function() {
delete validatedCells[[row,col]];
}, 1000); // deletes it after 1000 millisecs
That should be it!