How do I add a css class to particular rows in slickGrid?

Question

I've searched everywhere to find out how to add a class to a particular row in slickgrid. It looks like there used to be a rowCssClasses property but it's gone now. Any help on this would be extremely appreciated.

Update: I figured it out using the getItemMetadata...so before you render, you have to do something like this:

dataView.getItemMetadata = function (row) {
    if (this.getItem(row).compareThis > 1) {
        return {
            'cssClasses': 'row-class'
        };
    }
};

That will inject that 'row-class' into the row that matches the if statement. It seems that this getItemMetadata function doesn't exist until you put it there and slickGrid checks to see if there's anything in there. It makes it kind of difficult to figure out it's options but if you search for getItemMetadata in the slick.grid.js file you should find some hidden treasures! I hope this helps someone!

If there's a better way of doing this, please let me know.

Answer 1

In newer versions of SlickGrid, DataView brings its own getItemMetadata to provide formatting for group headers and totals. It is easy to chain that with your own implementation though. For example,

function row_metadata(old_metadata_provider) {
  return function(row) {
    var item = this.getItem(row),
        ret = old_metadata_provider(row);

    if (item && item._dirty) {
      ret = ret || {};
      ret.cssClasses = (ret.cssClasses || '') + ' dirty';
    }

    return ret;
  };
}

dataView.getItemMetadata = row_metadata(dataView.getItemMetadata);

Answer 2

        myDataView.getItemMetadata = function(index)
        {
            var item = myDataView.getItem(index);
            if(item.isParent === true) {
                return { cssClasses: 'parentRow' };
            }
            else {
                return { cssClasses: 'childRow' };
            }
        };

//In my CSS

       .parentRow {
           background-color:  #eeeeee;
        }
        .childRow {
           background-color:  #ffffff;
        }