Wie binden Kendo UI Grid-Web-API-Controller?

Ich habe Probleme beim binden von Daten aus einer Web-API-Controller zu einem Kendo UI grid. Leider habe ich noch nicht finden konnten, sind Beispiele dafür.

Hier ist die 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;
    }
}

Und in meinem .cshtml-Datei habe ich:

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

            )
        )
    )

Wenn ich diesen starte, bekomme ich eine erfolgreiche JSON-Antwort von der Steuerung:

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

Aber das raster keine Daten enthält. Gibt es etwas, offensichtlich bin ich vermisst? Ich habe nicht in der Lage, um dies herauszufinden!

Dank!

InformationsquelleAutor Dave | 2012-07-20