Customizing the Confirmation Window in the Grid
Environment
| Product | Progress Telerik UI Grid for ASP.NET Core |
| Progress Telerik UI version | 2021.3.1207 |
Description
How can I customize a confirmation dialog in the Telerik UI for ASP.NET Core Grid?
Solution
The following example demonstrates how to customize the default Delete confirmation alert box.
To achieve this behavior, use the Window Component, a Kendo UI template, and the remove dataSource method of the Telerik UI for ASP.NET Core Grid:
- Add a custom
Deletecommand to the Grid. - Define a Kendo Template to show a customized message based on the
dataItembeing deleted. - In the handler of the custom command's
clickevent, initialize a Window and set its content. - Attach another
clickevent to the confirmation button, then use the Grid's DataSource remove method to delete the item.
Refer to this REPL sample to review the behavior of the snippet below.
@(Html.Kendo().Window()
.Name("window")
.Title("Are you sure you want to delete this record?")
.Visible(false)
.Draggable()
.Width(500)
.Height(200)
)
<script type="text/x-kendo-template" id="windowTemplate">
<p> Delete <strong>#= ProductName #</strong> ? </p>
<p> We have #= UnitsInStock # units in stock. </p>
<button class="k-button" id="yesButton">Yes</button>
<button class="k-button" id="noButton"> No</button>
</script>
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice).Width(140);
columns.Bound(p => p.UnitsInStock).Width(140);
columns.Bound(p => p.Discontinued).Width(100);
columns.Command(command => {
command.Edit();
command.Custom("Delete").Click("onDelete");
}).Width(110);
})
.ToolBar(toolbar => {
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Custom()
.Batch(true)
.PageSize(20)
.Schema(schema => schema.Model(m => m.Id(p => p.ProductID)))
.Transport(transport =>
{
transport.Read(read =>
read.Url("https://demos.telerik.com/kendo-ui/service/products")
.DataType("jsonp")
);
transport.Create(create =>
create.Url("https://demos.telerik.com/kendo-ui/service/products/create")
.DataType("jsonp")
);
transport.Update(update =>
update.Url("https://demos.telerik.com/kendo-ui/service/products/update")
.DataType("jsonp")
);
transport.Destroy(destroy =>
destroy.Url("https://demos.telerik.com/kendo-ui/service/products/destroy")
.DataType("jsonp")
);
transport.ParameterMap("parameterMap");
})
)
)
<script>
var windowTemplate = kendo.template($("#windowTemplate").html());
function parameterMap(options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
function onDelete(e){
//click event listener on the delete button
e.preventDefault(); //prevent page scroll reset
var tr = $(e.target).closest("tr"); //get the row for deletion
var data = this.dataItem(tr); //get the row data so it can be referred later
var window = $("#window").data("kendoWindow"); //get the client-side instance of the Window
window.content(windowTemplate(data)); //send the row data object to the template and render it
window.center().open();
$("#yesButton").click(function(){
var grid = $("#Grid").data("kendoGrid");
grid.dataSource.remove(data) //prepare a "destroy" request
grid.dataSource.sync() //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)
window.close();
})
$("#noButton").click(function(){
window.close();
})
}
</script>