Conditionally highlight row in handsontable based on a cell value

Question

I have several rows of data. One of the columns is an error flag. If the error flag is true, I want to change the background color of the entire row. How would i do that?

Answer 1

If you are actually looking for something using handsontable, I have accomplished this using a custom renderer. It's 'hackish', but it works well, and fast.

Your first step is to disable the td and th style from the handsontable css file

//remove this!
.handsontable th, .handsontable td{ background-color:#FFFFFF;}

replace with this

.handsontable th{ background-color:#FFFFFF;}

Let's say your original table had 2 columns and it looked like this:

$("#dataTable").handsontable({
minSpareRows: 1,
autoWrapRow: true,
contextMenu: true,
height:500,
columns: [ {
        { 
          type: 'text'
        },{
          //this is your error flag column
          type: 'text'
        }
    ]
});

You would create a custom renderer:

var yourErrorRenderer = function (instance,td, row, col, prop, value, cellProperties) {
 if($('#YOUR TABLE').handsontable('getDataAtCell',row, errorFlagCol) == 'error'){
    $(td).parent().css('background-color','#205199');
  }else{
    $(td).parent().css('background-color','#FFFFFF');
  }
  return td;
};

Then your table would be set up like so:

$("#dataTable").handsontable({
minSpareRows: 1,
autoWrapRow: true,
contextMenu: true,
height:500,
columns: [ {
        { 
          type: 'text'
        },{
          //this is your error flag column
          renderer:yourErrorRenderer
        }
    ]
});