Kendo UI - Editable confirmation using kendo.confirm

You can override the grid ._showMessage function and place the kendo.confirm invocation within. kendo.confirm is a promise and the .done() handler will correspond to OK (yes, delete the record) button click having occurred, and therein you will remove the row.

$("#grid").kendoGrid({
  … 
  … grid configuration … 
  … 
});

var grid = $("#grid").getKendoGrid();

// save reference to original _showMessage, just in case
grid.__showMessage = grid._showMessage;  

// override _showMessage that the grid._confirmation uses
grid._showMessage = function (messages, row) {
  kendo.confirm(messages.title) // open kendo confirm dialog which is also promise
  .done(function() {
    // done is confirm promise callback for OK
    grid._removeRow(row);
  });
  return false;
}

Note, due to confirm being a promise the _showMessage will return false to internal _confirmation which in not delete the row immediately. Instead the OK/Cancel button click of the confirmation dialog will resolve the promise, and the OK action handler will run and at that point will perform deletion on the row referenced within the override closure.

Thanks all for the response.

Here I provide a successful working demo for you reference. Demo Here!

Basically it need to create a custom button and define the function when clicked.

     { command: [{name: "Delete", iconClass:"k-icon k-i-close", 
            click: function(e) {
            e.preventDefault(); 
            var tr = $(e.target).closest("tr"); 
            var data = this.dataItem(tr); 

            kendo.confirm("Are you sure that you want to delete this record?").then(function () {
            grid.dataSource.remove(data) //prepare a "destroy" request
            grid.dataSource.sync() 
            });
            }        
        }
    ]}