Grid does not populate in remote binding example in IE

[Alex]

I'm trying to integrate with an existing component feeding Json data in cross site environment. The grid works in Chrome, but fails to populate in IE. Using version 9 of Internet Explorer. I provided several examples below to demonstrate which code works and which doesn't.

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>

[Atanas Korchev]

Hello Alexei,

 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

[Mike]

We are running into the same problem as Alexei. Grid binding to remote data works fine in Chrome and Firefox, but in Internet Explorer (version 8 in our case) it does not work.

If it was the cross-origin issue, shouldn't Chrome and Firefox fail as well?

[Atanas Korchev]

Hello,

 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

[Mike]

Thanks Atanas - the "iecors" project linked to on that post worked for us.

[Alex]

Atanas,

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.

[Atanas Korchev]

Hello,

 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

[Alex]

I went over the recommended reading material - it was very informative.

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?

[Atanas Korchev]

Hi,

 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