How to Move cursor to next Cell after edit value

Sunilgoel

Hi Support,
How to move cursor to next cell after edit value. currently cursor gone after press ENTER.

Regards.
Sunil

allan

Hi Sunil,

Is this using KeyTable with inline editing (like this example)? Just to check my understanding, if you edit a cell and press return, you then want the focus to move on to the next cell - is that correct?

Thanks,
Support (aka Allan ).

Sunilgoel

Hi Allan,

You are right , after Press Enter cursor should move to next cell , currently i am focusing cursor to next cell manually.

Regards.
Sunil

allan

Let me put some code together as an example for how to do this and get back to you.

Regards,
Allan

allan

Here we go:

    editor.on( 'open', function ( e, mode, action ) {
        if ( mode === 'inline' ) {
            editor.on( 'postSubmit.editorInline', function () {
                var focused = table.cell( { focused: true } );

                if ( focused.any() ) {
                    var next = $(focused.node()).next();

                    if ( next.length ) {
                        editor.one( 'submitComplete', function () {
                            table.cell( next ).focus();
                        } );
                    }
                }
            } );
        }
    } );

    editor.on( 'close', function () {
        editor.off( 'postSubmit.editorInline' );
    } );

Basically what it is doing is listening for the postSubmit event which is triggered when the Ajax response is returned. It will then determine where the currently focused cell is and on the submitComplete event (which is basically the last thing Editor does after an edit) it will move the focus on to the adjacent cell to the right.

You could extend that to move focus to the next line if there is no cell to the right (the if ( next.length )).

Regards,
Allan

lokesh16

This works only when serverSide option is set to false;
How can I make it work when serverSide option is set to true?
I tried with inline edit option {drawType:'none'}, still the next cell was not selected after submitComplete

allan

KeyTable should support tabbing to the next cell when server-side processing is enabled. Have you tried KeyTable?

Allan

lokesh16

Yes Allan, KeyTable incorporated, tabbing works.
I have also incorporated the above code that listens to postSubmit and SubmitComplete events provided by you.
Followed up further from here https://editor.datatables.net/examples/extensions/keyTable.html seems to be ok now...
Thanks Allan...

allan

Are you able to give me a link to a page that shows the issue? This example shows KeyTable being used with server-side processing, although not with Editor.

Allan

lokesh16

Allan, I have set up the demo link here:
http://datatableslab.openuserapps.com/examples/simple/server-side-processing-keys.html

I have added the following lines of code to the Server-Side example

keys: {
            columns: ':not(:first-child)',
            editor:  editor
        },

When I edit inline and hit "Tab" or "Enter" key, focus disappears shortly after data is updated....

allan

Could you try the nightly version of KeyTable please? I believe that should help to resolve the issue.

Allan

lokesh16

Allan, I have updated the same demo link code with the nightly version, i feel the cursor still disappears. Please check once...