Customizing the Delete Confirmation Dialog

Environment

Product	Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version	Created with the 2022.2.621 version

Description

How can I customize the Delete confirmation dialog in the Telerik UI for ASP.NET Core Grid?

Solution

1. Declare a custom Dialog.
2. Include a custom command button.
3. Hook up for the Click event of the command button.
4. When the Click event is triggered, get a reference to the row in which the button is positioned and open the dialog. Save the current record in a global variable.
5. In the custom dialog, add two options to confirm/cancel the deletion.
6. On confirm delete the record.
7. On cancel close the Dialog.

@using Kendo.Mvc.UI

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModelGridPopUp>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice).Width(100);
            columns.Command(command => 
            { 
                command.Custom("Delete").Click("onClick").IconClass("k-icon k-i-close k-button-icon");
            }).Width(160);
        })
        .Pageable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Model(model => model.Id(p => p.ProductID))
            .Read(read => read.Action("EditingPopup_Read", "Grid"))
            .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
        )
    )
    @(Html.Kendo().Dialog()
        .Name("deleteDialog")
        .Title("Clinic supervisor")
        .Content("<p>Are you sure you want to delete this clinical supervisor?<p>")
        .Width(400)
        .Actions(actions =>
        {
            actions.Add().Action("onConfirm").Text("OK").Primary(true);
            actions.Add().Action("onCancel").Text("Cancel");
        })
        .Visible(false)
    )

        var currentDataItem;

        function onClick(e){
             $("#deleteDialog").data("kendoDialog").open();
             var tr = $(e.target).closest("tr"); //get the row for deletion
             var data = this.dataItem(tr);
             currentDataItem = data;
        }
        function onConfirm(e){
            var grid = $("#grid").data("kendoGrid");
            grid.dataSource.remove(currentDataItem);
            grid.dataSource.sync();
        }
        function onCancel(e){
            e.sender.close();
        }

For the complete implementation of the suggested approach, refer to the Telerik REPL project on customizing the delete confirmation dialog.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Customizing the Delete Confirmation Dialog
• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base