Show dialog before save in grid

[Andry Christian]

Hello,

I want to show confirm dialog before save, and after clicking "ok" form dialog, save will be continued 

Someone can help me?

Thank you

[Thiyagu Subramani]

Hi Andry , 

Thanks for contacting Syncfusion support. 

Based on your query we suspect that you want to display confirmation dialog for before saving the data in Grid. To achieve your requirement we suggest to render EJ2 dialog with Ok/No buttons.  

We displayed the confirmation dialog popup when updating the data in Grid. In the confirmation dialog when clicking ok button we call endEdit method to save changes in Grid and when clicking No button we call closeEdit method to discard the changes modified in Grid data and called hide method to close the dialog. 

Please refer the below code, sample and reference links.   

[app.component.html] 

<ejs-grid #grid id='Normalgrid' (recordClick)="recordClick($event)" (actionBegin)="actionBegin($event)" 

      (toolbarClick)="toolbarClick($event)"  . . . . . . . . . . . . > 

. . . . . . . .  

    </ejs-grid> 

    <ejs-dialog #Dialog content='Do you want to save your changes?' [buttons]='buttons' width='250px' 

      [visible]='hidden'> </ejs-dialog> 

[app.component.ts] 

public buttons: Object = [ 

    { 

      click: args => { 

        this.flag = false; 

        this.Dialog.hide(); 

        this.gridObj.endEdit(); 

      }, 

      buttonModel: { 

        content: "OK", 

        isPrimary: true 

      } 

    }, 

    { 

      click: args => { 

        this.flag = false; 

        this.Dialog.hide(); 

        this.gridObj.closeEdit(); 

      }, 

      buttonModel: { 

        content: "NO" 

      } 

    } 

  ]; 

. . . . .  

  toolbarClick(args: any) { 

    if (args.item.text === "Update") { 

      args.cancel = true; 

      this.Dialog.show(); 

      this.Dialog.isModal = true; 

    } 

  } 

  recordClick(args) { 

    if (this.gridObj.isEdit) { 

      this.flag = true; 

    } 

  } 

  actionBegin(args) { 

    if (args.requestType === "save" && this.flag) { 

      args.cancel = true; 

      this.Dialog.show(); 

      this.Dialog.isModal = true; 

    } 

  } 

} 

Sample : https://stackblitz.com/edit/angular-9juwre-hchkaw?file=app.component.html 

API link: https://ej2.syncfusion.com/documentation/api/grid/#toolbarclick 

             : https://ej2.syncfusion.com/documentation/api/grid/#closeedit 

             : https://ej2.syncfusion.com/documentation/api/dialog#hide 

             : https://ej2.syncfusion.com/javascript/documentation/api/grid/#recordclick 

             : https://ej2.syncfusion.com/javascript/documentation/api/grid/#endedit 

             : https://ej2.syncfusion.com/javascript/documentation/api/grid/#actionbegin 

UG Documentation:  https://ej2.syncfusion.com/documentation/dialog/getting-started/ 

Please get back to us if you need further assistance. 

Regards, 

Thiyagu S 

[Andry Christian]

Thank you for your answer, it works 

[Thiyagu Subramani]

Hi Andry , 

Thanks for your update. 

We are happy to hear that the provided solution works at your end. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S