title: How to bind Kendo UI Grid to Web API Controller?
body: <p>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.  </p>
  
  <p>Here's the API Controller:</p>
  
  <pre><code>public class FruitController : ApiController
  {
      public class Fruit
      {
          public string Name { get; set; }
          public string Color { get; set; }
      }
  
      public IEnumerable&lt;Fruit&gt; GetFruits()
      {
          List&lt;Fruit&gt; list = new List&lt;Fruit&gt;();
  
          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;
      }
  }
  </code></pre>
  
  <p>And in my .cshtml file I have:</p>
  
  <pre><code> @model IEnumerable&lt;FruitController.Fruit&gt;
  
      @(Html.Kendo().Grid(Model)    
          .Name("Grid")
          .Columns(columns =&gt;
          {
              columns.Bound(p =&gt; p.Name);
              columns.Bound(p =&gt; p.Color);
          })
          .Groupable()
          .Pageable()
          .Sortable()
          .Scrollable()
          .Filterable()
          .DataSource(dataSource =&gt; dataSource
              .Ajax()
              .Read(read =&gt; read.Action("GetFruits", "api/Fruit").Type(HttpVerbs.Get)
  
              )
          )
      )
  </code></pre>
  
  <p>When I run this, I get a successful JSON response from the controller:</p>
  
  <p>[{"Name":"Apple","Color":"Red"},{"Name":"Kiwi","Color":"Green"}]</p>
  
  <p>But the grid has no data in it.  Is there something obvious I am missing? I haven't been able to figure this out!</p>
  
  <p>Thanks!</p>