Add extra button to Grid Dialog Edit mode

Question

The following picture is the Grid data entry using the dialog mode. The default dialog for Add have 2 buttons which is the SAVE and CANCEL. How can i add extra button with own function to it?

The html button I want to add: <button style="position: absolute; left: 2px;" type="button" class="e-control e-btn e-lib e-primary e-flat">BACK</button>

I have find a thread teach about change the button name thtough the args.dialog.element.querySelectorAll(".e-primary")[0].innerHTML from https://www.syncfusion.com/forums/142800/customize-buttons-in-dialog-edit-mode

But how to add extra html element into

Sujith Kumar Rajkumar · Accepted Answer

Hi Hee, 
 
Greetings from Syncfusion support. 
 
We are glad to hear that your query has been resolved. Apart from the way that you mentioned, you can also use the following approach to render additional buttons in the Grid’s add/edit dialog, 
 
This can be achieved by pushing the new button model to the rendered dialog and refreshing it in the Grid’s actionComplete event when the argument requestType is ‘add’(Add dialog) and ‘beginEdit’(Edit dialog). 
 
This is demonstrated in the below code snippet,  
  




// Grid’s actionComplete event handler  
onActionComplete(args) {  
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {  
            // New button model  
            var newFooterButton = { buttonModel: { content: 'custom' }, click: this.onCustomButtonClick.bind(this) };  
            // Button model is pushed to the dialog’s buttons property and refreshed  
            args.dialog.buttons.push(newFooterButton);  
            args.dialog.refresh();  
        }  
}  
  
// Custom button click event  
onCustomButtonClick(args) {  
        alert('Add/Edit dialog custom footer button clicked');  
}  
  
We have prepared a sample based on this for your reference. You can find it below, 
  
Sample: https://stackblitz.com/edit/angular-bnqcfs-m1xjyd?file=app.component.ts  
  
API link: https://ej2.syncfusion.com/angular/documentation/api/grid/#actioncomplete  
  
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R

Hee Phang · Answer

I have found out the solution to solve my problem.

let backBtn = document.createElement("button");

backBtn.classList.add("e-control","e-btn","e-primary","e-flat");

backBtn.type = "button";

backBtn.innerText = "BACK";

backBtn.style.cssText = "position: absolute; left: 2px;";

args.dialog.element.querySelector(".e-footer-content").prepend(backBtn);

Laurin S · Answer

Hi,unfortunately, the "args.dialog.refresh()" statement has a negative side-effect, i.e. it leads to a misfunctionality of the dialog behavior. When hitting enter in the last field of the dialog-form to save the changes, the save-event gets triggered two times. Therefore, the new record gets created two times, which surely not the expected behavior.I've added a demo, that show the error.Step to reproduce the error:1. Click on "Add" in the grid toolbar.2. Fill out all fields of the form in the dialog.3. In the last field of the form ("Ship Country"), hit "Enter" to save the new entry.4. See the Console -> The "save" event was triggered two times.Any idea how to solve that? Thanks.Attachment: react1ukzpp_b8806260.zip

Pavithra Subramaniyam · Answer

Hi Hee,You can overcome this behavior by calling the “setButton”
method instead of the “refresh” method inside the “actionComplete” event to set the
custom buttons. Please refer to the below code example and sample link for more
information.

actionComplete = {(args) => {
    if (args.requestType === 'beginEdit' || args.requestType === 'add') {
      var newFooterButton = {
        buttonModel: { content: 'custom' },
        click: () => console.log('custom button click'),
      };
      args.dialog.buttons.push(newFooterButton);
      args.dialog.setButton(); 
    }
  }}

Sample: https://stackblitz.com/edit/react-hjr9lo-gmdw5xPlease get back to us if you need further assistance on
this.Regards,Pavithra S