how to bind Kendo grid custom command click event?

Question

How can we use custom delete confirmation message box while working with Kendo UI Grid ?

I am working on ASP.NET MVC4 application.And below is the code of my Kendo Grid.

I want to use custom confirmation message box in place of default Destroy command confirmation box.And for that i am using custom command in place of Destroy command.

But my problem is i want to fire one serer side action method in .Datasource section(just like in below code for Destroy command),but i don't know how to fire that action with Custom command.

Can any one help me out on this ?

<script id="XYZTemplate" type="text/kendo-tmpl">        
@(Html.Kendo().Grid<Gts.Core.Dto.XYZDto>()                        
        .Name("XYZItem")  
        .Columns(columns =>
        {                
            columns.Bound(e => e.ID).Width(97).ClientTemplate("<span style=\"float:left\">\\#=Number\\#</span>").HtmlAttributes(new { style = "text-align:left;" });
            columns.Bound(e => e.Qty).Width(30);
            //columns.Command(command => { command.Destroy(); });    
            columns.Command(command => command.Custom("Delete").Click("deleteRow"));             
        })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(p => p.ID))
                    .Read(read => read.Action("Items_Read", "Product", new { ID = "#=ID#", productId = "#=FKProductID#" }))                                                                
                    //.Destroy(update => update.Action("Items_Destroy", "Product"))                      
                )


         // .Events(events =>      
     events.DataBound("dataBoundChild").Edit("dataBoundEdit").Remove("deleteProductItemChild").Save("datasourceChange"))

         .Events(events => events.DataBound("dataBoundChild").Edit("dataBoundEdit").Save("datasourceChange"))

        .Editable(editable => editable                
            .Mode(GridEditMode.InCell)
            .DisplayDeleteConfirmation(false))

        .ToClientTemplate()
)
</script>                            

Answer 1

In your deleteRow function, after the you removed the row from grid, use the following code to sync the grid. The sync function will fire server-side actions accordingly depends on the changes you have made to the grid.

$("#XYZItem").data("kendoGrid").dataSource.sync();