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

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:

  1. Add a custom Delete command to the Grid.
  2. Define a Kendo Template to show a 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 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>

More ASP.NET Core Grid Resources

See Also

In this article