Problem in Kendo UI binding

See more:

Azure

web

API

I am struggling in order to bind the kendo grid with Web API. Web API is hosted in the Azure worker role (not yet published). And the Web API is decorated in order to work with the cross domains i.e Enabled CORS for the Web API.

Let us look the code I have written.

Action method in the Web API look like the following.

public JToken Get()

    {
        JToken json = JObject.Parse(
           "{ \"firstName\": \"John\",
           \"lastName\": \"Smith\",
           \"isAlive\": true,
           \"age\": 25, 
           \"height_cm\": 167.6, 
           \"address\":
           {      
               \"streetAddress\": \"21 2nd Street\",
               \"city\": \"New York\",
               \"state\": \"NY\",
               \"postalCode\": \"10021-3100\"    
           }, 
           \"phoneNumbers\": 
           [{ 
               \"type\": \"home\", 
               \"number\": \"212 555-1234\"
           },        
           { 
               \"type\": \"office\",  
               \"number\": \"646 555-4567\" 
           }]
           }"
        );
        return json;
    }

When I execute this web api we will get the emulator with the IP address as "127.0.0.1" and I used the controller "TestController".

When I execute the above api in the browser, I am getting the JSON data perfectly, but when I use the same to bind the grid, all is vain.

The code used to bind the data is

$("#DivId").kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read: {
                            url: "http://127.0.0.1/test",
                            dataType: "json"
                        }
                    },
                },
                height: 500,
                scrollable: true,
                selectable: true
            });

I am getting an exception of "Undefined is not an object".

Please provide the solution.