Highlighting a slickgrid row when clicked

Question

Humor me here. It seems like other grids like ExtJs do this out of the box, but for the life of me I can't find any solution to having a grid remain highlighted after a user clicks it. My interim solution is just a quick css rule to highlight a row on mouseover.

Are there really no options to just set this? It seems like I'm going to have to go through a rowSelection model and set it up so that only one row can be selected at a time, is that right?

score 7 · Answer 1 · answered Dec 25 '11 at 17:45

7

Your negative tone aside, I see nothing wrong with using the provided Slick.RowSeletionModel and setting multiSelect in grid options to false.

answered Dec 25 '11 at 17:45

Tin

9,082
2
34
32

Is there any documentation on this RowSelectionModel? I've seen it mentioned but I can't even find an example of it! – dallin Sep 22 '12 at 04:06
3

I just realized that the author recently (or at least I hope or I was blind before) added an example with row selection. Anyone hoping to do this (and it's definitely the best and easiest way), check out this example: [Row selection & reordering](http://mleibman.github.com/SlickGrid/examples/example9-row-reordering.html). – dallin Sep 22 '12 at 04:23

score 5 · Answer 2 · answered Dec 22 '11 at 09:05

You can do something like this (JSFiddle demo here) :

/////////////////////////////////////////////////////////////////////
// Augment grid object with a method to highlight the currently active row
//
mygrid.highlightActiveRow = function () {
  var currentCell;
  var $canvas = $(this.getCanvasNode());

  currentCell = this.getActiveCell();

  $canvas.find(".slick-row").removeClass("active");
  if (currentCell) {
    $canvas.find(".slick-row[row=" + currentCell.row + "]").addClass("active");
  }
};

mygrid.onActiveCellChanged.subscribe(function () {
  this.highlightActiveRow();
});

This marks the current row with the class active which can be styled as required:

/* Currently selected row */    
#mygrid .slick-row.active
{    
  background: #ff0000;
}

/* Currently selected cell */
#mygrid .slick-cell.active
{
  background: #00ff00;
}

There may be better ways to do this but this worked for me.

Highlighting a slickgrid row when clicked

2 Answers2