Menu
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?
900
(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"));
});
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: ' ', 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: ' ', 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
