Question

I want to execute an action when click event of a delete button in a grid is done. How can I know when is clicked in Javascript?

Answer 1

(Read IMPORTANT at the end)

Use:

$("tr .k-grid-delete", "#grid").on("click", function(e) {
    alert("deleted pressed!");
})

Where #grid is the id of your grid.

If you want to know the data item you can do:

var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));

Alternatively, you can define the command in the grid.columns as:

{
    command: [
        "edit",
        {
            name : "destroy",
            text : "remove",
            click: myFunction
        }
    ],
    title  : "Commands",
    width  : "210px" 
}

where myFunction is:

function myFunction(e) {
    alert("deleted pressed!");
    var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
    // item contains the item corresponding to clicked row
}

IMPORTANT: You might want to define you own destroy button where only the styling is copied from the original one (no other actions / checks). If so define your grid.columns.command as:

{
    command: [
        "edit",
        {
            name     : "destroy",
            text     : "remove",
            className: "ob-delete"
        }
    ],
    title  : " ",
    width  : "210px"
}

and then define:

$(document).on("click", "#grid tbody tr .ob-delete", function (e) {
    e.preventDefault();
    alert("deleted pressed!");
    var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
    // item contains the item corresponding to clicked row
    ...
    // If I want to remove the row...
    $("#grid").data("kendoGrid").removeRow($(this).closest("tr"));
});