Please give me your advice.
The following URL gives jsonp formatted data: http://demos.kendoui.com/service/Products
However, only change I made was use my own url pointing to simple php to get jsonp data as below:
<?php
header('Vary: Accept-Encoding');
header('Connection: Keep-Alive');
header('Content-Encoding: gzip');
header('Content-Length: 1743');
header('Content-Type: application/x-javascript; charset=utf-8');
echo gzencode('callback([{"ProductID":2,"ProductName":"Chang","UnitPrice":19,"UnitsInStock":17,"Discontinued":false}])');
?>
The HTML source is below:
<!DOCTYPE html>
<html>
<head>
<title>ESS Software Inventory</title>
<meta charset="utf-8">
<link href="./kendoui/content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="./kendoui/styles/kendo.common.min.css" rel="stylesheet">
<link href="./kendoui/styles/kendo.rtl.min.css" rel="stylesheet">
<link href="./kendoui/styles/kendo.default.min.css" rel="stylesheet">
<script src="./kendoui/js/jquery.min.js"></script>
<script src="./kendoui/js/kendo.web.min.js"></script>
<script src="./kendoui/content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://dnettools/essinventory/cgi-bin",
//var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/products.php",
//url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/products.php",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/products.php",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/products.php",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 430,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 110 },
{ field: "UnitsInStock", title: "Units In Stock", width: 110 },
{ field: "Discontinued", width: 110 },
{ command: "destroy", title: " ", width: 90 }],
editable: true
});
});
</script>
</div>
</body>
</html>
