How to bind Kendo UI Grid to Web API Controller?

Question

I'm having trouble binding data from a Web API Controller to a Kendo UI 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:

[{"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!

user1496353 · Accepted Answer · 2012-07-22 09:41:22Z

1

Have a look at the examples, it expects a DataSourceResult. In your controller include a method that does something like this, then it works.

I am looking at creating an aspect with postsharp that would introduce the create/update/delete methods in the controller class that Kendo requires.

using Kendo.Mvc.Extensions;

  public DataSourceResult Read([DataSourceRequest] DataSourceRequest request)
        {
            return this.Get().ToDataSourceResult(request);
        }

I think it is actually weird that Kendo does not provide an attribute/aspect for this for the API controller classes, but maybe I am missing something..

answered Jul 22, 2012 at 9:41

user1496353

462 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dave Over a year ago

Thanks, changing the return type of my APIController method to DataSourceResult allows the Grid to display the data. However if I try to use the AutoComplete control that now fails. So is it correct that this Grid control will not work with a standard APIController? It seems wrong to have to set all of my APIController results to be of the type DataSourceResult when other clients may use them.

Elaine Lin · Accepted Answer · 2015-07-21 13:58:08Z

1

I also had troubles getting Kendo to work for an API controller. For me, it worked to switch from using Kendo.Mvc.Extensions to using Kendo.DynamicLinq.

In my Kendo datasource, I removed the mysterious line type: aspnetmvc-ajax and the parameterMap.

answered Jul 21, 2015 at 13:58

Elaine Lin

5611 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to bind Kendo UI Grid to Web API Controller?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related