How to write Custom delete Confirmation Modal for Kendo Grid in MVC:

How to write Custom delete Confirmation Modal for Kendo Grid in MVC:

For the above task, we need to add custom command for delete operation.For the Click, the argument is the javascript function name.
.Columns(columns =>columns.Command(command => { command.Custom("Delete").Click("deleteRow")); 

Later, you need to tell the kendo Grid that you want to suppress the default behavior for the Delete Action.
.Editable(editable => editable.DisplayDeleteConfirmation(false))

Need to remove the destroy property for the datasource mapping to grid. Like .Destroy for the DataSource has to be removed. We are handling this server side work through script logic.

Now, write the modal window markup for the Delete pop-up.
<div id="modalWindow">
    <h2>Are you sure to Delete?</h2>
    <span class="k-label">Reason For Deletion</span> <input id="txtReasonForChange" class="k-textbox" />
    <button id="yes" class="k-button">Yes</button>
    <button id="no" class="k-button">No</button>
    <span id="validationRFC" class="k-label alert-danger"></span>
</div>

Initialize this modal as a kendo window pop-up.
 var wnd;
    $(document).ready(function () {
        wnd = $("#modalWindow").kendoWindow({
            title: "Delete confirmation",
            modal: true,
            visible: false,
            resizable: false,
            width: 300
        }).data("kendoWindow");
    });

Now write the logic for "deleteRow" function.
function deleteRow(e) {
    e.preventDefault();
    $(document).ready(function () {
        wnd = $("#modalWindow").kendoWindow({
            title: "Delete confirmation",
            modal: true,
            visible: false,
            resizable: false,
            width: 300
        }).data("kendoWindow");
    });
        var grid = this; //Get the grid from which the pop-up is coming
        var row = $(e.currentTarget).closest("tr");
        var reasonForChange;
        var tr = $(e.target).closest("tr"); //get the row for deletion
        var data = this.dataItem(tr);
        wnd.center().open();
         $("#yes").click(function () {
            reasonForChange = $("#txtReasonForChange").val();
            if (reasonForChange.length < 1){$("#validationRFC").html("Please provide the Reason for Deletion");return;}
            grid.removeRow(row); 
            $.ajax({
                url: "/<<ServersideController>>/<<ServersideAction>>",
                type: "GET",
                contentType: "application/json",
                data: <<input the for the action method>>
                success: function (response) {
                    if (!response.Errors)
                    <<Implement the Grid Reload for it to refresh from server and client side>>
                }
            });
            wnd.close();
         });
        $("#no").click(function () {
            wnd.close();
        });

Please comment below if you need any help....Happy Programming!!!