I had a request to highlight rows which have been changed in a SlickGrid, a simple task one might think. It turns out that it is indeed quite easy. However, this is SlickGrid we’re talking about so as usual the relevant documentation is somewhat difficult to track down.

All you really need to do is mark a row as ‘dirty’ and apply a CSS class to the row accordingly. First up that requires a CSS class to apply, I called mine dirty and it sets the row’s background colour:

.dirty {
    background-color: #FF6666 !important;
}

You apply the CSS class to a row using SlickGrid’s getItemMetadata function (note I’m using a DataView):

dataView.getItemMetadata = function (row) {
    // Get row
    var dvitem = dataView.getItem(row);
    // Make sure row is defined (important if using the 'enableAddRow' option)
    if (dvitem != undefined) {
        // Check if row is Dirty
        if (dvitem.isDirty == true) {
            // If row is dirty add CSS class
            return { 'cssClasses': 'dirty' };
        }
    }
};

You also need to mark a row as dirty when it changes, you do this with the onCellChange event:

grid.onCellChange.subscribe(function (e, args) {
    // Get row
    var dvitem = dataView.getItem(args.row);
    // Set to dirty
    dvitem.isDirty = true;
    // Update the DataView
    dataView.updateItem(dvitem.id, dvitem);
});

That’s all there is to it. Mark a row as dirty when one of it’s cells changes, apply CSS, job done.