In Visual Studio, you open a Kendo app and replace all of the code in index.html with this code. You also need to copy in all the stylesheets and javascript files from the Telerik install folder (or it won't work)
I'd love to write more articles on this, but I'll wait to see if there is any interest.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
//var auth = "Basic ZGV2c2hlZFxzdGV2ZTpFeG9kMjAwNw=="
var auth = "Basic steve:Exod2007"
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
type: "json",
transport: {
read: {
beforeSend: function (req) {
req.setRequestHeader("Authorization", "Basic ZGV2c2hlZFxzdGV2ZTpFeG9kMjAwNw==");
}
}
},
schema: {
data: "Payload"
},
error: function (e) {
alert(e.errorThrown)
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{ field: "LocationCode", title: "Location Code" }
]
});
});
</script>
</div>
</body>
</html>