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

Customizing the Delete Confirmation Dialog


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


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


  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

        .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");
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Model(model => model.Id(p => p.ProductID))
            .Read(read => read.Action("EditingPopup_Read", "Grid"))
            .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
        .Title("Clinic supervisor")
        .Content("<p>Are you sure you want to delete this clinical supervisor?<p>")
        .Actions(actions =>
        var currentDataItem;

        function onClick(e){
             var tr = $("tr"); //get the row for deletion
             var data = this.dataItem(tr);
             currentDataItem = data;
        function onConfirm(e){
            var grid = $("#grid").data("kendoGrid");
        function onCancel(e){

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

See Also

In this article