JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<ol>
<li>Click the Open Window button to show the grid</li>
<li>Click the Details button. The Messagebox should show up once</li>
<li>Close the window (upper right corner)</li>
<li>Open the window again, and click the Details button</li>
<li>The Messagebox shows up twice, or as many times as you've opened the window</li>
</ol>
<button type="button" id="open">Open Window</button>
<div id="window" style="display: none">
<div id="grid" /></div>
JavaScript
$(document).ready(function () {
var window = $("#window").kendoWindow({
height: "280px",
title: "Tracking",
visible: false,
width: "600px",
}).data("kendoWindow");
window.center();
});
$("#open").click(function () {
var window = $("#window").data("kendoWindow");
window.open();
//check if the grid is initialized
if(!$("#grid").data("kendoGrid")) {
showTracking();
}
});
function showTracking() {
var jsondata = [{
'DateTime': '2013-04-05T14:21:31.55',
'Action': 'Complete',
'Method': 'SaveUserSettings'
}, {
'DateTime': '2013-04-05T14:21:30.06',
'Action': 'Begin',
'Method': 'SaveUserSettings'
}, {
'DateTime': '2013-04-05T14:19:15.53',
'Action': 'Complete',
'Method': 'GetTemplates'
}, {
'DateTime': '2013-04-05T14:19:13.197',
'Action': 'Begin',
'Method': 'GetTemplates'
}, {
'DateTime': '2013-04-05T14:18:38.383',
'Action': 'Complete',
'Method': 'GetSettings'
}];
$("#grid").kendoGrid({
dataSource: jsondata,
columns: [{
field: "Action",
width: "60px"
}, {
field: "Method",
width: "60px"
}, {
command: {
text: "Details",
click: function () {
alert("Hello");
}
},
width: "60px"
}]
});
}