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

Customize Confirmation Window

Environment

Product Progress Telerik UI Grid for ASP.NET MVC
Progress Тelerik UI version 2021.3.1207

Description

How can I customize a confirmation dialog in the Telerik UI for ASP.NET MVC 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 Grid:

1. Add a custom Delete command to the Grid
2. Define a Kendo Template to show customized message based on the dataItem being deleted
3. In the handler of the custom command's click event initialize a Window and set its content
4. Attach another click event to the confirmation button, then use the Grid's DataSource [remove method](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/remove) 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(){
                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>

See Also

In this article