Need to have a confirmation popup on toolbar cancel button

[Deepika]

Hi,

I have requirement where I have a toolbar for a grid, toolbar consist of cancel button,

generally if I Add/Update values to grid and click cancel it will clear the changes and close edit mode.

but on click of cancel I want an confirmation pop (like - You have made changes. If you continue, your changes will be discarded. Do you want to cancel your changes?” with a Yes/No button) before it close the grid editing mode.

How can we achieve it?

Thanks,

Deepika.P

[Thiyagu Subramani]

Hi Deepika, 

Thanks for contacting Syncfusion forum. 

Based on your query we suspect that you want to display confirmation dialog while clicking Grid's cancel button. To achieve your requirement we suggest to render EJ2 dialog with Yes/No buttons. We displayed the confirmation dialogue popup in the grid while pressing the cancel button and when clicking ok button we call closeEdit method to discard changes in grid and when clicking No button we call hide method to close the dialog. 

Please refer the below code, sample and reference links.   

[app.component.html] 

 <ejs-grid #normalgrid id='Normalgrid' (toolbarClick)="toolbarClick($event)" . . . . [toolbar]='toolbar'> 

      <e-columns> 

. . . . .  .  

      </e-columns> 

    </ejs-grid> 

    <ejs-dialog #Dialog content='Do you want to cancel your changes?' [buttons]='buttons' . . > </ejs-dialog> 

[app.component.ts] 

public buttons: Object = [ 

    { 

      'click': (args) => { 

        this.Dialog.hide(); 

        this.gridObj.closeEdit(); 

      }, 

      buttonModel: { 

        content: 'Yes', 

        isPrimary: true 

      } 

    }, 

    { 

      'click': (args) => { 

        this.Dialog.hide(); 

      }, 

      buttonModel: { 

        content: 'NO' 

      } 

    } 

  ]; 

  toolbarClick(args: any) { 

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

      args.cancel = true; 

      this.Dialog.show(); 

      this.Dialog.isModal = true; 

    } 

  } 

Sample : https://stackblitz.com/edit/angular-9juwre-76e13x?file=app.component.ts 

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 

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

Please get back to us if you need further assistance. 

Regards, 

Thiyagu S