Kendo datasource OData custom json

[James]

I have a OData service that returns the following json.
I need to convert the json into a Kendo datasource that can be bound to a read-only grid.
Here is the json.

{
    "@odata.context":"http://localhost/DataService/Data","value":[
    {"ID":1,"Description":"Test 1"}
    ,{"ID":2,"Description":"Test 2"}
    ,{"ID":3,"Description":"Test 3"}]
}

I have tried something as simple as the following but this does not work.
I have used fiddler and I am seeing the json getting returned correctly.

<script>
$(document).ready(function () {
    var crudServiceBaseUrl = "http://localhost/DataService/Data",    
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: crudServiceBaseUrl,
                    dataType: "json",
                    type: "POST"
                },
               parameterMap: function (data, operation) {
                   alert(JSON.stringify(data));
                   return JSON.stringify(data);
                },
                autoSync: false,
                schema: {
                    model: {
                        id: "ID"
                    }
                }
            }
        });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        columns: [
            { field: "ID", title: "ID", width: 70 }]
    });

});
</script>

I used the following online fiddle as a test and it worked fine when using local "echo".
http://jsfiddle.net/valchev/AC9tV/

I have also posted the question here.
http://stackoverflow.com/questions/26130634/kendo-datasource-odata-custom-json

[Rosen]

Hello James,

In order to bind to the DataSource to the response format you have displayed you will need to set the DataSource schema data and total (in order to use paging) settings. Note that in the snippet you have pasted the schema is set as child of the transport which is not correct, also there is no autoBind option (this option belongs to the widget (if it is databound one))

    {
    schema: {
         data: "value",
         model: {
             id: "ID"
          }
    },
    transport: {
        read: {
            url: crudServiceBaseUrl,
            dataType: "json",
            type: "POST"
        },
       parameterMap: function (data, operation) {
           alert(JSON.stringify(data));
           return JSON.stringify(data);
        }
    }
}

Regards,
Rosen
Telerik

 

 

[James]

Sorry, my example code was incorrectly entered when I pasted onto the screen.
My schema is not in the transport section.

I have narrowed the problem down a little more.
If both the serviceURL is localhost and the web client page is localhost then all works fine but if the serviceURL is the local computer name / DNS entry and the web client page is localhost then the grid will not display the data. 

I am using Telerik Fiddler Web Debugger to look at the traffic and noticed that when both the service and web client are localhost there is "X-Requested-With: XMLHttpRequest" in the header that does not exist when the service is computer name / DNS.
The json looks correct between the 2 traces.
The data is differently coming back to the web client but the grid is not binding the data.

Here is the html code that is hosted on my localhost with IIS 8 ASP.NET 4.5 Web API OData.
NOTE: I have tried both my IP address and my local computer name with the DNS. Both the service and web client are on the same computer in all tests.

$(document).ready(function () {
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://localhost/DataServices/TestData", // <-- does work
                //url: "http://LocalComputer.LocalDomain.com/DataServices/TestData", // <-- does not work (basically still my local computer but using its domain entry versus local host)
                dataType: "json",
                type: "GET",
                beforeSend: function (req) {
                    req.setRequestHeader('Accept', "application/json;odata.metadata=none");
                }
            }
        },
        schema: {
            data: "value",
            model: {
                id: "ID"
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        columns: [
            { field: "ID" },
            { field: "Description" }]
    });

});

Here is the header when using localhost in the service URL. (This works fine)

GET http://localhost/DataServices/TestData HTTP/1.1
Host: localhost
Connection: keep-alive
Accept: application/json;odata.metadata=none
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
Referer: http://localhost/ODataTest1/Home/Index
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Cookie: ASP.NET_SessionId=reo50...; .AUTH=328CB...

Here is the header when using DNS in the service URL. (This does not work)

GET http://LocalComputer.LocalDomain.com/DataServices/TestData HTTP/1.1
Host: LocalComputer.LocalDomain.com
Connection: keep-alive
Accept: application/json;odata.metadata=none
Origin: http://localhost
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
Referer: http://localhost/ODataTest1/Home/Index
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

Notice how it is missing "X-Requested-With: XMLHttpRequest" and how the host is different.

[James]

Finally got it to work.
The ASP.NET Web API Odata service had to be modified to enable CORS (Cross-Origin Requests).
http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api
http://blogs.telerik.com/kendoui/posts/11-08-24/cross-domain_queries_to_odata_services_with_jquery