I'll continue here (from https://datatables.net/forums/discussion/81422/date-picker-with-jquery-ui
).

When I use inline editing for tag fields and clicking on 'Add' expands the selection list. As soon as I select an entry from the list, the tag editor disappears without saving the new value.

I extended the tags-multiple example with added "keytable".

Here is the code:

var editor = new DataTable.Editor({
    ajax: '../../controllers/joinArray.php',
    fields: [
        {
            label: 'First name:',
            name: 'users.first_name'
        },
        {
            label: 'Last name:',
            name: 'users.last_name'
        },
        {
            label: 'Site:',
            name: 'users.site',
            type: 'select'
        },
        {
            label: 'Permissions:',
            name: 'permission[].id',
            type: 'tags',
            limit: 4
        }
    ],
    table: '#example'
});

$('#example').DataTable({
    ajax: {
        url: '../../controllers/joinArray.php',
        type: 'POST'
    },
    columns: [
        { data: 'users.first_name' },
        { data: 'users.last_name' },
        { data: 'sites.name' },
        { data: 'permission', render: '[, ].name', editField: 'permission[].id'}
    ],
    keys: {
        columns: [0,1,3],
        editor: editor
    },  
    layout: {
        topStart: {
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit', editor: editor },
                { extend: 'remove', editor: editor }
            ]
        }
    },
    select: true
});

best regards
Ilja

See this test case: https://jsfiddle.net/supernova404/jg60we4o/209/

I want to disable keys when a surten button is clicked: .buttons-page-length

var table = $('#dynamicTableDetailChild').DataTable({
             keys: true
});

$('.buttons-page-length').on('click', function(){
          console.log('inside');
          $('#dynamicTableDetailChild').DataTable().keys.disable();
          //table.keys.disable();
});

keys: {
                    columns: ':not(.readonly)',
                    keys: [ 9 ],        /* tab key */
                    editor: vm.editor,
                    editOnFocus: true
                }    ,

Now the inline editor still lands on those columns when tabbing.

I updated all the extensions as well as css with bootstrap5.

Any advice?
Thanks

Currently the only way to clear the cell is to double click the cell and backspace all the contents or to select the cell, type a single character, press backspace and then press return to submit the change.

Sorry I don't have a test cases available, the project is behind auth.

I am using latest KeyTable and Editor library.

I can replicate the issue with a regular select, see below. Anything I am misunderstanding here? Thanks

    <table id="example" class="table table-striped" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011-04-25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011-07-25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009-01-12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012-03-29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008-11-28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012-12-02</td>
                <td>$372,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

    <script type="text/javascript">
        $(document).ready(function () {

            var editor, datatable

            editor = new $.fn.dataTable.Editor({
                table: $('#example'),
                fields: [
                    {
                        label: "Name",
                        name: "DT_RowId"
                    },
                    {
                        label: "Position",
                        name: "position"
                    },
                    {
                        label: "Office",
                        name: "office",
                        type: 'select',
                        options: [
                                {label: 1, value: 'Spectrometer'},
                                {label: 2, value: 'Star Chart'},
                                {label: 3, value: 'Electrical Tape'}
                        ],
                    }
                ],
            });

            datatable = $('#example').DataTable({
                pagingType: 'full_numbers',
                columns: [
                    { data: "DT_RowId" },
                    { data: "position" },
                    { data: "office" },
                    { data: "age" },
                    { data: "start_date" },
                    { data: "salary" }
                ],
                keys: {
                    editor: editor,
                    editorKeys: 'navigation-only',
                    columns: [ 2 ],
                },
            });
        });

    </script>

Description of problem:
The latest version of KeyTable (2.8.0) appears to no longer work with inline editing. In the test case linked above, if you update the included version of KeyTable from 2.7.0 to 2.8.0 you can no longer move around in the table with the arrow or tab keys. If you then comment out the editor from the table's key definition here:

keys: {
editor: editor,
},

then KeyTable starts working again. Presumably it's a conflict between the two from a change here:

https://github.com/DataTables/KeyTable/compare/2.7.0...2.8.0

For some reason the live editor imports different versions of plugins than you get when you download releases. In this case the download includes KeyTable 2.8.0 but the live editor pulls in 2.7.0. Is there a way to keep the live editor synced up with the releases? This would make it easier to debug any issues we run into.

Thanks.

Ben

