Comment lier Kendo UI Grille de Web API Contrôleur?

J'ai de la difficulté liaison de données à partir d'une API Web Contrôleur de Kendo UI grille. Malheureusement, je n'ai pas été en mesure de trouver des exemples de cette.

Voici l'API Contrôleur:

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;
    }
}

Et dans mon .cshtml fichier que j'ai:

 @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)

            )
        )
    )

Lorsque je l'exécute, je reçois une réponse réussie JSON à partir du contrôleur:

[{"Name":"Pomme","Color":"Rouge"},{"Name":"Kiwi","Color":"Green"}]

Mais la grille n'a pas de données. Il est évident que je suis absent? Je n'ai pas été en mesure de comprendre cela!

Merci!

OriginalL'auteur Dave | 2012-07-20