Custom Delete Confirmation Dialog

[Preveen]

Hi,

How do I create a custom delete confirmation dialog?

I have already enabled 'ShowDeleteConfirmDialog' in 'GridEditSettings'.

I want to use my own dialog for when the user tries to delete a record from a grid.

Thanks.

[Rahul Narayanasamy]

Hi Preveen, 

Greetings from Syncfusion. 

Query: Custom Delete Confirmation Dialog - I want to use my own dialog for when the user tries to delete a record from a grid. 

We have validated your query and you want to use your own customized delete confirmation dialog. We suggest you to cancel the Default Grid deleting action in the Grid’s OnActionBegin event handler, and show your customized Delete confirmation dialog based on the flag variable “DeleteConfirm”. And to delete a record when pressing OK button in the confirmation Dialog, we suggest you to call the DeleteRecord() method of Grid programmatically to Delete the selected record. Please refer the codes below, 

    <SfDialog @ref="Dialog" @bind-Visible="@isVisible" Width="250px" ShowCloseIcon="true" IsModal="true"> 

        <DialogTemplates> 

            <Header> Delete Record</Header> 

            <Content> You are about to Delete a Record @SelectedData.OrderID ?</Content>   @*here you can customize the dialog content text as per your need*@ 

        </DialogTemplates> 

        ... 

   </SfDialog> 

 

   <SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" Height="315"> 

        <GridEvents OnActionBegin="OnActionBegin" OnActionComplete="OnActionComplete" RowSelected="RowSelectHandler" TValue="Order"></GridEvents> 

        ... 

   </SfGrid> 

 

 

 

@code{  

    ... 

    private SfDialog Dialog; 

    private bool isVisible { get; set; } = false; 

    private bool DeleteConfirm { get; set; } = false; 

 

    private void OkClick() 

    { 

        DeleteConfirm = true; 

        Grid.DeleteRecord();   //delete the record while clikcing OK button 

        this.isVisible = false;    //hide external dialog 

    } 

    private void CancelClick() 

    { 

        this.isVisible = false; 

    } 

 

    public void OnActionBegin(ActionEventArgs<Order> Args) 

    { 

        if (Args.RequestType.ToString() == "Delete" && !DeleteConfirm) 

        { 

            Args.Cancel = true; 

            Dialog.Show();   //show external dialog 

        } 

    } 

    public void OnActionComplete(ActionEventArgs<Order> Args) 

    { 

        if (Args.RequestType.ToString() == "Delete" && DeleteConfirm) 

        { 

            DeleteConfirm = false;    //set flag to false 

        } 

    } 

    ... 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/160145/ze/SyncfusionBlazorApp12107347123  

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/events/#onactionbegin  

https://blazor.syncfusion.com/documentation/datagrid/events/#onactioncomplete  

Please let us know if you have any concerns. 

Regards, 

Rahul