In version 2.6.4 (which I've last used) the navigation worked fine with Editor when used inline editing, but now it does not. This can be seen in example page linked above. If there was a breaking change, how can it be fixed?

https://www.dropbox.com/s/axo8657zavtqwq4/keytable.mov?dl=0

I'm guessing KeyTable tries to set refocus the cell after the scroll.

I have came to know from google search that keyTable is the extension used to make table work like excel sheets. I just copied the css and script to my page and I put key: true in the dataTable. that much I got .. now what to do ? is there any reference or steps example to look through it and make it done ? Please help and thanks in advance.

I want to use DataTable for the Blind with JAWS as a screen reader application. How can I configure DataTable to use JAWS to read table contents when I use the keyboard to move between rows in table contents? is any example of this issue?

tnx

This is because KeyTable only emits an event if the switch case doesn't match:

// Line 861
case 27: // esc
        if ( this.c.blurable && enable === true ) {
                this._blur();
        }
        break;
        
// Line922
default:
        // Everything else - pass through only when fully enabled
        if ( enable === true ) {
                this._emitEvent( 'key', [ dt, e.keyCode, this.s.lastFocus.cell, e ] );
        }
        break;

What i want to do is (as you can see in my Example Code). I want to use the Escape Key not just to blur but to refocus on the search Input.

Is there any way i can do this?
Could you maybe emit the key Event even if something else is happening?

Thanks.
Best Regards.

Tobi

I can't auto focus the first cell (by focus: ':eq(0)' )

let table = $(TABLE_ID).DataTable({
...
keys: {
   editor: editor,
   focus: ':eq(0)',
   blurable: false,
},
...
});

Please indicate what I am doing wrong!

sample code : live.datatables.net/jaxecefo/1/watch?html,css,js,output

to see the problem, just open above sample, select a cell and use right and left arrow keys.

I don't get it really out of there. So if I have the event, how do I know which cell/row/col-No it comes from?

My workaround is to write col/rowNo into the node (which I get in the event) as extra attributes, which works, but there must be a better way.

thanks,
Klaus

keys: {
        editor: [ 
                   {editor1}, 
                   {editor2}
                ]
    }

 editor = new $.fn.dataTable.Editor({
        formOptions: {
            inline: {
               submit: 'allIfChanged'
            }
        },
    ...
    ...
   let table = $('#datatable').DataTable({
       ...
        keys: {
            editor: editor,
          //  editOnFocus: true
        },

When I activate the 'editOnFocus' option then I enter into inline editing on each cell, but when I blur out, it submits only on the first cell.
When I turn the option off, it will submit on each blur. (but I don't get the inline editing on focus, which I want).

I'm not sure if it's a bug or a bad configuration.

I did this with:

                keys: {
                        columns:[6],    //UserLoginEmail, The only user editable field
                        editor:  editor,
                    },

I'm getting the interaction I want, but if the user double clicks on any of the inline non-editable field, I get this error in the console:

dataTables.keyTable.js:469 Uncaught TypeError: Cannot read property 'cell' of null

Is there any way to mitigate this?

Here are my key bits of code:

        editor = new $.fn.dataTable.Editor( {
                data: sampleDataStaff,
                table: "#example",
                fields: [ {
                        label: "ID",
                        name:  "id",
                        type: "hidden",
                        attr: {placeholder: 'ID'}
                     }, {
                        label: "UserStatus",
                        name:  "UserStatus"
                    }, {
                        label: "Group",
                        name:  "GroupName"
                    }, {
                        label: "User Name",
                        name:  "UserName",
                        attr:   {placeholder: 'No Name'}
                     },{
                        label: "Role Title",
                        name: "RoleTitle"   
                    }, {
                        label: "User Login Email",
                        name:  "UserLoginEmail",                
                    }, {
                        label: "Date",
                        name:  "Date",
                        type: "hidden",
                        //type:  "datetime"
                    }
                ],
            } );



            table = $('#example').DataTable( {
                dom: "Bfrtip",
                "paging": false,
                data: sampleDataStaff,

                columns: [
                    {
                      data: null,
                      defaultContent: '',
                      className: 'select-checkbox',
                       orderable: false
                    },
                    { name: "id",           data: "id",         orderable: false,   className: "columnDisabled",     visible: false},
                    { name: "UserStatus",   data: "UserStatus",     orderable: false,   className: "columnDisabled"},
                    { name: "GroupName",    data: "GroupName",      orderable: true,     className: "columnDisabled"},
                    { name: "UserName", data: "UserName",       orderable: false,   className: "columnDisabled"},
                    { name: "RoleTitle",        data: "RoleTitle",      orderable: false,   className: "columnDisabled"},
                    { name: "UserLoginEmail",   data: "UserLoginEmail", orderable: false},
                    { name: "Date",     data: "Date",           orderable: false,    className: "columnDisabled"     visible: false}
                ],

                "order": [ 7, 'desc' ],  //Order by Date

                columnDefs: [
                    {targets: 2,
                    fieldName: "UserStatus",
                     render: function (data) {
                         if (data == 'active') {
                             return('<div class="primaryDotBlack"></div>');
                         }else {
                             return('<div class="primaryDotGray"></div>');
                         }
                     }
                    }
                ],

                keys: {
                    columns:[6],    //UserLoginEmail, The only user editable field
                    editor:  editor,
                },

    ..... Button Stuff........
    ...... }); //End Of DataTable

having issue with onKey functions. they work all fine but when I have 2 tables and I destroy one, the other one stops listening for key event .
provided jsfiddle: https://jsfiddle.net/cdk6mxhe/4/

You can try it on the example page: https://editor.datatables.net/examples/extensions/keyTable.html

I suspect this is more of an Edge problem than a Datatables problem, but I'm just hoping someone has an idea for some kind of workaround.

For example, in the event body, I can do this
if (cell.index().column === 1)
to get the index of the column, but is it possible to do a comparison with the name instead, something like this?
(I realize this is wrong)
if (cell.name === 'Age')

Thank you in advance.

when you look at the keytable bootstrap styling page and you look at the "Javascript library files loaded for use in this example" you will notice that only dataTables.keyTable.min.js is mentioned.

In the KeyTable-2.5.0 download package there is also a file keyTable.bootstrap4.min.js present.
This file is not used by the example mentioned above.

So my question is obvious: when do I need to use the keyTable.bootstrap4.min.js file ?

Regards,
Ronald Wouters

I am working on a similar situation to this thread: https://datatables.net/forums/discussion/40248/cancel-key-blur-when-field-contains-errors

I am using inline editing, keytables, and submitting onblur, and am now attempting to add basic client validation using the preSubmit event.

If I edit a field with an invalid value and press enter, the error is shown. However, if I hit the tab key, the field reverts back to the original value and the next field has the focus w/o showing the original error. I tried using keys.disable(), but that does not seem to work.Seems like I need to cancel the keytables action somehow.

Here is the code I am using:

<script type="text/javascript">
    $(document).ready(function() {

        var editor = new $.fn.dataTable.Editor({
            ajax: {
                url: "/ListView/ListViewAjaxUpdate",
                contentType: 'application/json',
                data: function(d) {
                    d.listId = '1';
                    return JSON.stringify(d);
                }
            },
            table: "#tblData",
            idSrc: 'RowId',
            fields: [
                        {
                            label: 'Test string field',
                            name: 'Id1'
                        },
                        {
                            label: 'Test int field',
                            name: 'Id2'
                        },
                        {
                            label: 'Another string field',
                            name: 'Id3'
                        }
            ]
        });

        // Activate an inline edit on click of a table cell and allow submit on blur.
        $('#tblData').on('click', 'tbody td:not(:first-child)',
            function () {
                editor.inline(this,
                    {
                        submitOnBlur: true
                    });
            }
        );

        var table = $('#tblData').DataTable({
            lengthChange: false,
            processing: false,
            filter: false,
            ordering: true,
            order: [[0, 'asc']],
            serverSide: true,
            dom: 'frtip',
            ajax: {
                url: "/ListView/ListViewAjaxGet",
                type: "POST",
                data: function(d) {
                    d.listId =
                        '1';
                }
            },
            columns: [
                {
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                },
                    {
                        title: 'Test string field',
                        data: 'Id1'
                    },
                    {
                        title: 'Test int field',
                        data: 'Id2'
                    },
                    {
                        title: 'Another string field',
                        data: 'Id3'
                    },
                {
                    title: "RowId",
                    data: "RowId",
                    visible: false
                }
            ],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            keys: {
                columns: ':not(:first-child)',
                keys: [9],
                editor: editor,
                editOnFocus: true
            },
            buttons: [
                { extend: 'create', editor: editor, formTitle: 'New list item' },
                { extend: 'edit', editor: editor, formTitle: 'Edit list item' },
                { extend: 'remove', editor: editor, formTitle: 'Delete list item' }
            ],
            initComplete: function(settings, json) {
                $(this).DataTable().buttons().container().appendTo($('#tblDataButtons'));
            }
        });

        // Add basic client validation.
        editor.on('preSubmit',
            function(e, o, action) {
                if (action !== 'remove') {
                    if (!ClientValidationString(this
                            .field('Id1').val(), 256)) {
                            this.field('Id1')
                                .error('Must be less than 256 chars.');
                        }
                    
                    if (!ClientValidationInt(this
                            .field('Id2').val())) {
                            this.error('Id2')
                                .error('Must be an integer value.');
                        }
                    
                    if (!ClientValidationString(this
                            .field('Id3').val(), 256)) {
                            this.field('Id3')
                                .error('Must be less than 256 chars.');
                        }
                }
                // If any error, cancel.
                if (this.inError()) {
                    // This doesn't seem to work.
                    //table.keys.disable();
                    //table.keys.enable();
                    return false;
                }
                return true;
            }
        );
    });
</script>

Thanks!

if ( this.inError() ) {
return false;
}

i m using this in presubmite evevnt but this.inError() execute first before ajax sucess what do ?