
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="kendo.common.min.css" rel="stylesheet" />
<link href="kendo.kendo.min.css" rel="stylesheet" />
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<style>
.contain {
width: 800px;
height: auto;
}
</style>
</head>
<body>
<div id="container" class="contain">
<div id="grid"></div>
</div>
<script>
$(document).ready(function () {
var source = [
{
"firstname": "Richard",
"lastname": "Rostant"
},
{
"firstname": "John",
"lastname": "Smith"
},
{
"firstname": "Harry",
"lastname": "Summers"
},
{
"firstname": "Henry",
"lastname": "Ford"
}
];
var ndataSource = new kendo.data.DataSource({ data: source });
$("#grid").kendoGrid({
datasource: ndataSource,
columns: [
{
field: "firstname",
title: "First Name"
},
{
field: "lastname",
title: "Last Name"
}
],
height: 600
});
});
</script>
</body>
</html>
I can't seem to get the grid to display anything. It renders, but no data is being displayed. I am sure that it is something simple that is just eluding me.

success: function (data) { var docs = data.d; //Get the data var doctemplate = kendo.template($("#dashwidget-document-template").html()); //compile the template alert(doctemplate); var result = doctemplate(docs); //Run the template, SILENTLY FAILS HERE...NEVER GETS TO THE ALERT
alert(result); $("#document-list").html(result); //display html},<div id="document-container"> <ul id="document-list"> <li>Loading...</li> </ul></div><script id="dashwidget-document-template" type="text/x-kendo-template"> <li>#= Title #</li></script>