In table controls with DataTable as an input

In table controls with DataTable as an input

Loren MaxwellLoren Maxwell Posts: 338Questions: 78Answers: 9

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?

Answers

  • allanallan Posts: 57,244Questions: 1Answers: 9,113 Site admin
    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 MaxwellLoren Maxwell Posts: 338Questions: 78Answers: 9

    @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 MaxwellLoren Maxwell Posts: 338Questions: 78Answers: 9

    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!

Sign In or Register to comment.