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
        }
    ]
});

Answer 2

androidmj, I couldn't have never done it without you!

Your code doesn't carry the changes through to cells that are fixed, though. With a some changes, I was able to get it to work.

I have a table in which the 5th column (remember, HandsOnTable starts counting columns with 0) contains shipping method. Where the shipping method is UPS, I want to highlight the entire line brown.

Create your renderers

There are only 5 types of renderers in HandsOnTable, and I skipped the password renderer, because I'm not using it. See https://github.com/handsontable/handsontable/blob/master/src/cellTypes.js for reference.

Notice I've hard-coded column 5 in each renderer as the location for the cell contents I'm testing.

Also, I think it's important to note that, with another if statement, you could do additional checking here. For instance, I could check column 3 for "On Credit Hold" and highlight the row red.

            var highlightingAutocompleteRenderer = function (instance, td, row, col, prop, value, cellProperties) {
                Handsontable.renderers.AutocompleteRenderer.apply(this, arguments);
                if($('#hot').handsontable('getDataAtCell',row, 5) == 'UPS'){
                    td.className = 'UPS';
                }
            };

            var highlightingCheckboxRenderer = function (instance, td, row, col, prop, value, cellProperties) {
                Handsontable.renderers.CheckboxRenderer.apply(this, arguments);
                if($('#hot').handsontable('getDataAtCell',row, 5) == 'UPS'){
                    td.className = 'UPS';
                }
            };

            var highlightingNumericRenderer = function (instance, td, row, col, prop, value, cellProperties) {
                Handsontable.renderers.NumericRenderer.apply(this, arguments);
                if($('#hot').handsontable('getDataAtCell',row, 5) == 'UPS'){
                    td.className = 'UPS';
                }
            };

            var highlightingTextRenderer = function (instance, td, row, col, prop, value, cellProperties) {
                Handsontable.renderers.TextRenderer.apply(this, arguments);
                if($('#hot').handsontable('getDataAtCell',row, 5) == 'UPS'){
                    td.className = 'UPS';
                }
            };

Create your columns

Note that I've instituted the renderer for every column. The renderer checks the correct column for the specified text.

columns: [
    {type: 'date',
    renderer: highlightingAutocompleteRenderer},

    { type: 'text',
    renderer: highlightingTextRenderer},

    {type: 'autocomplete',
    source: ["aaaaa","bbbbb","ccccc","ddddd"],
    renderer: highlightingAutocompleteRenderer},

    { type: 'dropdown',
    source: ["Cancelled","Complete","Finished","On Credit Hold","In Production"],
    renderer: highlightingAutocompleteRenderer},

    {type: 'numeric',
    renderer: highlightingNumericRenderer},

    {type: 'dropdown',
    source: ["Common Carrier","Customer Pickup","Delivery Truck","UPS"],
    renderer: highlightingAutocompleteRenderer},
]

CSS

You probably know how to create CSS, but here it is anyway.

.UPS {
    background-color: #644117;
    color: white;
    font-weight: demi-bold;
}

That's it - now every column in the row to be shipped by UPS highlights brown.