Handsontable - customizing renderers depending on cell values

Question

One of the columns in my handsontable has the following requirement:

Set cell color differently based on a value that is not part of the table. Here is the full code -

var objectData = [
  {id: 1, name: "Ted Right", address: "NY", value:{old_value:"10", new_value:"15"}},
  {id: 2, name: "Frank Honest", address: "CA", value:{old_value:"12", new_value:"12"}},
  {id: 3, name: "Joan Well", address: "TX", value:{old_value:"20", new_value:"28"}}

];

var valueRenderer = function (instance, td, row, col, prop, value, cellProperties) {
var background_color = '';
if (value.old_value == value.new_value) {
    background_color = 'white';
} else {
    background_color = 'yellow';
}
value = value.new_value;
Handsontable.renderers.NumericRenderer.apply(this, arguments);
$(td).css({
  background: background_color
});

};

In this the "Value" column needs to be colored yellow, if old_value is not equal to new_value - if not, the background should be white. To start with I put the new_value and old_value in a nested "value" item, in the data source. This works, but it creates other problems:

When you click on a cell to edit, it shows "[object Object]" instead of the value - which makes sense, as I had passed "value" in the columns list, instead of "value.new_value"
The background color is not retained

One way to fix this would be to have a hidden column that contains the old_value, and use it to compare and set the renderer. But if the table has 10 columns or more, and if every column needs to be colored based on the condition described above, it would quickly become too big (also would need special handling during the save function)

What is the best way to do this?

Did you find a solution for your problem ? Because I need to pass an object as a value to do some validation.. — SuperMarco

Shwaydogg Shwaydogg · Accepted Answer · 2015-09-29T19:53:39

You'll need to setup a custom editor in addition to your custom renderer.

Then in your custom renderer and editor you can control the logic of 'retaining' or changing the background color.

I just answered a related question here: Binding Handsontable cells to complex objects. The example does not use the numeric renderer as a base, so you have complete contol of the dom element.

I believe many of the docs referenced in the answer and question will be of assistance.

Lastly, the example the documentation here, under the section 'Rendering custom HTML in header', seems to have some overlap with your question as well.

Handsontable - customizing renderers depending on cell values

1 Answers