Kendo jQuery grid datasource empty but json return from server

Question

So i've been banging my head over this for a couple days now. Working in a dev environment, I have a test WebAPI site running on a VM. It's accessible via the network (with un/pw) and is returning JSON. I'm using jsonp since it's complaining about cross domain since it's on a different subdomain. It was returning XML but I used this reference to get the JSON output. I've also used Telerik's site for all the references I could find. telerik jquery grid source

[{ "id": 2, "ProcessName": "#######", "Password": "########", "Username": "########" }, { "id": 3, "ProcessName": "#######", "Password": "#######", "Username": "#######" },{ "id": 4, "ProcessName": "#######", "Password": "#######", "Username": "#######" }, { "id": 5, "ProcessName": "#######", "Password": "#######", "Username": "#######" }]

I've tried multiple ways to read the URL and parse the data into the datasource but each time, the source remains empty and no errors are thrown. The content type being returned is application/json

In is the most recent attempt, it does build the grid display correctly but of course, has no data. This error is being thrown from the ajax request and i have no idea why!

<script type="text/javascript">
$(document).ready(function() {
var apDs = new kendo.data.DataSource({
   transport: {         
     read: "http://xxx.xxx.xxx.xxx/Sec/Api/ProcessInfo"}
  });
var remoteDataSource = new kendo.data.DataSource({ 
   type: 'odata',
     transport: { 
        read:{
            url: "http://xxx.xxx.xxx.xxx/Sec/Api/ProcessInfo",
            dataType: "json"} , //json datatype works here
    parameterMap: function (data, operation) { return JSON.stringify(data); 
}} ,
    pageSize: 12, 
    serverPaging: true, 
    serverFiltering: true, 
    serverSorting: true, 
schema: { 
  data: "data"
   }
 }); 
$("#myGrid").kendoGrid({
   dataSource: {apDs},
   height: 550,
   filterable: true,
   sortable: true,
   pageable: true,
   columns: [{
                field:"id", 
                filterable: false
            },
            { 
                field: "ProcessName", title: "Process Name"
                },
            {
                field: "Username",
                title: "User Name"
            },
            {
                field: "Password",
                title: "Password"}]
    });
});

 $.ajax({
    type: "GET",
    url: "http://xxx.xxx.xxx.xxx/Sec/Api/ProcessInfo",
    dataType: "jsonp", //json does NOT work here, must be jsonp
    success: function (result) {
    var grid = $("#myGrid").data("kendoGrid");
    var ds = new kendo.data.DataSource({ data: result });
    grid.setDataSource(ds);
    grid.dataSource.read();
 },
    error: function (httpRequest,textStatus,errorThrow){
    alert("ERROR: " + textStatus + " " + errorThrow + ' ' + httpRequest);
 }

 });

Answer 1

So after more digging and head scratching, I finally stumbled upon a fix/work around.

While I had my API returning json, it wasn't JSONP which was causing the issue with the datasource.

I found this question, JSONP with ASP.Net WebAPI and this GitHub/Nuget package which works excellent.

By installing the nuget package and adding GlobalConfiguration.Configuration.AddJsonpFormatter(); into my Global.asax.cs and this code into my WebApiConfig.cs I'm now able to request text/xml, text/json and/or text/jsonp and receive the correct reponse.

 public static void Register(HttpConfiguration config)
        {
        // Web API configuration and services

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

        config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new System.Net.Http.Headers.MediaTypeHeaderValue("text/json"));

   }
}
public class BrowserJsonFormatter : JsonMediaTypeFormatter
    {
    public BrowserJsonFormatter()
        {
        this.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
        this.SerializerSettings.Formatting = Formatting.Indented;
        }

    public override void SetDefaultContentHeaders(Type type, HttpContentHeaders headers, MediaTypeHeaderValue mediaType)
        {
        base.SetDefaultContentHeaders(type, headers, mediaType);
        headers.ContentType = new MediaTypeHeaderValue("application/json");
        }
    }