1. Home
  2. Forum
  3. Angular - EJ 2
  4. Show dialog before save in grid

Show dialog before save in grid

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

3 Replies
TS Thiyagu Subramani Syncfusion Team December 9, 2020 12:58 PM UTC

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; 
    } 
  } 
} 





Please get back to us if you need further assistance. 

Regards, 
Thiyagu S 


AC Andry Christian December 10, 2020 11:31 AM UTC

Thank you for your answer, it works 

TS Thiyagu Subramani Syncfusion Team December 11, 2020 01:46 PM UTC

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 


Loader.
Up arrow icon