Kendo grid not showing with remote data

Question

I am trying to display data from a web service as defined in their docs http://docs.kendoui.com/api/web/grid#configuration-dataSource it says "ReferenceError: callback is not defined". Following in my html file;

<div id="grid"></div>
<script>
   var dataSource = new kendo.data.DataSource({
      transport: {
          read: {
              url: "http://127.0.0.1:8080/test/services/Rest/getP",
              dataType: "jsonp",
              jsonCallback: "jsonp"
          }
       },
      pageSize: 10
   });
$("#grid").kendoGrid({
   dataSource: dataSource,
   pageable: true
});
</script>

following is the return of webservice

 callback([{"eventId":"123","eventName":"S2S"}])

Webservice is developed in java. following is the code;

@GET
@Path("/getP")
@Produces("application/x-javascript") 
public String getInJSONP() {
String str = "callback([{\"eventId\":\"123\",\"eventName\":\"S2S\"}])";
System.out.println(str); 
return str;
}

if i change the url in html file to the one they provided in example http://demos.kendoui.com/service/products it works fine but if i change it to my web service url it gives error. If anyone can guide me how to write the webservice according to the input of kendo grid as i guess it is the error of data.

Answer 1

Does your web page need to call a web service in a different web domain than your web page? if No, then you want to use a simple json return from your web service (see my fiddle for grid read example). This example uses the "echo" service from jsFiddle, which simply returns the json that you send it in the post. This echo service requires a Post like the following.

   read: {
        url:'/echo/json/',
        type:'POST',
        data: {
            json: JSON.stringify(testdata)
        }                
    }

Your client Ajax call will look more like the std in Kendo's datasource documentation . The data your web service operation will return should look something like the following: [{"City": "Redmond", "FirstName": "Anne", "Title": "Software Developer", "LastName": "Fuller", "Age": 48, "BirthDate": "1966-03-27T05:00:00.000Z", "Id": 1}, {"City": "New York", "FirstName": "Robert", "Title": "Chief Techical Officer", "LastName": "Davolio", "Age": 54, "BirthDate": "1960-05-29T04:00:00.000Z", "Id": 2}]

BTW - A great standard for designing simple web services (especially those related to entity CRUD) is the REST pattern - where an http Post is used for an entity Create, a Put for an entity update, Delete for an entity update, and Get for retrieving an entity.