How to cancel delete when using built in command

[Sam Tran]

Hi,

I'm using the command type "UnboundType.Delete" in a grid row which triggers a javascript function.

In the function, I show a confirm message to give user option to cancel delete.

If the user cancels the delete, the row still disappears from the grid; how can I cancel the delete?

I tried args.cancel based on an old post I found, but that doesn't work.

Here is my function:

        function deleteClicked(args) {

            var grid = $("#BoardsGrid").ejGrid("instance");

            var index = this.element.closest("tr").index();

            var record = grid.getCurrentViewData()[index];

            var id = grid.getCurrentViewData()[index].ID;

            if (confirm("Delete " + grid.getCurrentViewData()[index].Name) === true) {

                alert("Delete id: " + id);

            } else {

                args.cancel = true; <--- This doesn't work, what should go here?

            }

        }

Also, I tried the edit setting "ShowDeleteConfirmDialog", but the deleteClicked function fires before the built in confirm message displays!

So how do I get my function to cancel the delete or how do I wire up a function to only delete when the built in confirm message is true?

As always, thanks so much for your help; it is greatly appreciated!

[Venkatesh Ayothi Raman]

Hi Sam, 

Thanks for using Syncfusion products. 

We went through your code example that you have shared for us and found that you are trying to prevent the delete action from Grid by using confirmation dialog. We have built-in support to show the delete confirmation dialog by setting the ShowDeleteConfirmationDialog property as true.  

If we enable this property, then Confirmation Dialog will show while user click the Delete button. So, users click Ok button then the record has been deleted. If user clicks cancel button then delete action prevented. Please refer to the following Help documentation for more information, 

Help Documentation: https://help.syncfusion.com/aspnetmvc/grid/editing#confirmation-messages 

We can also customize the delete confirmation message and we have already created a knowledge base documentation for this, 

https://www.syncfusion.com/kb/5059 

If we misunderstood your requirement, then could you please provide more details about your requirement with exact scenario? It would be helpful for us to find the problem and provide the solution accordingly. 

Regards, 

Venkatesh Ayothiraman.  

[Sam Tran]

 Here is my grid:

           Dim GridBuilder = Html.EJ().Grid(Of AdvantageFramework.Database.Entities.SprintHeader)("BoardsGrid")

            GridBuilder.Datasource(Model)

            GridBuilder.EnableToolbarItems(False)

            GridBuilder.SelectionType(SelectionType.Single)

            GridBuilder.EditSettings(Sub(Edit)

                                         Edit.AllowDeleting() 

                                         Edit.ShowDeleteConfirmDialog()

                                     End Sub)

            GridBuilder.Columns(Sub(Column)

                                    Column.Field("ID").Visible(False).IsPrimaryKey(True).Add()

                                    Column.HeaderText("").Commands(Sub(command)

                                                                       command.Type("ViewDetails").ButtonOptions(New Syncfusion.JavaScript.Models.ButtonProperties With {

                                                                                                                      .ContentType = ContentType.TextOnly,

                                                                                                                      .Text = "View",

                                                                                                                      .Click = "viewDetailsClicked"}).Add()

                                                                   End Sub).Width("88px").Visible(True).Add()

                                    Column.Field("Name").HeaderText("Name").EditType(EditingType.StringEdit).Add()

                                    Column.Field("Description").HeaderText("Description").EditType(EditingType.StringEdit).Add()

                                    Column.Field("CreatedDate").HeaderText("Created").TextAlign(Syncfusion.JavaScript.TextAlign.Right).Format("{0:d}").Width(150).Add()

                                    Column.Field("CreatedByUserCode").HeaderText("By").TextAlign(Syncfusion.JavaScript.TextAlign.Right).Width(100).Add()

                                    Column.HeaderText("").Commands(Sub(command)

                                                                       command.Type(UnboundType.Edit).ButtonOptions(New Syncfusion.JavaScript.Models.ButtonProperties With {

                                                                                                                      .ContentType = ContentType.ImageOnly,

                                                                                                                      .Text = "Edit",

                                                                                                                      .PrefixIcon = "e-icon e-edit",

                                                                                                                      .Click = "editClicked"}).Add()

                                                                       command.Type(UnboundType.Delete).ButtonOptions(New Syncfusion.JavaScript.Models.ButtonProperties With {

                                                                                                                      .ContentType = ContentType.ImageOnly,

                                                                                                                      .Text = "Delete",

                                                                                                                      .PrefixIcon = "e-icon e-delete",

                                                                                                                      .Click = "deleteClicked"}).Add()

                                                                   End Sub).Width("145px").Visible(True).Add()

                                End Sub)

            GridBuilder.Render()

Here is my javascript function:

        function deleteClicked(args) {

            var grid = $("#BoardsGrid").ejGrid("instance");

            var index = this.element.closest("tr").index();

            var record = grid.getCurrentViewData()[index];

            var id = grid.getCurrentViewData()[index].ID;

            alert("Delete id: " + id);

        }

My problem is that my javascript function deleteClicked fires BEFORE the confirmation is displayed.

[Venkatesh Ayothi Raman]

Hi Sam, 

Thanks for the update. 

Yes, button click event triggers before the confirmation message is shown. This is the behavior of the JavaScript click function. As from your query, we suspect that do you want a JavaScript function after delete confirmation dialog shown in the Grid as well as if we user clicks the ‘Ok’ button, then you can check that corresponding ID and perform the delete action or prevent the delete action.  

If this is your requirement, then we suggest you use ActionBegin event in Grid. In this event triggers for every grid action before its starts. Please refer to the following code example, 

@(Html.EJ().Grid<SyncfusionMvcApplication8.OrdersView>("BoardsGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        . .  . 

                  .ClientSideEvents(e=>e.ActionBegin("actionBegin")) 

               

        .Columns(col => 

        { 

            ..  . 

 

        })) 

 

<script> 

 

 

    function actionBegin(args) { 

 

 

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

 

            var grid = $("#BoardsGrid").ejGrid("instance"); 

            . .  . 

            alert("Delete id: " + id); 

 

            if (confirm("Delete " + grid.getCurrentViewData()[index].Name) === true) { 

                alert("Delete id: " + id); 

            }  

              else 

                args.cancel = true; //here you can prevent the delete action from grid 

      

        } 

    } 

</script> 

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

If the above the solution doesn’t meet your requirement, then could you please provide exact requirement details with scenario? 

Regards, 

Venkatesh Ayothiraman.