How to bind Grid to Web API Controller?

[Dave]

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!

[Oscar]

Hello Telerik team.
Same question as Dave, here
Regards.

[Calvin]

I'd also like to know how to do this.  thanks

[Tyler]

It sounds like the ApiControllers dont work with Kendo MVC right now.

See the second post in this thread
http://www.kendoui.com/forums/mvc/grid/kendo-mvc-grid-webapi-and-odata.aspx