I also attached the code with supporting files.
Please help.
<script>
// Code downloaded from http://demos.kendoui.com/web/grid/index.html
var alerts =
{
"startIndex":0,
"count":25,
"entry": [
{"AlertId": 111},
{"AlertId": 222},
{"AlertId": 333},
{"AlertId": 444},
{"AlertId": 555},
{"AlertId": 666},
{"AlertId": 777}
]
};
$(document).ready(function() {
// Example 1. Works. Taken from http://docs.kendoui.com/howto/bind-the-grid-to-remote-data.
var ds1 = new kendo.data.DataSource({
transport: {
read: {
url: "https://api.instagram.com/v1/media/popular?client_id=4e0171f9fcfc4015bb6300ed91fbf719&count=2",
dataType: "jsonp"
}
},
pageSize: 5,
schema: {
data: "data"
}
});
// Example 2. Fails in IE and Chrome with jsonp. No headers, no data.
// Works in Chrome and fails in IE with json.
var ds2 = new kendo.data.DataSource({
transport: {
read: {
url: "http://10.60.71.140/CoreRESTServices/Core.svc/alerts?fields=AlertId",
dataType: "jsonp"
}
},
pageSize: 5,
schema: {
data: "entry"
}
});
// Example 3. Fails in IE, and works in Chrome. IE headers, but no data.
var ds3 = new kendo.data.DataSource({
type: "jsonp",
transport: {
read: {
url: "http://10.60.71.140/CoreRESTServices/Core.svc/alerts?fields=AlertId"
}
},
pageSize: 5,
schema: {
data: "entry"
}
});
// Example 4. Works.
var ds4 = new kendo.data.DataSource({
data: alerts,
pageSize: 5,
schema: {
data: "entry"
}
});
// Initialize the grid.
$("#grid").kendoGrid({
dataSource: ds4
});
});
</script>
8 Answers, 1 is accepted
This sounds like a cross-origin issue. According to the same origin policy cross domain ajax requests are not allowed. There are two solutions - JSONP and CORS. We recently created a blog post which explains the same: http://www.kendoui.com/blogs/teamblog/posts/13-01-08/common_errors_in_kendo_ui_applications.aspx (check the "Beware the cross domain barrier" section).
Regards,Atanas Korchev
the Telerik team
If it was the cross-origin issue, shouldn't Chrome and Firefox fail as well?
IE8 doesn't support CORS whereas Chrome and FireFox support it. You can find more info in this blog post: http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx
Regards,Atanas Korchev
the Telerik team
Thanks for the response. I will review the blog posts recommended.
I was aware of the cross-domain restraint for JSON call. All examples do use JSONP and yet it still doesn't work as expected. Can you please explain the behavior? I am most curious as to why there is a different behavior between examples 2 and 3.
I cannot explain the behavior because I don't know what is the response format of your remote service. JSONP is not the same as JSON. Just setting dataType: "jsonp" will not make your remote service return JSONP.
Regards,Atanas Korchev
the Telerik team
I believe we need to support IE8+, Chrome and Safari, so CORS looks like a good fit for us. If I setup the HTTP headers on the endpoint domain is there additional coding that has to be done on our side to make the communication possible?
In one of the posts you have additional code added to handle XDR for IE vs XHR for Chrome and Firefox. Would I have to do the same?
Yes, older versions of IE need additional code in order to perform CORS. More info can be found in this blog post: http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx
Regards,Atanas Korchev
the Telerik team