KeyTable with rendered buttons and checkboxes

tom@pdp

Hello,

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,

allan

1. Is it possible to make focus on the button using the keys?

Not using KeyTable - that is for cell focus. You coudl probably just use tab without KeyTable though.

1. How by pressing the space bar or enter to call button onClick without having "Unable to automatically determine field from source" each time?

Use columns.editField to tell Editor what field to edit for the column that editing was activated on.

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

The id is always submitted. It is included as part of the data object. Without the id, the server wouldn't be able to update the correct row!

Allan

tom@pdp

Thank you Allan for the quick answer. I'm sure it's hard to understand my questions, but Q. #2 & Q. #3 have something special in them that, probably, nobody else tried to do or never asked.

Question #2: As you can see "data: null". It is just a button. There's no field to edit. I just want to focus on the cell with the button and hit the space to activate the button. Can I tell to the Editor not to submit anything when the focus is on the cell with the button without any data, and when I press the space?

Question #3: For some reason, submit() for the checkbox using KeyTable doesn't submit anything except the value of the checkboxes. Had to figure out how to force doing it using "allIfChanged" in "formOptions". Which seems like not a proper way of doing it. Here are the screenshots:

As you can see nothing was submitted, but all the checkboxes and action.

allan

Can I tell to the Editor not to submit anything when the focus is on the cell with the button without any data, and when I press the space?

This is an interesting one. Yes it can be done, but interfacing it with keys.editor is not something it will do out of the box (assuming you are using that options). key is the event of interest here - you can detect when a key is pressed while a cell is focused on and then take some action (such as checking for the spacebar and then modifying the value and submitting).

The issue comes from the fact that KeyTable doesn't currently provide a method to limit which of the columns it is acting upon should activate its Editor integration. Its either Editor on all KeyTable columns, or on none and you need to do it yourself.

Question #3: For some reason, submit() for the checkbox using KeyTable doesn't submit anything except the value of the checkboxes. Had to figure out how to force doing it using "allIfChanged" in "formOptions".

When inline editing, only one field can have its value changed at a time, so by default inline editing will only submit the changed value (to save the database from unnecessary writes). Using submit: 'allIfChanged' is the correct when to submit the full rows data if that is what you need.

Allan