Conditionally select a row in handsontable mode based on cell value

Question

I have several rows of data. One of the columns is the error flag. If the error flag is true, I want to change the background color of the entire line. How can i do this?

Answer 1

If you are really looking for something using handsontable, I accomplished this with a special visualization tool. This is hacking, but it works well and quickly.

Your first step is to disable the td and th style from the hands-free css file

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

replace it

 .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 your own 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 will be set up like this:

 $("#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 could never have done this without you!

However, your code does not push the changes to fixed cells. With some changes, I was able to get it to work.

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

Create Renderers

There are only 5 types of rendering in HandsOnTable, and I missed the password renderer because I don't use it. See https://github.com/handsontable/handsontable/blob/master/src/cellTypes.js for reference.

Notice that I have hardcoded column 5 in each renderer as a place for the contents of the cell that I am testing.

In addition, I find it important to note that with the help of another if statement, you could do additional checking here. For example, I can check column 3 for “On Credit retention” and highlight the red line.

  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

Notice that I set the renderer for each column. The viewer 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 it doesn't matter here.

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

What it is - now every column in the row sent by UPS highlights brown.

Answer 3

You can use different classes for your data and the corresponding CSS rules.

For example: if you want to highlight table rows in different colors one by one, you can use the odd and even classes:

HTML

 <table class="list"> <tr class="odd"> <td> Milk </td> <td> 2.2$ </td> </tr> <tr class="even"> <td> Potato </td> <td class="discount"> 1.5$ </td> </tr> </table> 

CSS

 .list tr.odd { background: #4e8; } .list tr.even { background: #8fe; } 

If you need to select any cell in your table, just create another class with a custom name, for example discount :

 .list td.discount { color: red; font-weight: bold; } 

Check out this example: http://jsfiddle.net/fSSF5/1/