delete row in kendo grid
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<div id="grid"></div>
CSS
* {
font-family: Verdana, sans-serif;
font-size: 12px;
}
JavaScript
var grid = $("#grid").kendoGrid({
dataSource: {
data: createRandomData(50),
pageSize: 10,
schema: {
model: {
fields: {
id: {
type: 'number'
},
FirstName: {
type: 'string'
},
LastName: {
type: 'string'
},
City: {
type: 'string'
},
Title: {
type: 'string'
},
BirthDate: {
type: 'date'
},
Age: {
type: 'number'
}
}
}
}
},
editable: { mode : "incell", confirmation: false },
pageable: {
refresh: true,
pageSizes: true
},
columns: [{
command: [
"edit", {
name: "destroy",
text: "Remove",
className: "ob-delete"
}],
title: " ",
width: "100px"
}, {
field: "FirstName",
width: 90,
title: "First Name"
}, {
field: "LastName",
width: 90,
title: "Last Name"
}, {
width: 100,
field: "City"
}]
}).data("kendoGrid");
$(document).on("click", "#grid tbody tr .ob-delete", function (e) {
alert("deleted pressed!");
var item = grid.dataItem($(this).closest("tr"));
var check = confirm("Do I delete:" + JSON.stringify(item, null, 4));
if (check) {
console.log("-------------------------");
console.log(this);
console.log("-------------------------");
grid.removeRow($(this).closest("tr"));
}
});