This is a migrated thread and some comments may be shown as answers.

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

3 Answers 64 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 11 Feb 2014, 10:42 PM
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?

3 Answers, 1 is accepted

Sort by
0
Stephen
Top achievements
Rank 1
answered on 11 Feb 2014, 11:29 PM
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.
0
Accepted
Daniel
Telerik team
answered on 13 Feb 2014, 07:00 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Stephen
Top achievements
Rank 1
answered on 13 Feb 2014, 09:28 PM
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!
Tags
Grid
Asked by
Stephen
Top achievements
Rank 1
Answers by
Stephen
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or