How to Move cursor to next Cell after edit value

How to Move cursor to next Cell after edit value

SunilgoelSunilgoel Posts: 48Questions: 19Answers: 0

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

Regards.
Sunil

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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 :smile:).

  • SunilgoelSunilgoel Posts: 48Questions: 19Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Regards,
    Allan

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • lokesh16lokesh16 Posts: 9Questions: 0Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • lokesh16lokesh16 Posts: 9Questions: 0Answers: 0
    edited July 2018

    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...

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • lokesh16lokesh16 Posts: 9Questions: 0Answers: 0

    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....

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • lokesh16lokesh16 Posts: 9Questions: 0Answers: 0

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

This discussion has been closed.