Kendo Grid not working with OData Controller

Question

Ok, I'm at the end of my rope here. I've looked at and copied every example I can find and nothing works. Here is my setup

Controller action:

public async Task<IHttpActionResult> GetRecipeOData(ODataQueryOptions<Recipe> queryOptions)
        {
            // validate the query.
            try
            {
                queryOptions.Validate(_validationSettings);
            }
            catch (ODataException ex)
            {
                return BadRequest(ex.Message);
            }


            RecipeContext rc = new RecipeContext();            

            return Ok<IQueryable<Recipe>>(rc.Recipes.AsQueryable());
            //return StatusCode(HttpStatusCode.NotImplemented);
        }

Kendo Grid:

var initRecipesGrid = function () {
            $("#recipesGrid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "odata/RecipeOData",
                    }
                },
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    field: "Label",
                    title: "Recipe Name"
                },{
                    field: "OriginalGravity",
                    title: "O.G."
                },{
                    field: "FinalGravity",
                    title: "F.G."
                }]
            });
        }

The following request:

GET http://localhost:25189/odata/RecipeOData?$callback=jQuery21109926259643398225_1405994583958&%24inlinecount=allpages&%24format=json 

Returns the following response:

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.0
DataServiceVersion: 3.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?Qzpcd29ya3NwYWNlXEJlZXJSZWNpcGVcQmVlclJlY2lwZVdlYlxvZGF0YVxSZWNpcGVPRGF0YQ==?=
X-Powered-By: ASP.NET
Date: Tue, 22 Jul 2014 02:03:22 GMT
Content-Length: 836

{
  "odata.metadata":"http://localhost:25189/odata/$metadata#RecipeOData","value":[
    {
      "Label":"NewCrazy Icelandic Porter","SubmittedById":"b31452d1-d8d7-480c-aa9c-4e298da0054e","StyleId":6,"Notes":"Love this beer","OriginalGravity":1.057,"FinalGravity":1.012,"YeastId":635,"SubmittedOn":"2014-07-17T22:05:59.967"
    },{
      "Label":"NewSome Crazy Amber Ale","SubmittedById":"b5166f3a-b278-4f2c-8ec5-12376de48405","StyleId":4,"Notes":"Great taste, less filling","OriginalGravity":1.057,"FinalGravity":1.012,"YeastId":1027,"SubmittedOn":"2014-07-17T22:10:17.667"
    },{
      "Label":"NewCrazy Icelandic Porter","SubmittedById":"30f22f2f-6f28-4a16-8dc8-f3f837887e88","StyleId":9,"Notes":"Love this beer","OriginalGravity":1.057,"FinalGravity":1.012,"YeastId":763,"SubmittedOn":"2014-07-17T22:10:29.353"
    }
  ]
}

I've added an "error" function to the dataSource and I log the error. I get the following:

object {xhr: Object, status: "parsererror", errorThrown: SyntaxError, sender: ct.extend.init, _defaultPrevented: false…}
_defaultPrevented: false
errorThrown: SyntaxError
message: "Unexpected token :"
stack: "SyntaxError: Unexpected token :↵    at eval (native)↵    at Function.jQuery.extend.globalEval (http://localhost:25189/Scripts/jquery-2.1.1.js:330:5)↵    at jQuery.ajaxSetup.converters.text script (http://localhost:25189/Scripts/jquery-2.1.1.js:8654:11)↵    at ajaxConvert (http://localhost:25189/Scripts/jquery-2.1.1.js:7786:19)↵    at done (http://localhost:25189/Scripts/jquery-2.1.1.js:8201:15)↵    at XMLHttpRequest.<anonymous> (http://localhost:25189/Scripts/jquery-2.1.1.js:8598:9)"
get stack: function () { [native code] }
set stack: function () { [native code] }
__proto__: Error
isDefaultPrevented: function (){return this._defaultPrevented===!0}
preventDefault: function (){this._defaultPrevented=!0}
sender: ct.extend.init
status: "parsererror"
xhr: Object
__proto__: Object

Answer 1

I had my DataSource config nested wrong. I needed it to look like this:

transport: {
    read: {
        url:"odata/RecipeOData",
        dataType: "json"
    }