Mvc Grid Delete Row Notification Dialog

[Ling Lin]

Is there a way to pop up a deletion notification dialog with some selected row data when the delete button is clicked? Syncfusion MVC grid 2011 has a delete button on the top section of the grid. I know it pops up a dialog when clicking on delete button with no row selected. Let me know. Thanks,
-LL

[Eswari S]

Hi Ling,

Thank you for your interest in Syncfusion products.

Your requirement can be achieved by using “OnActionBegin” event handler.

Please refer the below code snippets.

1.[Aspx]

<% =Html.Syncfusion().Grid("CRUD")
….
….
.ClientSideEvents(events =>
{
events.OnActionBegin("deleteConfrimation");
})
…..
%>
2.[javascript]



Please let us know if you need further assistance.

Regards,
Eswari.S

[Ling Lin]

Hi Eswari,

Thanks for the message. There were two issues for me.

1. For some reason, the cancel didn't work. I can get the event to work and the following script deleteConfirmation was called. However, regardless my selecting OK or Cancel button on the confirm message window, it always delete my row.

function deleteConfrimation(sender, args) {
if (confirm("Are you sure you want to delete the record?") == false)
args.cancel = true;
}

2. Is there a way to tell who is calling the deleteConfirmation function? Right now, with the OnActionBegin event, deleteConfirmation is called regardless I'm clicking on Add, Edit, or Delete grid view button. I have checked args.RequestType field in the deleteConfirmation function. It was undefined.

-LL

[Eswari S]

Hi Ling,

Thanks for the update.

1. Delete Cancel button is not working:

Delete Cancel button was working in our sample. We were unable to reproduce this issue, so could you please share your sample files so that we can look into it and suggest you a solution quickly.

2. Request Type in the delete Confirmation function:

By checking the condition 'args.requestType == "Delete"', we can make the delete Confirmation function as specific to the Delete action.

Please refer the below code snippets:

[javascript]



Please let us know if you need further assistance.

Regards,
Eswari.S

[Ling Lin]

Hi Eswari - Thanks for the response. Would you please send me a sample project please? I have tried the script you posted above.
- "args.cancel = true" doesn't do anything. It went ahead delete the row anyway.
- The "args.requestType" was null in deleteConfirmation function for the OnActionBegin event, so it meant I couldn't check which button event it was. I have used args.requestType in OnActionSuccess event in the same code. The "args.requestType" was valid in this case.

If you have a sample project, maybe it's easier for me to see the difference. Also my syncfusion dll is 8.304.0.21 if it helps. Thanks,
-LL

[Eswari S]

Hi Ling,

We have implemented the "args.cancel = true" in 9.1 version, hence it will not work with 8.3 version. To achieve your requirement, you have to upgrade the version into 9.1 otherwise if you wish to continue with 8.3 version, then we will provide you the patch. However, we do not provide confidential information and patches in the general forum, so could you please create a new incident such that we can provide the patch for you.

Please let us know if you need further assistance.

Regards,
Eswari.S

[rcsatheeshkumar]

Could you please provide sample for doing the same in MVC3 essential grid using unbound column for delete.

[Bala Murugan A.S]

Hi Ling Lin,

Thanks for the update.

We have prepared a simple sample to demonstrate the delete confirmation dialog with Unbound Column delete and the same can be downloaded from the below link.

Sample link: http://www.syncfusion.com/downloads/Support/DirectTrac/92147/GridDeleteConfirmDialog-1149802391.zip

Please try the above sample and let us know if you have any concerns.

Regards,
Bala Murugan A.S

[Robert Foley]

While I can get the delete confirmation to work, I am unable to use the JavaScript confirm dialog in our environment.  I was trying to reproduce the confirm dialog with your MVC Dialog, but I could not figure out how to get it to block the completion of the OnActionBegin event handler like the confirm dialog does without freezing the JavaScript.  I opted to cancel the event and then open the MVC Dialog to confirm the delete and then try to programmatically call the grid to delete the row in the OnOK handler of the MVC Dialog.  I can't seem to find a method to delete a row in the grid programmatically.  Is there a way to do this?

[Alan Sangeeth S]

Hi Robert, 

Thank you for your interest in Syncfusion products. 

We glad to let you know that your requirement can be achieved by using “OnActionBegin” client side event.  

Please refer the below code snippets to achieve this. 

[Aspx] 

1.Created Dialog Box using Syncfusion Dialog

<div id="myDialog" title="Delete Confirmation Dialog" style="display: none">

            Are you sure you want to delete the record?

            <input type="button" id="confrim" value="Confirm" />

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

                       </div>

              <%=Html.Syncfusion().Dialog("myDialog").MinHeight(10).Height(80).Modal(true).AutoOpen(false)%>

     

                2.ClientsideEvent

                                       .ClientSideEvents(events =>

                                          {

                                              events.OnActionBegin("deleteConfirmation");

                                          })

            [javascript]

           <script type="text/javascript">

               window.confirmed = false;

        function deleteConfirmation(sender, args) {

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

                       $("#myDialog").dialog("open");

                if (!window.confirmed)

                           args.cancel = true; // Deletion operation is cancelled to prevent automatic deletion before confirmation

                window.confirmed = false;

                   }

        }

 

               $("#confrim").click(function () {

            var gridObj = $find('SampleGrid'); //To get the Grid Object

            window.confirmed = true //It is set to true to perform the deletion when delete request is sent from confirm button

            gridObj.sendDeleteRequest(); //Delete Request is sent when confirm button is clicked

                          $("#myDialog").dialog("close");

        });

               $("#cancel").click(function () {

            $("#myDialog").dialog("close");

               });

    </script>

           For your convenience, we have prepared a simple sample and the same can be downloaded from the below link. 

 Sample Link: GridDeleteConfirmDialog.zip  

             Please check the above sample and let us know if this is helpful.

 

Regards,

Alan Sangeeth S