editor & dataSource
HTML
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div id="content">
<div id="grid"/>
<button id="buttonClickTest">Click Me</Button>
<button id="buttonClickTest2">Click Me To Refresh Html</Button>
</div>
JavaScript
$(function () {
SetupGrid();
document.getElementById("buttonClickTest").addEventListener('click', SetupGrid, false);
document.getElementById("buttonClickTest2").addEventListener('click', TestRefreshHtml, false);
});
function TestRefreshHtml()
{
alert('in refresh');
$('#content').html('<div id="grid"/><button id="buttonClickTest">Click Me</Button><button id="buttonClickTest2">Click Me To Refresh HTML</Button>')
SetupGrid();
}
var contacts_Details_DataSource = new kendo.data.DataSource({
transport: {
read: {
//using jsfiddle echo service to simulate JSON endpoint
url: "/echo/json/",
dataType: "json",
type: "POST",
data: {
// /echo/json/ echoes the JSON which you pass as an argument
json: JSON.stringify([
{
ContactID: 1,
FirstName: "John",
LastName: "Smith"
}
])
}
}
},
schema: {
model: {
id: "ContactID"
}
}
});
function SetupGrid() {
alert('start Setup Grid');
var grid = $("#grid");
$(grid).kendoGrid({
dataSource: contacts_Details_DataSource ,
height: $(document).height() - 92,
columns: [{ field: "ContactID", width: 90, title: "ContactID" },
{ field: "FirstName", width: 90, title: "FirstName" },
{ field: "LastName", width: 90, title: "LastName" }],
scrollable: true,
selectable: "multiple",
sortable: true,
filterable: true,
pageable: true
});
alert('completed Setup Grid');
}