Add Css style to edited cell in slickgrid - styling

Question

I'm just a beginner and I couldn't figure it out how to add a css class to edited cell in slickgrid. I've searched and didn't get the answer.
SlickGrid styling after cell edit
Assigning CSS Style to Slickgrid Cells
I've got these steps to do:
store in a variable the edited by using grid.onCellChange event
add css style using grid.setCssCellStyles or grid.addCellCssStyle.
(or) by building a custom formatter.
Could somebody provide the sample code for this?

Answer 1

I implemented this exactly as suggested in the first referenced link. The second argument passed to SlickGrid.setCellCssStyles() is a hash keyed by row numbers, with the value being another hash keyed by column id and its value being the css class.
The code as follows:
<style type="text/css">
.slick-cell-modified {
background-color: yellow;
}
</style>
<script>
var modifiedCells = {};
grid.onCellChange.subscribe(function (e, args) {
if (!modifiedCells[args.row]) {
modifiedCells[args.row] = {};
}
modifiedCells[args.row][this.getColumns()[args.cell].id] = "slick-cell-modified";
this.setCellCssStyles("modified", modifiedCells);
// ...update data view
});
</script>
Be sure to clear the cell css style after saving so the highlighted style don't stick around.
function saveChanges() {
// ...
grid.removeCellCssStyles("modified");
modifiedCells = {};
}