Hi Guys,
I am writing simple application in kendoui to get json object through web service and printing it in grid. But nothing is printing except header values.
json object is:
I am attaching code for the same.
<!DOCTYPE html>
<head>
<title>JSON Example</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.common.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.css" rel="stylesheet" type="text/css" />
<!--Then paste the following for Kendo UI Web scripts-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>
<!--In the header of your page, paste the following for Kendo UI Mobile styles-->
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="header">
<h1>Kendo UI Grid</h1>
</div>
<div id="grid1">
<table id="grid2">
<tr>
<th data-field="name">Name</th>
<th data-field="desc">Description</th>
</tr>
</table>
</div>
</div>
</body>
<script>
$(document).ready(function() {
$("#grid2").kendoGrid({
dataSource: {
transport: {
read: {
url: "http://dhpl.comuf.com/json.php",
dataType: "json"
}
},
schema: {
data:"results",
model: {
fields: {
desc: {},
name: {}
}
}
}
},
columns: [
{
field: "desc",
title: "results"
},
{
field: "name",
title: "results"
}
]
});
});
</script>
</html>
Please help me to figure our the problem.
I am writing simple application in kendoui to get json object through web service and printing it in grid. But nothing is printing except header values.
json object is:
{ "results" : [{ "name" : "Arkadiusz Pikura1", "desc" : "Pracownik 1 KS-Solab" }, { "name" : "Marcin Wita", "desc" : "Pracownik 2 KS-Solab" }] }
I am attaching code for the same.
<!DOCTYPE html>
<head>
<title>JSON Example</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.common.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.css" rel="stylesheet" type="text/css" />
<!--Then paste the following for Kendo UI Web scripts-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>
<!--In the header of your page, paste the following for Kendo UI Mobile styles-->
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="header">
<h1>Kendo UI Grid</h1>
</div>
<div id="grid1">
<table id="grid2">
<tr>
<th data-field="name">Name</th>
<th data-field="desc">Description</th>
</tr>
</table>
</div>
</div>
</body>
<script>
$(document).ready(function() {
$("#grid2").kendoGrid({
dataSource: {
transport: {
read: {
url: "http://dhpl.comuf.com/json.php",
dataType: "json"
}
},
schema: {
data:"results",
model: {
fields: {
desc: {},
name: {}
}
}
}
},
columns: [
{
field: "desc",
title: "results"
},
{
field: "name",
title: "results"
}
]
});
});
</script>
</html>
Please help me to figure our the problem.
10 Answers, 1 is accepted
0
Tsvetan
Top achievements
Rank 1
Rank 1
answered on 16 Apr 2012, 05:33 PM
It will be in help to me also!
Think of a good blog for health?
Think of a good blog for health?
0
Bjorn
Top achievements
Rank 1
Rank 1
answered on 17 Apr 2012, 11:12 AM
I'm also in desperate need of help on this!
0
Michael Harry
Top achievements
Rank 1
Rank 1
answered on 17 Apr 2012, 07:29 PM
i'm new to it too, but the problem may be that you need to use "jsonp" instead of "json" for going cross urls
0
Prashant
Top achievements
Rank 1
Rank 1
answered on 18 Apr 2012, 05:29 AM
thanks Michael,
I have tried that also. But no luck.
I have tried that also. But no luck.
0
Hi,
jsonp needs to be supported on the server too - it does not automatically work for json services. Please read this article for more information:
Kind regards,
Petyo
the Telerik team
jsonp needs to be supported on the server too - it does not automatically work for json services. Please read this article for more information:
Kind regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Prashant
Top achievements
Rank 1
Rank 1
answered on 18 Apr 2012, 10:11 AM
Hi Petyo ,
Thanks for your reply.
As you said 'jsonp needs to be supported on the server too - it does not automatically work for json services'
It means that we need to do some server side changes, We wrote server side code in .Net. I just want to ask you that the application which I have tried is correct or need some corrections.
thanks,
Prashant
Thanks for your reply.
As you said 'jsonp needs to be supported on the server too - it does not automatically work for json services'
It means that we need to do some server side changes, We wrote server side code in .Net. I just want to ask you that the application which I have tried is correct or need some corrections.
thanks,
Prashant
0
Geoffrey
Top achievements
Rank 1
Rank 1
answered on 19 Apr 2012, 09:16 AM
Hi Petyo ,
I'm also struggling with binding my json string to a chart.
All that I'm trying to do is bind this json result string :
to a Dataviz Chart. I've followed your demo code to exactly :
I'm getting the json string from a json endpoint from a WCF Service Library (not using a .svc or .asmx).
The chart is just coming up as a blank chart.
Please help...
I'm also struggling with binding my json string to a chart.
All that I'm trying to do is bind this json result string :
[{"availability":58.2,"oee":58.3,"performance":69.2,"quality":36.3}]
to a Dataviz Chart. I've followed your demo code to exactly :
function createChart1() { document.getElementById('example').style.visibility = "visible"; document.getElementById('Machines').style.opacity = "0.2"; $("#chart").kendoChart({ theme: $(document).data("kendoSkin") || "black", dataSource: { transport: { read: { type: "GET", contentType: "application/json; chartset=utf-8", url: "http://localhost:8080/mesmobileservice/data", dataType: "json" } }, sort: { field: "", dir: "" } }, title: { text: "Machine 001" }, legend: { position: "bottom" }, seriesDefaults: { type: "column" }, series: [{ field: "availability", name: "Availability", color: "#FFDC00" }, { field:"performance", name: "Performance", color: "#0047A3" }, { field:"quality", name: "Quality", color: "#C80000" }, { field:"oee", name: "OEE", color: "#00B400" }], valueAxis: { labels: { format: "{0}%" } }, categoryAxis: { categories: [] }, tooltip: { visible: true, format: "{0}%" } }); }
I'm getting the json string from a json endpoint from a WCF Service Library (not using a .svc or .asmx).
The chart is just coming up as a blank chart.
Please help...
0
Hello Geoffrey,
I am not sure what the problem may be. If you haven't resolved this yet, you may consider opening a support ticket with a project that reproduces the problem.
Kind regards,
Petyo
the Telerik team
I am not sure what the problem may be. If you haven't resolved this yet, you may consider opening a support ticket with a project that reproduces the problem.
Kind regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Geoffrey
Top achievements
Rank 1
Rank 1
answered on 23 Apr 2012, 07:32 AM
Hi Petyo,
This problem has been driving me crazy!
It keeps on giving me this error:
"OPTIONS http://localhost:49513/MESService.svc/JSON/data 405 (Method Not Allowed)." "XMLHttpRequest cannot load http://localhost:49513/MESService.svc/JSON/data. Origin http://localhost:52317 is not allowed by Access-Control-Allow-Origin.
"
I will attach my source code for you to look at.
Please could you advise me on what to do?
This problem has been driving me crazy!
It keeps on giving me this error:
"OPTIONS http://localhost:49513/MESService.svc/JSON/data 405 (Method Not Allowed)." "XMLHttpRequest cannot load http://localhost:49513/MESService.svc/JSON/data. Origin http://localhost:52317 is not allowed by Access-Control-Allow-Origin.
"
I will attach my source code for you to look at.
Please could you advise me on what to do?
0
Hi Geoffrey,
I have already answered to your support ticket on the same subject. For convenience I am pasting my reply here so the other users who experience similar issue could read it:
In your scenario the host page and the service are located in different domains. Ajax requests are limited by the same origin policy - due to these security restrictions you are receiving the errors. If you insist to perform cross domain Ajax requests, you may try to work with Jsonp instead of Json. In this demo page you will find an example that shows how to configure a dataSource bound to Jsonp data. Alternatively you can change your projects in a way that the html page and service share same domain (same localhost port).
Kind regards,
Alexander Valchev
the Telerik team
I have already answered to your support ticket on the same subject. For convenience I am pasting my reply here so the other users who experience similar issue could read it:
In your scenario the host page and the service are located in different domains. Ajax requests are limited by the same origin policy - due to these security restrictions you are receiving the errors. If you insist to perform cross domain Ajax requests, you may try to work with Jsonp instead of Json. In this demo page you will find an example that shows how to configure a dataSource bound to Jsonp data. Alternatively you can change your projects in a way that the html page and service share same domain (same localhost port).
Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!