How do I add a css class to particular rows in sli

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

You could use the setCellCssStyles function: https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#wiki-setCellCssStyles

grid.setCellCssStyles(key, hash)

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

hash - A hash of additional cell CSS classes keyed by row number and then by column id. Multiple CSS classes can be specified and separated by space.

Example:

{ 0: { "number_column": "cell-bold", "title_column": "cell-title cell-highlighted" }, 4: { "percent_column": "cell-highlighted" } }

I used that to highlight edited fields in my grid. I didn't like the getItemMetadata method.

Answer 2

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 3

        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;
        }