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?

Answer 1

除了您的负面语气，使用提供的Slick.RowSeletionModel并将网格选项中的multiSelect设置为false，我没有发现任何问题。

Answer 2

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.