Skip to content Skip to sidebar Skip to footer

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

Solution 1:

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

Post a Comment for "Binding Handsontable Cells To Complex Objects"