I have:

            keys: {
            columns: ':not(:first-child):not(:nth-child(4)):not(:nth-child(5)):not(:nth-child(8)):not(:nth-child(9))',
            editor:  editor,
            blurable: false
        },

A few fields with buttons and checkboxes:

        { data: null, defaultContent: '', orderable: false},
        { data: "id", visible: false },
        {
            orderable: false,
            className: "center",
            data: null, render: function ( data, type, row ) {
            return  '<button type="button" class="btn btn-info btn-sm" onclick="do()"> 
                                    <i class="fa fas fa-edit" aria-hidden="true"></i>
                        </button>;
        },
        { data: "done",
              orderable: false,
              render: function ( data, type, row ) {
              if ( type === 'display' ) {
              return '<input type="checkbox" class="editor-done">';
              }
              return data; 
              },
              className: "dt-body-center"
        },

       $('#table').on( 'click', 'input.editor-done', function(event) {
        editor
            .edit( $(this).closest('tr'), false )
            .set( 'table.done', $(this).prop( 'checked' ) ? 1 : 0 )
            .submit();
       } ); 

I would like to know :
1. Is it possible to make focus on the button using the keys?
2. How by pressing the space bar or enter to call button onClick without having "Unable to automatically determine field from source" each time?
My solution gives me the error:

       editor.on( 'key-focus', function ( e, datatable, cell ) {    
            $('button', cell.node()).focus();   
        } ); 

`
3. How to submit the id field, while doing checkbox inline edit, except of using "formOptions"?

            "formOptions": {
              "inline": {
                "submit": "allIfChanged",
              },
              
            }

Thank you in advance,

Our instantiation looks like this:

var itemsDT = $( "#list-items-dt-edit" ).DataTable( {
    dom: DU.DEFAULT_DOM_STATUS_FILTER,
    ajax: ajaxUrl,
    responsive: true,
    autoWidth: false,
    columns: [ { // Responsive control column
        data: null,
        defaultContent: "",
        className: "control",
        orderable: false
    }, {
        data: "id",
        className: "division-id",
        visible: false,
        searchable: false
    }, {
        data: "display_text",
        className: "editable-cell long-text"
    }, {
        data: "description",
        defaultContent: "",
        className: "editable-cell long-text"
    }, {
        data: "program_id",
        render: renderProgramDisplayTextAndCode,
        className: "editable-cell"
    }, {
        data: "status_id",
        name: "status_name",
        render: renderStatusName,
        className: "editable-cell status"
    } ],
    select: {
        blurable: true
    },
    keys: {
        editor: listItemsEditor,
        editorKeys: "tab-only"
    }
} );

          keys: {
                           columns: [9, 10 ],
                           keys: [ 9 ],
                           editor: editor,
                           editOnFocus: true
                   },

However when I tab from column 9 to column 10 the editor does not submit all front end data.

Notice: Undefined index: HRYREG

file_put_contents( '/tmp/a', json_encode( $values )."\n", FILE_APPEND );

{"HRWPER":"4.00","HRWMNA":"","HRWMDT":"","HRWMTM":"","HRWDNA":"","HRWDDT":"","HRWDTM":"","HRWVNA":"","HRWVDT":"","HRWVTM":"","HRWHNA":"","HRWHDT":"","HRWHTM":""}

to my DataTable to use excel like navigation, I get the error
"Unable to automatically determine field from source."
whenever I make a change to a column in the bubble. This also breaks the ability to tab through the columns in the bubble.
When I use tab I see tabbing in the DataTable not in the bubble.
I can continue and see my change.
When I change it to
keys: {
},
I no longer get the error, Excel like navigation works, but still cannot tab in the bubble, and see tabbing in the DataTable.
If I remove the keys statement, the bubble functions as expected, but Excel like navigation no longer works.
I was able to make this work using your example, so my assumption is some other code is interfering.
I know this is not enough to you to give me an answer, but I hope you can point me in the right direction.
Thank You

We are going to use a barcode scanner to input data into the application, and it sends TAB on successful scans (I think can make it send CR as well).

TAB moves the focus to the next column to the right. Can it be configured to stay in the same column, but drop to the next row similar to what we can do in Excel? Basically, I need to scan the serial numbers of a bunch of items, and each one be on a new row.

Thanks!
Nate

By disable I would need to remove the following on a cell: tab index so when tabing to a cell it skips over it, going into the edit mode (I tried using the "readonly" type but this still puts it in edit mode but just doesn't allow typing), auto fill functionality.

Right now I'm using the preopen event to search to see if a column is in a list of columns which are editable and I'm planning on adding custom functionality to see if it meets other data criteria to be editable or not but this only solves part of my problem.

It would be great if there was an option on initiation that I could set which would do this. Is there?

Also, it seems to mess up the bootstrap styling. When you focus on a cell and that blue square drag icon shows up it is not at the bottom left of the cell it gets pinned to the right-center of the cell and the blue dotted drag outline when dragging seems to be offset up about 10-20 pxs so it does not exactly outline the cells you want to autofill. Lastly when you focus on a cell it adds an ugly blue 3px border to the cell which partially overlaps with the bootstrap form input in the cell.

I think the first issue is more important since it breaks functionality but it would be great to have the cosmetic issues looked into if possible.

Problematic Keys:
{Num Lock}, {Caps Lock}, {Scroll Lock}
{F1}-{F12}
{PAUSE}
{INS}
Various media keys including Right Context Menu, Vol+/-, Mute etc.

You get the idea.

Example:
You can see this behavior on this page:
KeyTable

I have looked at key for KeyTable since documentation states it will pick up keys that are not handled by KeyTable. I don't get callbacks for the various navigation keys like {TAB}, {Arrows}, {HOME}, {PgUp} but I do get callbacks with the problematic keys listed above. By this point the inline edit has already been triggered.

Workaround:
It's easy to workaround this in the key callback by filtering what keys I expect to trigger inline editing and using close() for anything else. I figured at some point it would make sense to have a more logical baseline for what keys would initiate an inline edit.

I'm positive this will land far down on one of your lists (as it should being there's a workaround) but just throwing it out there.

I have an inline editor and am using keys to tab and edit data. If i have a jquery UI datepicker field and do the following -

1. Tab into the field, the datepicker appears as expected
2. Choose a date with the mouse
3. Hit tab to move to the next field

the cell has lost focus so hitting tab starts tabbing through the non datatables elements on the page.

Is there any way to suppress the blur event for that field (not the table) so it stays in focus? Is there a preblur event for the cell (not the table)?

I also get this problem when using the mouse to move the scrollbar in a selectize dropdown and I'm assuming it's the same issue. Some way of suppressing the blur would be useful if available.

Thanks.

I would like there to be an option to configure a jQuery selector for elements that, when clicked, should not cause key-blur.

$('#example').DataTable({
  keys: {
    columns: ':not(:first-child)',
    blurable: true,
    blurableIgnore: '.no-keyblur'
  }
});

I need this feature for custom controls outside the table wrapper that interact with the selected cell.

I already added this feature to my fork: https://github.com/StevenLiekens/KeyTable/commit/c6ecbb3195cb08a02fd233be4abea10894bebf66

Example: https://editor.datatables.net/examples/extensions/keyTable.html

1. Click any first name field. This field is required.
2. Hit the Delete key to clear the field
3. Click any other column to trigger key-blur

The behavior right now is that the selected "first name" is reverted to its original value, because an empty value is a field error.
Instead I'd like the field to stay focused until the user fixes their mistake, or until they explicitly hits the Esc key.

Can it be done? Perhaps with the right combinations of form-options and some custom code in close/blur events.

Any idea???

1. Why is the click event handler not omitted?
2. How does keytable deal with the :not(:first-child) specifier? (All 'special' columns like an 'edit' button and row-reorder keys do not fire this event.)

Edit:

The second question just answered itself: I was using a .editable class on inline-editable cells in the keys.columns option. Apperently, this uses the editable class of the column, not of the individual cells.

I'm using KeyTable to provide Excel like navigation / editing to an in-line editing datatable.

What I've found is that our browsers act differently when working with KeyTable.

Google Chrome seems to work correctly whilst Internet Explorer doesn't provide the same enter key / arrow key functionality.

With Chrome; users can navigate to a cell via the arrow keys and press enter. This will set focus on the cells 'select list' and 'drop' the list for viewing. User then use the arrow keys (up / down) to make their option selection and press the enter key to complete the selection.

With Internet Explorer; users can navigate to a cell via the arrow keys and that's it. The enter key has no effect on the contents of the cell (the select list).

Is there something I can do to match the functionality found in Google Chrome?

Please let me know and thanks,

~ Dave

I think line 873 of dataTables.keyTable.js should be:

        var opts = $.extend( {}, defaults, init );

I'm using KeyTable to add Excel like functionality to my inline editor. What I'd like is to have the row selection change when the user moves to a new row via the keyboard arrow keys.

What I'm specifically looking for is the style of the row to change to "selected" like it does when I use the mouse and click a row. The background of the row changes to a darker gray to let the user see that it's selected.

Please let me know what I can do to setup my table / editor.

Thank you,

~ Dave

Obviously I want Inline editing to be started on pressing the enter key on the keyboard.

Unfortunately (in my case) the enter key will trigger the Editor.prototype.submit event causing the inline state te close immediatly after starting. I checked all this debugging in javascript step by step. So I know the inline editing starts correctly.

Is there anyway of preventing this? I have tried originalEvent.preventDefault() which works on any other key then the enter??

Here is my code:

      table

            .on('key', function (e, datatable, key, cell, originalEvent) {
                    switch(key) {
                        case 13:
                            //ENTER KEY DOES NOT WORK !?
                            var response = editor
                                .one('close', function () {
                                    table.keys.enable();
                                }).inline( cell.node(), { submit: 'allIfChanged' } );
                            table.keys.disable();

                            originalEvent.preventDefault();

                            break;
                        case 78:
                            //'N' KEY DOES WORK !!!
                            var response = editor
                                .one('close', function () {
                                    table.keys.enable();
                                }).inline( cell.node(), { submit: 'allIfChanged' } );
                            table.keys.disable();

                            originalEvent.preventDefault();


                            break;
                        default:
                            //console.log('Key press: ' + key + ' for cell ' + cell.data());
                    });

Thanks