Binding Handsontable cells to complex objects

Question

I'm trying to use Handsontable for some basic editing and number formatting.

The data, including formatting info is fetched from the server and would look similar to this:

var data = [
    [ { num:'1.1', color:'red' }, { num:'2.2', color:'green' } ],
    [ { num:'3.4', color:'yellow' }, { num:'4.4', color:'blue' } ]
];

Now, I would like to pass this data to my Handsontable and have each cell display/edit the .num values. By using a custom renderer and editor (briefly explained here: Understanding cell functions), I have found a solution that handles manual editing - see this JSFiddle:

http://jsfiddle.net/7akqc87x/5/

However, there are two problems with this solution:

Pasting values (e.g. from Excel) doesn't work as intended - the pasted values completely overwrite the bound objects instead of updating their .num properties.
Numeric validation doesn't work - if I add type: 'numeric' to the cellProperties, the first edited cell won't exit "edit mode", and no more cells can be edited.

Am I on the right track here? If so, how can I fix these two problems? If not, is there an easier (built-in?) way of binding cells to custom objects?

(I am aware that you can bind an entire row to a custom object - Object data source - but I haven't found a solution for individual cells)

Shwaydogg Shwaydogg · Accepted Answer · 2015-09-29T19:38:52

Custom Cell Rendering:

In your Hands On Table settings you can add the following to display the num and the color as the background color from your object:

renderer: function(instance, td, row, col, prop, value, cellProperties) {
  if(value){
    td.innerHTML = value.num;
    td.style.backgroundColor = value.color;
  }
  return td;
},

http://docs.handsontable.com/0.18.0/demo-custom-renderers.html

Sounds like you were able to setup a custom editor, if not you there are instructions here: http://docs.handsontable.com/0.18.0/tutorial-cell-editor.html

I don't know about pasting from excel with this, at the very least the custom editor would need to take only a single argument. Only one is going to come from excell anyway. Perhaps with hooks would be a good method to investigate for that. Also, probably would want to start by extending the default editor also explained in the above docs rather than a complete custom one.

Setting the type to numeric doesn't work as it expects a number not a custom object. The 'types' predefine a set of renderer, editor and validator as the example they give in the documentation you found:

 {
  renderer: Handsontable.NumericRenderer,
  editor: Handsontable.editors.TextEditor,
  validator: Handsontable.NumericValidator
}

https://github.com/handsontable/handsontable/wiki/Understanding-cell-functions

Binding Handsontable cells to complex objects

1 Answers