Cancel and submit buttons in custom editor modal

bsuk

Throughout my editor modals, I'm adding a custom cancel button, like so:

{   extend: "create", 
        editor: editor, 
        formTitle: '<h5 class="modal-title">Create new whatever</h5>', 
        className: 'btn btn-secondary btn-light',
    
        formButtons: [      
        
        { text: 'Cancel', 
        className: 'btn btn-light m-2', 
        action: function () { this.close(); } },
        
        { text: 'Create', 
        className: 'btn btn-primary', 
        action: function () { this.submit(); } }

        ]
    }

This works fine.

However, when I have a custom "Duplicate" button, as per the example here:
https://editor.datatables.net/examples/api/duplicateButton.html

The code structure looks slightly different, due to it being wrapped in a custom function.
When I try and add an additional cancel button, as below, it doesn't show up at all.
The latest "button" in "editor.buttons" seems to override any previous ones:

{   extend: "selectedSingle",
        text: 'Duplicate',
        className: 'btn btn-secondary btn-light',
        
        action: function ( e, dt, node, config ) {      
        editor
            .edit( table.rows( {selected: true} ).indexes(), {
                title: '<h5 class="modal-title">Duplicate whatever</h5>',
            } )
            
            .mode( 'create' )
            .buttons (
            
            {   text: 'Cancel', 
                className: 'btn btn-primary', 
                action: function () { this.close(); }
            },
    
            {   text: 'Create', 
                className: 'btn btn-primary', 
                action: function () { this.submit(); }
            }
            
            );
        }
}

I hope that makes sense.
Can anyone see a way of adding an additional button in this scenario?

Many thanks in advance for any feedback.

colin

You can pass the buttons as part of the edit(), as shown in the example you linked to.

                    editor
                        .edit(table.rows({
                            selected: true
                        }).indexes(), {
                            title: 'Duplicate record',
                            buttons: [

                                {
                                    text: 'Cancel',
                                    className: 'btn btn-primary',
                                    action: function() {
                                        this.close();
                                    }
                                },

                                {
                                    text: 'Create',
                                    className: 'btn btn-primary',
                                    action: function() {
                                        this.submit();
                                    }
                                }
                            ]
                        })
                        .mode('create');
                }

See example here: http://live.datatables.net/dixozizu/1/edit

Colin

bsuk

Thank you, Colin. That's very helpful indeed! I now have it working.

Sorry for the confusion - I think it caught me off guard that it was "formButtons" in the other example, but just "buttons" in the function version.