Full Custom Editor

Tags: #<Tag:0x00007f8b1dc91bc0>
#1

I’m looking at the custom-editor override example here:
https://handsontable.com/docs/6.2.2/frameworks-wrapper-for-react-custom-editor-example.html

This example shows override the TextEditor.

What I’d like to do is completely control the editor with my own component. I’ve figured out from the example how to ram my own component React in there (essentially render within this.TEXTAREA_PARENT) like so:

export class CustomEditor extends editors.TextEditor {
  constructor(props) {
    super(props);
  }

  createElements() {
    super.createElements();
    const cell = this.getEditedCell() as HTMLElement;
    const el = <div>My Editor</div>;
    ReactDOM.render(el, this.TEXTAREA_PARENT);
  }
}

However this feels like I’m hacking the TextEditor in a way it’s not designed, and that there’s probably a lower-level component I should really be extending to do this properly.

For instance, it’s not clear how I report back to the grid what the resulting edited value is when editing is complete. Or, in fact, how I signal to the grid that editing is complete.

What’s the “right™” way to do this? Thanks!!

#2

Hey @phil

Here I have an example with a custom cell editor https://stackblitz.com/edit/angular-dirbuj?file=src/app/hello.component.ts

Hope it helps

#3

Hey, thanks @aleksandra_budnik.

In the example you give I can see you setting the content of the <td> to a hard coded value.

renderer: (core, td, row, col, property, value, cellProperties) => {
  Handsontable.renderers.TextRenderer.apply(this, arguments);

  if(col === 1){
      td.innerHTML = 'a'
  }

But I can’t see where the results of the editor would be retrieved from. eg. I type in “hello” where do I get that value from, instead of “a”?

I’ve looked out all the args coming into renderer and that doesn’t seem to contain the value

Thanks

#4

the 6th parameter is a value , your hello

1 Like
#5

Hey @aleksandra_budnik

The example extends from editors.TextEditor.

If I was wanting to a make a completely controlled custom editor, without say a <input> what would be the correct editor to derive from?

What’s “proper”? BaseEditor or is the TextEditor still a decent bet.
Thanks

#6

Sorry for keeping you waiting @phil
I would recommend TextEditor but I believe that you have already made some progress on that field.

#7