How to pass ID in kendo command

Question

 columns: [
        {
            field: "Name",
            title: "Name"
        },
        {
            template: "<div>#if(data.Count > 0){#<a class='undo' onClick='showSiteName(#:Id#,`#:Name#`)'>#:Count# </a>#} else{#N/A#}#</div>",
            field: "Count",
            title: ""
        },
        {
            command: [
                { name: "edit", template: "<a class=\"k-icon k-i-edit\"  onclick='onButtonClick(#:Id#)' title=\"Update\"></a>" },
                { name: "delete", template: "<span class=\"k-icon k-i-delete\" title=\"Delete\"></span>", visible: function (data) { return data.Count == "0" } }
            ],
            title: "Action"
        }
    ]

In abouve code onButtonClick(#:Id#) ,actually i want to pass ID as a parameter but now i am getting ID not defined error message .

How can i pass on clicked line ID to this function in kendo ?

Answer 1

First, remove the onclick event you've setup. Then setup the dataBound event for your grid. Inside the event, bind to the edit button's click event. Inside the click event, do the following:

1. Get the closest tr
2. Get the data item by calling the dataItem method from the kendoGrid, passing the tr
3. Get your data point from the data item

Here is an example:

dataBound: function() {
  $('.k-grid-edit').on('click', function(e) {
    e.preventDefault();

    var tr = $(e.target).closest("tr");
    var data = $("#grid").data('kendoGrid').dataItem(tr);
    var id = data.Id; 
    console.log(id);
  });
}

Fiddle: https://dojo.telerik.com/ADiteHOc