In table controls with DataTable as an input

Loren Maxwell

I am trying to do in-table form controls: https://editor.datatables.net/examples/simple/inTableControls.html but with DataTable as an input (i.e., for a DataTable in an editor form).

I'm using the field().dt() method as discussed here: https://editor.datatables.net/reference/field/datatable

However when called in this way the api seems to trigger the api for the main form rather than on the secondary form.

Here's the pseudocode:

var dt_as_an_input_editor = new $.fn.dataTable.Editor({
...
})
var main_editor = new $.fn.dataTable.Editor({
...
    fields: [{
...
            label: "DT as an input field",
            name: "dt_as_an_input_field",
            type: "datatable",
            editor: dt_as_an_input_editor,
            config: {
... NOTE: Rows include in table edit and delete buttons
            }
        }]
})

main_editor.field("dt_as_an_input_field").dt().on("click", "button.editor-edit", function (e) {
    e.preventDefault()

    dt_as_an_input_editor.edit($(this).closest("tr"), {
        title: "Edit record",
        buttons: "Edit" // This button closes out the form but does not return to the main form
    })
})

main_editor.field("dt_as_an_input_field").dt().on("click", "button.editor-delete", function (e) {
    e.preventDefault()
    
    dt_as_an_input_editor.remove($(this).closest("tr"), {
        title: "Delete record",
        message: "Are you sure you wish to delete this record?",
        buttons: "Delete" // This button closes out the form but does not return to the main form
    })
})

Are there other methods I should be calling?

allan

main_editor.field("dt_as_an_input_field").dt().on("click"

isn't quite right I think. DataTables' doesn't have a click event that it triggers - what you are looking for is to add it to the DOM.

Try:

let wrapper = main_editor.field("dt_as_an_input_field").dt().table().wrapper();

wrapper.on('click', "button.editor-delete", function (e) {
  ...
});

I think that should then work.

Allan

Loren Maxwell

@allen -- that's not quite working.

I have a beta page on my site where I can show you what I'm referring to, but I'll need to send you a username and password to get the permissions to edit.

I'll send that and the description of how to duplicate what I'm seeing.

Loren Maxwell

Just to document the fix for this, the option nest: true should be added to the dt_as_an_input_editor, like below:

main_editor.field("dt_as_an_input_field").dt().on("click", "button.editor-edit", function (e) {
    e.preventDefault()
 
    dt_as_an_input_editor.edit($(this).closest("tr"), {
        title: "Edit record",
        buttons: "Edit",
        nest: true // <-- Add this option
    })
})

 
main_editor.field("dt_as_an_input_field").dt().on("click", "button.editor-delete", function (e) {
    e.preventDefault()
     
    dt_as_an_input_editor.remove($(this).closest("tr"), {
        title: "Delete record",
        message: "Are you sure you wish to delete this record?",
        buttons: "Delete",
        nest: true // <-- Add this option
    })
})

Many thanks to @allen for taking time to look at the questions and for DataTables and the Editor in general!