CODEWITHSUNDEEP
javascriptslickgrid
jdivock
jdivock

Reputation: 113

Highlighting a slickgrid row when clicked

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?

Upvotes: 2

Views: 12930

Answers (2)

Tin
Tin

Reputation: 9082

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

Upvotes: 7

njr101
njr101

Reputation: 9619

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.

Upvotes: 5

Related Questions