How capture destroy event in kendo ui grids when click is done?

javascript jquery kendo-ui kendo-grid

33,129

Solution 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  : "&nbsp;",
    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"));
});

Solution 2

simple. You can make use of remove: to capture destroy event in kendo.

$('#grid').kendoGrid({
        dataSource: gridDataSource,
        scrollable: true,
        sortable: true,
        toolbar: ['create'],
        columns: [
            { field: 'id', title: 'ID', width: 'auto' },
            { field: 'description', title: 'Description', width: 'auto' },
            { field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
            { command: ['edit', 'destroy'], title: '&nbsp;', width: '172px' }
        ],
        editable: {
            mode: 'inline',
            confirmation: false
        },
        save:function(e){
          alert("save event captured");
          //Do your logic here before save the record.
        },       
        remove:function(e){ 
          alert("delete event captured");
          //Do your logic here before delete the record.
        }
    });

$(document).ready(function() {  
    var gridDataSource = new kendo.data.DataSource({
        data: [
            { id: 1, description: 'Test 1', begin: new Date() }
        ],
        schema: {
            model: {
                id: 'id',
                fields: {
                    id: { type: 'number' },
                    description: { type: 'string' },
                    begin: { type: 'date' }
                }
            }
        }
    });

    $('#grid').kendoGrid({
        dataSource: gridDataSource,
        scrollable: true,
        sortable: true,
        toolbar: ['create'],
        columns: [
            { field: 'id', title: 'ID', width: 'auto' },
            { field: 'description', title: 'Description', width: 'auto' },
            { field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
            { command: ['edit', 'destroy'], title: '&nbsp;', width: '172px' }
        ],
        editable: {
            mode: 'inline',
            confirmation: false
        },
        save:function(e){
          alert("save event captured");
        },       
        remove:function(e){
          alert("delete event captured");
        }
    });
      });

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="grid"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

33,129

Author by

vicenrele

Updated on July 13, 2022

Comments

vicenrele almost 2 years

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?
vicenrele over 11 years

How can I get the data of row to delete of database when click event is done?
OnaBai over 11 years

It does! Which version of Kendo UI are you using?
vicenrele over 11 years

I am using v2012.3.1315. In grid.columns I have { command: "destroy", title: " ", width: "110px" }, If I add your code: [ "edit", { name : "destroy", text : "remove", click: myFunction } ] It doesn't work
OnaBai over 11 years

Yes. It is an array of buttons. In the example i put an edit and a destroy.
vicenrele over 11 years

How can I remove only one row?
vicenrele over 11 years

Only works with jQuery +1.83 and not with v2012.3.1315 which I use. I could use v2012.3.1114 of kendoui
OnaBai over 11 years

Here with jQuery 1.7.2 and KendoUI v2012.3.1114. But it is true that it doesn't work with v2012.3.1315. Let me see if I can make my fiddle work with v2012.3.1315
OnaBai over 11 years

Ok! Here (jsfiddle.net/OnaBai/8Nq8X/4) working with v2012.3.1315 and jQuery 1.83. I have had to change how live events are set up. Here (jsfiddle.net/OnaBai/8Nq8X/3) the same with jQuery 1.72.
vicenrele over 11 years

Do you know why the remove functionallity doesn't work on mobile devices? sometimes works but not always
vicenrele over 11 years

Hello. I contact you because I have a question about your example. If I add a grid content with backbone.js (a framework to make Single Page applications), the click event doesn't work on mobile devices. Do you know why? [the example ](jsfiddle.net/vicenrele/Thxtr/48)
vicenrele over 11 years

Ok. Thanks. It's my Android version. But I have another question about your example: here. Regards
uowzd01 almost 9 years

if you need to recover the deleted row, use this: $("#grid").data("kendoGrid").cancelChanges();