This is a migrated thread and some comments may be shown as answers.

Grid does not populate in remote binding example in IE

8 Answers 186 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 07 Jan 2013, 11:11 PM
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>

8 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 09 Jan 2013, 07:30 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mike
Top achievements
Rank 1
answered on 09 Jan 2013, 02:11 PM
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?
0
Atanas Korchev
Telerik team
answered on 09 Jan 2013, 03:02 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mike
Top achievements
Rank 1
answered on 09 Jan 2013, 03:47 PM
Thanks Atanas - the "iecors" project linked to on that post worked for us.
0
Alex
Top achievements
Rank 1
answered on 09 Jan 2013, 06:32 PM
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.
0
Atanas Korchev
Telerik team
answered on 10 Jan 2013, 07:59 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alex
Top achievements
Rank 1
answered on 11 Jan 2013, 08:14 PM
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?
0
Atanas Korchev
Telerik team
answered on 11 Jan 2013, 08:37 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Alex
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Mike
Top achievements
Rank 1
Alex
Top achievements
Rank 1
Share this question
or