Question

I have a grid made using slickgrid on a html page. I want to highlight certain cells.

I have added this at the head section of html

  <style>
  .changed{ background: yellow } 

  </style>

I have this as the options:

var options = {
                    enableCellNavigation: true,
                    enableColumnReorder: false,
                    cellHighlightCssClass: "changed",
                };

And this is how the grid is getting generated

grid = new Slick.Grid("#sgrid", rows, columns, options);
grid.setCellCssStyles("highlight", cell_info_to_be_highlighted);
grid.render();

And this is the output of console.log(JSON.stringify(cell_info_to_be_highlighted));

{"29":{"column_3":"changed"},"33":{"column_3":"changed"},"34":{"column_3":"changed"},"35":{"column_3":"changed"},"36":{"column_3":"changed"},"37":{"column_3":"changed"},"38":{"column_3":"changed"},"39":{"column_3":"changed"}}

Now the grid is properly displayed but there is not highlighting at all. What am I doing wrong?

UPDATE

The problem was somewhere else

I was not setting the id of columns properly. Hence all the problems were happening. The id of the column should be the same thing that you give in cell_info_to_be_highlighted.

Answer 1

My guess is that the “changed” CSS class is being applied properly, but the background property is ignored because the default has a higher level of specificity. Try changing it to background: yellow!important.