When using Handsontable how to force a selected cell into edit mode?

Question

Handsontable provides some nice hooks for when a cell is selected but I can't seem to figure out way to get it to allow me to force a cell into edit mode when it has been selected.

I can detect the cell selection like this:

Handsontable.PluginHooks.add( 'afterSelection', function( row, column ) {
    var current_td = this.getCell( row, column );
});

And from there I can even obtain the cell element that was selected. But from there I can't seem to trigger the cell into edit mode (where it has an actively selected textarea field inside of it). This is normally triggered by a double click. Doing the obvious doesn't seem to work:

Handsontable.PluginHooks.add( 'afterSelection', function( row, column ) {
    var current_td = this.getCell( row, column );

    $(current_td).dblclick();
});

Anyone else ever done this or have thoughts on how I might get it to work?

Roborant

Answer 1

And I believe I've answered my own question:

Handsontable.PluginHooks.add( 'afterSelectionEnd', function() { 
        f2_event = $.Event( 'keydown', { keyCode: 113 } );
        this.$table.trigger(f2_event);
});

That seems to do the trick.

Roborant

Thanks for this! I had to put the f2 trigger inside a setTimeout in order to make this work because firing it right away seems to cause a null error inside handsontable. firing it after a delay puts it at the end of the event chain and seems to work – Zinfandel

Answer 2

For anyone intersted in this question, now there is a better programmable way to achieve the same result.

this.selectCell(row, col);
this.getActiveEditor().beginEditing();

This selects the (row, col) cell and enters edit mode (i.e. same as double click or pressing F2/Enter).

Gentilesse

Answer 3

Edit Mode on click:

afterSelectionEnd: function (r, c, r2, c2) {
  if (r == r2 && c == c2) {
     getActiveEditor().beginEditing();
     getActiveEditor().enableFullEditMode();   
  }
}

When you add enableFullEditMode(); caret moves in the cell while pressing left or right button instead of jump to another cell.

Anaother example: only first row:

afterSelectionEnd: function (r, c, r2, c2) {
  if (r == r2 && c == c2) {
     if (r == 0 && r2 == 0) {
         getActiveEditor().beginEditing();
         getActiveEditor().enableFullEditMode();   
     }
   }
 }

Kindig