Slickgrid row strikethrough

Question

In Slickgrid how to apply strikethrough for a row?

I tried using 'text-decoration' style, but style not applying. I have tried below code to apply style to row

data.getItemMetadata = function (row) {

    if (this[row].title == 'Task 5'){
        return {
            cssClasses: 'highlight'

        };
    }
    return null;
}

CSS

.highlight {
    text-decoration: line-through;
}

Answer 1

A couple of things:

1) it looks from the way you're referencing the data that you're using a JSON object directly as data. You can do that, but not if you want to use row metadata.

2) so to have access to getItemMetadata you need to use a dataView as per example-4-model, and add:

dataView.getItemMetadata = function (row) {
  var v = this.getItem(row);
  if (v.title == 'Task 5'){
    return {
        cssClasses: 'highlight'

    };
  }
  return null;
}

3) even then (and I tested the above code, it does add the class) the class on the row will not add strikethroughs to the column data. This will:

.highlight > .slick-cell {
  text-decoration: line-through;
}    

You may be able to use other css tricks to get what you want, or as a last resort you can add column MetaData properties rather than row.

Lastly, check out my slickgrid repo, it's the current most recent fork carrying on the MLeibman branch without customising it (just bug fixes and minor enhancements). There are many bugs fixed and it's fully tested with jQuery 1.8+, 2.x and 3.x.