Confirmation modal dialog

I want to add a confirmation dialog when a user clicks a delete button.
Can this be done with the Radzen Blazor components or do I need to create my own component using Bootstrap modal: https://getbootstrap.com/docs/4.0/components/modal/

I'm having trouble finding a good Blazor example.

Check this thread: How to show a message yes/no before delete record?

Thanks @enchev that is what I'm looking for.
I did a search before posting but didn't find that page.

I do have some trouble understanding how to get this piece working:

async Task ShowSimpleDialog() => await DialogService.OpenAsync("Simple Dialog", ds =>
    @<RadzenCard Style="padding: 20px;">
        <p Style="margin-bottom: 10px;">Confirm?</p>
        <div class="row">
            <div class="col-md-12">
                <RadzenButton Text="Ok" Click="() => ds.Close(true)" Style="margin-bottom: 10px; width: 150px" />
                <RadzenButton Text="Cancel" Click="() => ds.Close(false)" ButtonStyle="ButtonStyle.Secondary" Style="margin-bottom: 10px; width: 150px" />
            </div>
        </div>
    </RadzenCard>);
}

When I put this in the code block of myPage.razor I don't get compile errors which I do get when I put the code in myPage.razor.cs.
My delete method is in myPage.razor.cs, but it has no access to ShowSimpleDialog().

How do I change the code of ShowSimpleDialog() to make it work in my code-behind file or even better as a generic ConfirmDelete component?

I found the solution for you.

First, you have to create a component for the dialog layout. In the component, please add the line
@inject Radzen.DialogService ds;

Then put your <RadzenCard> code to the component. Let say the component name is "CustomDialog".

Finally, change your DialogService.OpenAsync line to:
async Task ShowSimpleDialog() => await DialogService.OpenAsync<CustomDialog>("Simple Dialog",null);

If your component need to be passed parameters, change the null to the parameter dictionary.

1 Like

I'm now using the new DialogService.Confirm() and it is working great.

This question can be closed.

I am new to use Radzen. I would like to use DialogService.Confirm() to delete a row of record. I wonder how to pass the delete function when I click the button "Yes".
<RadzenButton Text=@($"Show confirm dialog") Click="@(args => dialogService.Confirm("Are you sure?", "MyTitle", new ConfirmOptions() { OkButtonText = "Yes", CancelButtonText = "No" }))" />
Any hint will be greatly appreciated.

I use this:

<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Text="Delete client" Size="ButtonSize.Medium"  Click="@((args) => ClientDeleteButtonClick(client.Id))" @onclick:stopPropagation="true"></RadzenButton>
protected async System.Threading.Tasks.Task ClientDeleteButtonClick(int clientId)
{
    // Ask for confirmation:
    var confirmResult = await DialogService.Confirm(
        "Foo", "Bar");

    if (confirmResult.HasValue && confirmResult.Value)
    {
        try
        {
            await ClientService.Delete(clientId);
        }
        catch (System.Exception exception)
        {
            NotificationService.Notify(NotificationSeverity.Error, $"Error",
                $"Foo", duration: -1);
            
        }
2 Likes

Thanks Paul. It works like charm!

1 Like

To those souls looking for solutions to Confirm buttons on delete, have a look at this post:

hi,
i am trying to implement the confirm dialog, however its appearing behind my modal page. any ideas?

What is a modal page? You need to be more specific @Sammy - it isn't clear if you are using the confirmation from another Radzen dialog or something else.

Hi @korchev , I have a Delete button on a TemplateForm on a Radzen Dialog, so when I click on it the confirmation message is hidden behind the main Dialog page(open as a modal). I will share screenshots to make it more clearer.

Hi, Am good , its okay now, thanks alot.