Cancel and submit buttons in custom editor modal

Cancel and submit buttons in custom editor modal

bsukbsuk Posts: 92Questions: 26Answers: 2

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.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    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

  • bsukbsuk Posts: 92Questions: 26Answers: 2

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

    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.

This discussion has been closed.