CODEWITHSUNDEEP
javascripthandsontable
Sphinxxx
Sphinxxx

Reputation: 13017

Binding Handsontable cells to complex objects

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:

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)

Upvotes: 1

Views: 2848

Answers (1)

Shwaydogg
Shwaydogg

Reputation: 2509

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

Upvotes: 1

Related Questions