JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.blueopal.min.css">
<div id="mygrid" />
<div id="window">
<input type="button" class="yesbtn" value="yes" />
<input type="button" class="nobtn" value="no" />
</div>
JavaScript
$(document).ready(function () {
var dataitem = {};
var grid = $('#mygrid').kendoGrid({
dataSource: [{
status: 'On',
description: 'a longer description'
}, {
status: 'On',
description: 'a longer description'
}, {
status: 'On',
description: 'a longer description'
}, {
status: 'On',
description: 'a longer description'
}, {
status: 'On',
description: 'a longer description'
}, {
status: 'On',
description: 'a longer description'
}],
width: 250,
height: 200,
columns: [{
field: "status"
}, {
field: "description",
title: "Description"
}, {
command: [{
name: "delete",
text: "delete",
click: _handleDelete,
imageClass: "ui-icon ui-icon-close"
}],
title: " ",
width: "100"
}]
}).data('kendoGrid');
var kWindow = $('#window').kendoWindow({
width: "500px",
title: "Delete dialog",
visible: false
}).data('kendoWindow');
$('.yesbtn').click(function () {
console.log('My message');
grid.dataSource.remove(dataitem);
kWindow.close();
});
$('.nobtn').click(function () {
console.log('My other message');
dataitem = {};
kWindow.close();
});
function _handleDelete(event) {
dataitem = grid.dataItem($(event.currentTarget).closest("tr"));
kWindow.open();
};
});