How to get remote JSON to work with Kendo grid in ASP.NET

Question

I can successfully make the AJAX call to my service with the following code:

var serverData = { "ZoneParent": "123" };

        var request = $.ajax({
            type: "POST",
            url: "/./Services/Reports.svc/getZones",
            contentType: "application/json",
            dataType: "json",
            jsonp: null,
            jsonpCallback: null,
            data: JSON.stringify(serverData)
        });


        request.done(function (msg) {
            alert(JSON.stringify(msg));
        });

        request.fail(function (jqXHR, textStatus) {
            alert("Request failed: " + textStatus);
        });

However, when I try to implement the same call with my Kendo grid I get an error

The incoming message has an unexpected message format 'Raw'. The expected message formats for the operation are 'Xml', 'Json'

for getZones. My service call work fine with DataTables, but I want to switch to Kendo potentially. I have messed with this for days to no avail. The application is not MVC. Here is my Kendo code snippet:

var dataSource = new kendo.data.DataSource({

        transport: {

            read: {

                url: "/./Services/Reports.svc/getZones",

                dataType: "JSON",

                data: { zoneParent: "123" },

                    type: "POST"
            },

            parameterMap: function (data, operation) {
                    return kendo.stringify(data);
                }
        },

            schema: {

                data: "d"
            }
    });

    var grid = $("#allGrids").kendoGrid({

        dataSource: dataSource,

        height: 200
    });

Answer 1

As cfeduke made similar suggestion you can try to add contentType to the read object of the transport read config just as you did in the $.ajax call.

eg

var dataSource = new kendo.data.DataSource({

    transport: {

        read: {

            url: "/./Services/Reports.svc/getZones",

            dataType: "json",

            contentType: "application/json",

            data: { zoneParent: "123" },

                type: "POST"
        },

        parameterMap: function (data, operation) {
                return kendo.stringify(data);
            }
    },

Answer 2

It sounds like the server's reply "Content-type" header is something other than the expected "application/json".

You can use cURL :

curl -v -H "Content-type:application/json" -H "Accept:application/json" \
http://localhost/Services/Reports.svc/getZones 

to invoke the endpoint and check the returned header values (-v is verbose, you won't see the headers without it).

Sometimes just setting an "Accept: application/json" header is enough to reveal the problem - either the server coerces the output into JSON or it throws an error that can be tracked down.

Answer 3

I am investigating if there is a another way around this. But seems like Kendo has many limitations and this is one of them. Datables doesn't need a header, just the JSON format.

This is what you need to add to your controller that is sending the data (in case its ajax call)

header("Content-type: application/json");

I wish it wouldn't be like this but Kendo forces this I believe. I prefer datatables, much more freedom and you can customize more.