New to Telerik UI for ASP.NET Core? Download free 30-day trial

Customize the Delete confirmation dialog

Environment

Product 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 following Telerik REPL example.

In this article