New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Customizing the Delete Confirmation Dialog

Environment

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

Description

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

Solution

Declare a custom Dialog.
Include a custom command button.
Hook up for the Click event of the command button.
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.
In the custom dialog, add two options to confirm/cancel the deletion.
On confirm delete the record.
On cancel close the Dialog.

Index.cshtml
@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)
    )
Script.js
        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.

Customizing the Delete Confirmation Dialog

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also