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
Clickevent of the command button. - When the
Clickevent 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.
@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.