Editor: Tabbing (KeyTable) between fields using bubble edit?

mass6

Is it possible to configure Editor to use bubble editing, and still be able to use tabbing to navigate between fields? Looking to get it working like simple inline editing, but with bubble edit instead.

So, as you press the tab key, the different bubbles pop up, and if they values have changed, then it's submitted on tabbing out of the field.

allan

Hi,

This isn't possible with KeyTable like the tabbing example uses as it always uses inline editing. So what would be required is to implement a custom key handler.

Prior to Editor 1.5, the tabbing example used its own code for that - as follows:

    editor
        .on( 'open', function ( e, type ) {
            if ( type === 'inline' ) {
                // Listen for a tab key event when inline editing
                $(document).on( 'keydown.editor', function ( e ) {
                    if ( e.keyCode === 9 ) {
                        e.preventDefault();

                        // Find the cell that is currently being edited
                        var cell = $('div.DTE').parent();

                        if ( e.shiftKey && cell.prev().length && cell.prev().index() !== 0 ) {
                            // One cell to the left (skipping the first column)
                            cell.prev().click();
                        }
                        else if ( e.shiftKey ) {
                            // Up to the previous row
                            cell.parent().prev().children().last(0).click();
                        }
                        else if ( cell.next().length ) {
                            // One cell to the right
                            cell.next().click();
                        }
                        else {
                            // Down to the next row
                            cell.parent().next().children().eq(1).click();
                        }
                    }
                } );
            }
        } )
        .on( 'close', function () {
            $(document).off( 'keydown.editor' );
        } );

    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            submitOnBlur: true
        } );
    } );

KeyTable allows that to be simplified hugely, but for your use case you might want to try the above and change the call from inline() to bubble().

Regards,
Allan