Help with Remote Data JSONP Source

[Troy Roberson]

I'm about to pull my hair out trying to get data to display.  I've tried in a grid and now I'm just using a template, slightly modified from the Twitter example.

Here is my code:

<script type="text/javascript">

            $(document).ready(function() {

                var template = kendo.template($("#template").html());

                 

                var dataSource = new kendo.data.DataSource({ 

                    transport: {     

                    read: {

                        url: "http://myserver.com/FutureEventList.json",                              

                        dataType: "jsonp",                              

                                                  

                        }                       

                    },                       

                    schema: {                        

                    data: ""                     

                    }

                });                                   

                dataSource.read();

                              

            });

                

        </script>

(I replaced the server name with myserver.com).

This JSON service runs on our internal service and I can normally get it via a webclient, etc.

The Fiddler return data looks like this:

HTTP/1.1 200 OK

Cache-Control: private

Content-Length: 748

Content-Type: application/json; charset=utf-8

Server: Microsoft-IIS/7.5

X-AspNet-Version: 4.0.30319

X-Powered-By: ASP.NET

Access-Control-Allow-Origin: *

Date: Wed, 07 Dec 2011 16:28:04 GMT

 

[{"EventID":"HL111213","InhomeDate":"12\/13\/2011 12:00:00 AM"},{"EventID":"HL120117","InhomeDate":"1\/17\/2012 12:00:00 AM"},{"EventID":"HL120214","InhomeDate":"2\/14\/2012 12:00:00 AM"},{"EventID":"HL120313","InhomeDate":"3\/13\/2012 12:00:00 AM"},{"EventID":"HL120410","InhomeDate":"4\/10\/2012 12:00:00 AM"},{"EventID":"HL120515","InhomeDate":"5\/15\/2012 12:00:00 AM"},{"EventID":"HL120612","InhomeDate":"6\/12\/2012 12:00:00 AM"},{"EventID":"HL120717","InhomeDate":"7\/17\/2012 12:00:00 AM"},{"EventID":"HL120814","InhomeDate":"8\/14\/2012 12:00:00 AM"},{"EventID":"HL120911","InhomeDate":"9\/11\/2012 12:00:00 AM"},{"EventID":"HL121016","InhomeDate":"10\/16\/2012 12:00:00 AM"},{"EventID":"HL121113","InhomeDate":"11\/13\/2012 12:00:00 AM"}]

I modified the template to look like this:

<script id="template" type="text/x-kendo-template">               

                <div class="tweet k-header">                   

                    #= EventID #                   

                </div>           

            </script>

But nothing ever shows up.  Any help would be appreciated.  Eventually, I'd like to have the data in a grid, but I'm trying to take baby steps first.  Is there anything wrong with how my service is configured?  Do I need to modify my transport?

Thanks

Troy

[Rosen]

Hello Troy,

Looking at the response from the server you have pasted, it seems that it is not a valid JSONP response. As you may know, the response from a JSONP request should be wrapped within a function call. You may find more detailed information about JSONP here.

Also note that you should not need calling the service through JSONP if it is in the same domain as the page you are consuming it. In this case a regular ajax call which returns JSON should be sufficient.

All the best,
Rosen
the Telerik team

[Troy Roberson]

I actually figured it out.  In my service project, I added the following to the web.config inside the <standardendpoints> tag.

<webScriptEndpoint>

<standardEndpoint name="" crossDomainScriptAccessEnabled="true" />

</webScriptEndpoint>

That seemed to take care of my issues and now I can bind the datasource as jsonp to a widget.

Eventually, it will be in the same domain, but for now jsonp works just fine (not sure exactly why).  Also, I found a class on MSDN (Link) that is a helper for JSONP and ASP.NET.  I didn't need to use it, but it might help out some other people.

Troy