cell focus

cell focus

KamoAKamoA Posts: 19Questions: 6Answers: 0

I have:

<link href='/css/keyTable.dataTables.min.css' rel='stylesheet' type='text/css' >

7th column in my DataTable (GR_1) is input field. I can manually set focus and input data.
In my code I'm trying set focus on certain cell and no success.
I tried number of options:

var table = $('#GR_1').DataTable();

$('#GR_1 tbody tr:eq(3) td:eq(7)').click();

table.cell(':eq(3)',':eq(7)').focus();

I also tried:

table.cell(':eq(3)',':eq(7)').select();

Still couldn't make it work.
What am I missing?
Why it doesn't work?
Thank you,

Kamo

Replies

  • kthorngrenkthorngren Posts: 20,302Questions: 26Answers: 4,769
    edited December 2020

    Are you using the KeyTable Extension? The cell().focus() API is from the KeyTable extension.

    If not you will need to use cell().node() to get the node then use jQuery focus() to focus the input. Something like this:

    $( table.cell(':eq(3)',':eq(7)').node() ).find('input').focus();
    

    Kevin

  • KamoAKamoA Posts: 19Questions: 6Answers: 0

    Thank you Kevin,

    If I do cell().focus()
    it sets focus on the cell.

    I need to set focus on input field of the cell.
    cell().node() doesn't help.

    May be I should setup id for input field?
    I did:

    render: function ( data, type, row ) {

                    if ( type === 'display' ) { 
    
                      return '<input type="text" id="input7" class="suppCost" value="'+data+'" size="10"  maxlength="10" >';
                    }
                    return data;
                  },
    

    But id is not unique. I have to add row index, but I don't know which variable I can use for proper syntax.

    Thank you ,

    Kamo.

  • kthorngrenkthorngren Posts: 20,302Questions: 26Answers: 4,769

    I've used the code snippet I shared with success in my Datatables. Please post a simple test case showing what you are doing so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • KamoAKamoA Posts: 19Questions: 6Answers: 0

    I did it. i added 'meta.row' to id and made id unique.
    /* 7rd column */

    {targets: [7],
    render: function ( data, type, row , meta) {
    if ( type === 'display' ) {
    return '<input type="text" id="input7'+meta.row+'" class="suppCost" value="'+data+'" size="10" maxlength="10" >';
    }
    return data;
    },
    className: "dt-right"
    },

    /* */

    Later I used

    document.getElementById('input7'+row).focus();

    Thank you.

    Kamo

This discussion has been closed.