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

How to bind Grid to Web API Controller?

3 Answers 455 Views

Grid

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

Dave asked on 20 Jul 2012, 08:10 PM

I'm having trouble binding data from a Web API Controller to a Grid. Unfortunately I haven't been able to find any examples of this.

Here's the API Controller:

public class FruitController : ApiController

{

public class Fruit

{

public string Name { get; set; }

public string Color { get; set; }

}

public IEnumerable<Fruit> GetFruits()

{

List<Fruit> list = new List<Fruit>();

Fruit f = new Fruit();

f.Name = "Apple";

f.Color = "Red";

list.Add(f);

f = new Fruit();

f.Name = "Kiwi";

f.Color = "Green";

list.Add(f);

return list;

}

And in my .cshtml file I have:

@model IEnumerable<FruitController.Fruit>

@(Html.Kendo().Grid(Model)

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.Name);

columns.Bound(p => p.Color);

})

.Groupable()

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetFruits", "api/Fruit").Type(HttpVerbs.Get)

)

When I run this, I get a successful JSON response from the controller (seen via Chrome):

[{"Name":"Apple","Color":"Red"},{"Name":"Kiwi","Color":"Green"}]

But the grid has no data in it. Is there something obvious I am missing? I haven't been able to figure this out!

Thanks!

How to bind Grid to Web API Controller?

3 Answers, 1 is accepted