slickgrid highlight all edited cells

Question

I have a simple slickgrid table with two cols, name and value, where value is editable. Now I want to highlight all changed values. For doing this I installed an onCellChange() handler, which adds a class modified to the currently modified cell. Unfortunately my code adds the class to the currently edited cell, but removes it from previously edited cells.

Here's part of the code

fieldView=new Slick.Data.DataView();
fieldView.setItems(rowData);
fieldView.reSort();
fieldGrid=new Slick.Grid(("#recordGrid"), fieldView, fieldColumns, editGridOptions);
fieldGrid.onCellChange.subscribe(function(e,args) {
    var modifiedCells={};
    modifiedCells[args.row] = {"value": "modified"};
    this.setCellCssStyles("modified", modifiedCells);
});

As said before this code only adds the 'modified' class to the last edited cell, but removes it from the previously edited cells. If I make modifiedCells global, only the first edited cell gets the 'modified' class.

What am I doing wrong? TIA

Answer 1

I never used SlickGrid, but i think the problem is on the key arg you passed to the setCellCssStyles(key, hash). As described in the documentation :

key - A string key. Will overwrite any data already associated with this key.

setCellCssStyles(key, hash) : Sets CSS classes to specific grid cells by calling removeCellCssStyles(key) followed by addCellCssStyles(key, hash). key is name for this set of styles so you can reference it later - to modify it or remove it, for example. hash is a per-row-index, per-column-name nested hash of CSS classes to apply.

Because your key is always the same, the call to removeCellCssStyles(key) removes your previous edition information. You could make this key unique based on the row and cell index :

this.setCellCssStyles("modified." + args.row + "." + args.cell, modifiedCells);

As said i never used SlickGrid, so there might be a better solution but this one seems to work ;)