New to Telerik UI for Blazor? Download free 30-day trial

Delete Confirmation Dialog

This article provides information on how to enable the built-in delete confirmation dialog and how you can create a custom dialog:

Basics

The built-in delete confirmation dialog triggers before item deletion. You can enable it by setting the ConfirmDelete parameter of the Grid to true.

Enabling of the Delete Confirmation Dialog

@* Grid with enabled Delete Confirmation Dialog *@

@using System.ComponentModel.DataAnnotations

<TelerikGrid Data=@MyData Pageable="true" Height="400px"
             OnDelete="@DeleteHandler" ConfirmDelete="true">
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Title="ID" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <GridCommandColumn>
            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    async Task DeleteHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        await MyService.Delete(item);

        await GetGridData();
    }

    public class SampleData
    {
        public int ID { get; set; }
        [Required]
        public string Name { get; set; }
    }

    List<SampleData> MyData { get; set; }

    async Task GetGridData()
    {
        MyData = await MyService.Read();
    }

    protected override async Task OnInitializedAsync()
    {
        await GetGridData();
    }

    public static class MyService
    {
        private static List<SampleData> _data { get; set; } = new List<SampleData>();

        public static async Task<List<SampleData>> Read()
        {
            if (_data.Count < 1)
            {
                for (int i = 1; i < 50; i++)
                {
                    _data.Add(new SampleData()
                    {
                        ID = i,
                        Name = "Name " + i.ToString()
                    });
                }
            }

            return await Task.FromResult(_data);
        }

        public static async Task Delete(SampleData itemToDelete)
        {
            _data.Remove(itemToDelete);
        }
    }
}

Custom Delete Confirmation Dialog

To customize the appearance and behavior of the delete confirmation dialog, use one of the following options:

  • Localization - this approach is useful if you want to change just the text of the built-in delete confirmation dialog elements. It does not allow adding item details to the dialog text.

  • Predefined dialogs (DialogFactory) - this option is useful if you want to change the dialog text and include some details for the item the user tries to delete (for example, record name).

  • Dialog Component - this solution allows you to fully customize the rendering and appearance of the dialog. You may set the desired ThemeColor and add any content there, be that custom text, HTML elements or other components.

Read more about customizing the delete confirmation dialog...

See Also

In this article