WebApi, OpenAccess, Kendo Grid, and ASP.Net Helpers data not showing

[Stephen]

I am having problems getting data to show up in a grid when using WebApi which is built with the OpenAccess API "wizard" in a Kendo Grid built with ASP Helpers. I am 99.9% sure that the request header is asking for XML not JSON. I know with jQuery I can request it to be in "json" format, and if I bring data in through a model I can use a json serializer. But I am wanting to make an Web API call from a "razor, asp" built kendo control.
A visual will help:
​ @(Html.Kendo() Grid<CompanyAddress>()
.Name("grid1")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read
.Type(HttpVerbs.Get)
.Url(String.Format("/api/CompanyAddresses/GetByCompanyId/{0}", 1))))
.Pageable()
.Sortable())

I can do it all day long if I pass a model from code behind like:
​ @(Html.Kendo()
.Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.CompanyId).Width(140);
columns.Bound(c => c.DateEntered).Width(190);
columns.Bound(c => c.CompanyName);
columns.Bound(c => c.Website).Width(110);
})
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false))
))


And I know I can do this:
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 430,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
width: 150
}
]
});
});
</script>

I feel as though there should be a line of code that allows me to do something like this:
.Read(read=>read.Accept("json").Type(HttpVerbs.Get).Url("/api/controller/").

Am I missing something?

[Stephen]

Okay, so my 99.9% guess was wrong. I can confirm that I am receiving JSON now, but the grid still shows no data. Again, if I pass a model into the grid it will show that data in Kendo MVC grid. And I can make the call in jQuery and show the data in a $().kendoGrid(). For the life of me I have no idea why using:

​@(Html.Kendo()
.Grid<CompanyAddress>().Name("grid1")
                                          .DataSource(dataSource => dataSource
                                          .Ajax()
                                          .Read(read => read
                                                                         .Type(HttpVerbs.Get)
                                                                          .Url(String.Format("/api/CompanyAddresses/GetByCompanyId/{0}", 1))
)))

Will not show up in the grid.
By the way, I do see the data being returned complete and correctly to the browser in Firebug.

Completely at a loss.

[Daniel]

Hello Stephen,

Could you share the response from the server? If the data is bound without problem when using the JavaScript initialization then the response is probably not in the expected format for the MVC transport. You should return an object with fields named "Data" and "Total" that hold the collection and the total number of records. You should override the Get method and return a DataSourceResult as demonstrated in the binding to an ApiController code library project.

Regards,
Daniel
Telerik

[Stephen]

That's what I was missing. I had the DataSourceRequest and .ToDataSourceResult(), but I didn't have:

ModelBinder(typeof(LithoTest.Api.ModelBinders.DataSourceRequestModelBinder))] or the DataSourceRequestModelBinder class.

Worked first try!

Thank you!