Any webservice I try to bind into Telerik MVC Extensions is not working at all.
XMLHttpRequest cannot load http://localhost:9000/jsb-ws/json/Infocube/GetPO?SupplierId=10000. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
The above error code comes in the debugger and I just can't figure it out. I have tried Google API Json Web Services and Weather Services and none of them works.
I am in a stressed project and really needs this to work for me.
16 Answers, 1 is accepted
Cross-domain ajax requests are not possible in all browsers. Hence the error you are getting. The grid web service binding works when the web service is in the same domain.
If you need to bind to an external web service you should do the following:
- Configure the grid to use Ajax binding
- In the action method which should bind the grid request your web service (using server code). There are no cross domain limitations for server requests.
- Return the result from the action method
Atanas Korchev
the Telerik team
No, we don't have such an example. Call the web service as would would normally do. The grid needs an IEnumerable of objects in order to bind to them. Here is some pseudo code:
[GridAction]public ActionResult _Select(){ var data = webService.GetItems() as IEnumerable; return View(new GridModel(data));}If you need additional help please attach some sample project - the mvc application and the web service one. Regards,
Atanas Korchev
the Telerik team
I am coming further thanks to your help. Look at my code and scenario below and the fact that I am receiving this error when debugging in the browser.
Uncaught TypeError: Cannot use 'in' operator to search for 'HasSubgroups' in {
My viewpage:
<h3>Bound to Ajax JSON</h3><%= Html.Telerik().Grid<icportal.InfocubeService.POHeader>() .Name("Grid") .Columns(columns => { columns.Bound(o => o.POEstDeliveryDate).Width(100); columns.Bound(o => o.PONumber).Width(200); columns.Bound(o => o.POStatus ); columns.Bound(o => o.SupplierId ).Width(120); columns.Bound(o => o.POValue ).Width(120); }) .DataBinding(dataBinding => dataBinding.Ajax().Select("_Select", "Home")) .Pageable() .Sortable() .Scrollable() .Filterable()%>My controller code:
[GridAction] public ActionResult _Select() { var getPOURL = "http://localhost:9000/jsb-ws/json/ic/GetPO?SupplierId=10000"; var result = new System.Net.WebClient().DownloadString(getPOURL); var data = result as IEnumerable; return View(new GridModel(data)); }When I use the DownloadString I am getting the correct JSON Data back as a string but somehow I cannot return that correct to the Grid. Please help.
I will need a sample project. I don't know what your web service returns. You can attach the web service as a sample project to this thread.
Regards,Atanas Korchev
the Telerik team
I am not allowed to publish the project here from the webservice because it is not me that have created that, it is done by a prtner company. But I have pasted in the complete JSON result that I get back in the DownloadString function. I hope that will be good enough for you guys to give me some light this morning.
{ "POHeader" : [ { "POEstDeliveryDate" : "2008-01-08T00:00:00CET", "PONumber" : 1000, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-01-15T00:00:00CET", "PONumber" : 1009, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-02-15T00:00:00CET", "PONumber" : 1013, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-03-11T00:00:00CET", "PONumber" : 1014, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-04-09T00:00:00CEST", "PONumber" : 1023, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-03-17T00:00:00CET", "PONumber" : 1026, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-05-05T00:00:00CEST", "PONumber" : 1034, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-06-15T00:00:00CEST", "PONumber" : 1043, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-07-19T00:00:00CEST", "PONumber" : 1047, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-08-09T00:00:00CEST", "PONumber" : 1054, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-09-26T00:00:00CEST", "PONumber" : 1059, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-10-14T00:00:00CEST", "PONumber" : 1066, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-11-09T00:00:00CET", "PONumber" : 1070, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-11-25T00:00:00CET", "PONumber" : 1074, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-12-14T00:00:00CET", "PONumber" : 1079, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-01-18T00:00:00CET", "PONumber" : 1084, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-02-15T00:00:00CET", "PONumber" : 1093, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-03-18T00:00:00CET", "PONumber" : 1097, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-04-27T00:00:00CEST", "PONumber" : 1101, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-05-18T00:00:00CEST", "PONumber" : 1108, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-06-16T00:00:00CEST", "PONumber" : 1114, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-07-19T00:00:00CEST", "PONumber" : 1119, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-08-25T00:00:00CEST", "PONumber" : 1125, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-09-15T00:00:00CEST", "PONumber" : 1128, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-10-19T00:00:00CEST", "PONumber" : 1137, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-11-24T00:00:00CET", "PONumber" : 1141, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-12-07T00:00:00CET", "PONumber" : 1146, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-12-28T00:00:00CET", "PONumber" : 1152, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2010-01-18T00:00:00CET", "PONumber" : 1156, "POStatus" : "Slutlevererad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2010-02-07T00:00:00CET", "PONumber" : 1157, "POStatus" : "Godkänd", "SupplierId" : "10000", "POValue" : 2000.0000 }, { "POEstDeliveryDate" : "2010-02-14T00:00:00CET", "PONumber" : 1158, "POStatus" : "Godkänd", "SupplierId" : "10000", "POValue" : 2000.0000 }, { "POEstDeliveryDate" : "2010-01-26T00:00:00CET", "PONumber" : 1159, "POStatus" : "Ordererkänd", "POConfirmedDeliveryDate" : "2010-01-25T00:00:00CET", "SupplierId" : "10000", "POValue" : 1000.0000 }, { "POEstDeliveryDate" : "2010-02-10T00:00:00CET", "PONumber" : 1160, "POStatus" : "Ordererkänd", "POConfirmedDeliveryDate" : "2010-01-25T00:00:00CET", "SupplierId" : "10000", "POValue" : 1000.0000 }, { "POEstDeliveryDate" : "2010-01-25T00:00:00CET", "PONumber" : 1162, "POStatus" : "Dellevererad", "SupplierId" : "10000", "POValue" : 29250.0000 }, { "POEstDeliveryDate" : "2010-02-01T00:00:00CET", "PONumber" : 1163, "POStatus" : "Dellevererad", "SupplierId" : "10000", "POValue" : 19500.0000 }, { "PONumber" : 1171, "POStatus" : "Godkänd", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-06-21T00:00:00CEST", "PONumber" : 2000, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-03-25T00:00:00CET", "PONumber" : 3000, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-01-19T00:00:00CET", "PONumber" : 4000, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-01-15T00:00:00CET", "PONumber" : 4001, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-02-18T00:00:00CET", "PONumber" : 4002, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-02-17T00:00:00CET", "PONumber" : 4003, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-02-16T00:00:00CET", "PONumber" : 4004, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-03-18T00:00:00CET", "PONumber" : 4005, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-05-27T00:00:00CEST", "PONumber" : 4006, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-06-21T00:00:00CEST", "PONumber" : 4007, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-07-22T00:00:00CEST", "PONumber" : 4008, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-08-25T00:00:00CEST", "PONumber" : 4009, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-09-26T00:00:00CEST", "PONumber" : 4010, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-10-27T00:00:00CET", "PONumber" : 4011, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-11-25T00:00:00CET", "PONumber" : 4012, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2008-12-27T00:00:00CET", "PONumber" : 4013, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-01-25T00:00:00CET", "PONumber" : 4014, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-02-21T00:00:00CET", "PONumber" : 4015, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-03-25T00:00:00CET", "PONumber" : 4016, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-04-27T00:00:00CEST", "PONumber" : 4017, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-05-25T00:00:00CEST", "PONumber" : 4018, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-06-24T00:00:00CEST", "PONumber" : 4019, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-07-25T00:00:00CEST", "PONumber" : 4020, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-08-25T00:00:00CEST", "PONumber" : 4021, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-09-24T00:00:00CEST", "PONumber" : 4022, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-10-25T00:00:00CEST", "PONumber" : 4023, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-11-24T00:00:00CET", "PONumber" : 4024, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2009-12-25T00:00:00CET", "PONumber" : 4025, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2010-01-25T00:00:00CET", "PONumber" : 4026, "POStatus" : "Slutlev, fakt.avpr, konterad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2010-02-22T00:00:00CET", "PONumber" : 4027, "POStatus" : "Slutlevererad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2010-01-25T00:00:00CET", "PONumber" : 4028, "POStatus" : "Slutlevererad", "SupplierId" : "10000", "POValue" : 0.0000 }, { "POEstDeliveryDate" : "2010-01-25T00:00:00CET", "PONumber" : 4029, "POStatus" : "Slutlevererad", "SupplierId" : "10000", "POValue" : 0.0000 } ]}The grid needs an IEnumerable<POHeader>. You must convert the string to IEnumerable<POHeader>. Try using the JsonSerializer class.
Regards,Atanas Korchev
the Telerik team
Thank you for hanging in there with me. I am starting to feel good again.
Do you mean like this?
[GridAction]public ActionResult _Select(){ var getPOURL = "http://localhost:9000/jsb-ws/json/Infocube/GetPO?SupplierId=10000"; var result = new System.Net.WebClient().DownloadString(getPOURL); var data = result as IEnumerable; return View(new GridModel(new JavaScriptSerializer().Serialize(data))); }The Serialize method returns a string. The grid needs IEnumerable<POHeader>. You should use the Deserialize method instead. It should return an IDictionary with a single key "POHeader". The value for that key should be an IEnumerable.
Regards,Atanas Korchev
the Telerik team
Now all errors are gone so that's cool but there is no data presented in the grid. I summarize the codeblocks below to see if you can find any kind of errors or typo from my side. Thanks again for great support!
Controller:
[GridAction]public ActionResult _Select(){ var getPOURL = "http://localhost:9000/jsb-ws/json/ic/GetPO?SupplierId=10000"; var result = new System.Net.WebClient().DownloadString(getPOURL); var output = new JavaScriptSerializer().Deserialize<InfocubeService.POHeader>(result); var data = output as IEnumerable; return View(new GridModel(data));}View:
<h3>Bound to Ajax JSON</h3><%= Html.Telerik().Grid<icportal.InfocubeService.POHeader>() .Name("Grid") .Columns(columns => { columns.Bound(o => o.POEstDeliveryDate).Width(100); columns.Bound(o => o.PONumber).Width(200); columns.Bound(o => o.POStatus ); columns.Bound(o => o.SupplierId ).Width(120); columns.Bound(o => o.POValue ).Width(120); }) .DataBinding(dataBinding => dataBinding.Ajax().Select("_Select", "Home")) .Pageable() .Sortable() .Scrollable() .Filterable()%>Can you confirm (with the debugger) that "data" is not null? I am pretty positive that it is null right now. The grid needs a valid collection of POHeader objects in order to bind to it.
Regards,Atanas Korchev
the Telerik team
Hate to admit it but you where right. It was null so I changed the code to deserializeObject as below.
Controller:
[GridAction] public ActionResult _Select() { var getPOURL = "http://localhost:9000/jsb-ws/json/Infocube/GetPO?SupplierId=10000"; var result = new System.Net.WebClient().DownloadString(getPOURL); var output = new JavaScriptSerializer().DeserializeObject(result); var data = output as IEnumerable; return View(new GridModel(data)); }And then the data is not null but instead it is a collection of POHeader objects, as in fact 68 according to the counter in the debugger mode. But still the grid gets empty. I can see all data when I debug and watch the data object sent back as GridModel that it contains the data but somehow I have a feeling that the grid isn't displaying them correct. Could it be something with the String format in the GridModel that the grid doens't like?
Unfortunately I can't tell that unless I somehow reproduce this locally.
Regards,Atanas Korchev
the Telerik team
That is not a problem. I have published the JSON webservice to a public IP so just send me an e-mail to ak@gkviby.com and I will be happy to send you the URL of the public webservice so you can test it locally. This has to be tested so we can close the thread and if this succeeds I will write a huge blogpost or article on how to accomplish this the right way. There are many many discussions on this topic on the web but several is taking the jqGrid instead for a solution and I want to stick to Telerik so please, reproduce it locally.
I am sending a sample project bound to the json which you provided earlier.
I hope this helps,Atanas Korchev
the Telerik team
I am so happy today I almost cried when kicking VS 2010 and running your code in my environment and it just works. It was the code in the controller which was the solution. Thanks a million times, you are the best!