ConfirmDialog

[Juan Jose Uribe]

How to show confirmation dialog when click on save button in EditMode.Dialog

I tried coding my confirmation function, using the SAVE button of the edit form: $("#EditDialog_grid_Save").click(function ()....) but never reach the function.

Thanks for your help!

[Venkatesh Ayothi Raman]

Hi Juan, 

Thanks for using Syncfusion products. 

As from your query, we suspect that you want to render the confirmation dialog while saving the edited/inserted record the Grid when using Dialog edit mode. If so, we have achieved your requirement using actionBegin event in Grid. Please refer to the following code example , Help documentation and Sample, 

Code example: 

[Html] 

<div id="confirmationDialog" style="display:none"> 

 

                    <div> Are you sure you want to save changes?</div> 

                    <input type="button" id="Ok" value="OK" /> 

 

                    <input type="button" id="Cancel" value="Cancel" /> 

                </div> 

 

 

$("#Grid").ejGrid({ 

 

. . .               

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: ej.Grid.EditMode.Dialog }, 

                     . .  .                 

                actionBegin: function (args) { 

                     

                    if (args.requestType == "save") { 

                        //Based on the flag variable perform/prevent the save operation in Grid 

                        if(flag){                       

                            args.cancel = true; //prevent the default save operation in Grid 

                         

                            $("#confirmationDialog").ejDialog({ enableModal: true, showHeader: false }); //rendered the confirmation dialog 

                            $("#confirmationDialog").ejDialog("open"); 

                            $("#Ok").ejButton({ click: "save" });  

                            $("#Cancel").ejButton({ click: "cancel" });                            

                        } 

                    } 

                }, 

                columns: [ 

. .  . 

                ] 

            }); 

        }); 

 

 

  //Ok Button click function of confirmation Dialog 

        function save() { 

 

            var gridObj = $("#Grid").ejGrid("instance"); 

            flag = false; 

            gridObj.endEdit(); 

            $("#Grid_dialogEdit").ejDialog("close"); //Close the Edit form dialog 

            $("#confirmationDialog").ejDialog("close"); //close the confirmation Dialog 

             

            flag = true; //set the flag value as true  

             

        } 

 

//Cancel Button click function of confirmation Dialog 

        function cancel() { 

            $("#Grid_dialogEdit").ejDialog("close"); //Close the Edit form dialog 

            $("#confirmationDialog").ejDialog("close"); //close the confirmation Dialog 

        } 

Help documentation: 

https://help.syncfusion.com/api/js/ejgrid#events:actionbegin 

https://help.syncfusion.com/api/js/ejgrid#methods:endedit 

Sample: http://jsplayground.syncfusion.com/a0hbp4ud 

If we misunderstood your requirement then could you please provide more information about your requirement? 

Regards, 

Venkatesh Ayothiraman. 

[Juan Jose Uribe]

YES! That's what i wanted.

Thanks so much!

[Venkatesh Ayothi Raman]

Hi Juan, 

Thanks for the update. 

We are very happy to hear that your requirement is achieved. 

Regards, 

Venkatesh Ayothiraman.