title: kendo ui grid not showing data
body: <p>I am trying to get this basic kendo ui with expandable rows working:</p>
  
  <pre><code>&lt;div id="grid"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function () {
          $("#grid").kendoGrid({
              columns: [
              {
                  field: "ProductId",
                  title: "ProductId"
              }
          ],
              dataSource: {
                  type: "json",
                  transport: {
                      read: '@Url.Action("GetData1", "MockForms")'
                  }
              },
              height: 450,
              sortable: true,
              pageable: true,
              detailTemplate: "&lt;h2 style='background-color: yellow;'&gt;Expanded!&lt;/h2&gt;",
              detailExpand: function (e) {
                  this.collapseRow(this.tbody.find(' &gt; tr.k-master-row').not(e.masterRow));
              }
          });
      });  
  &lt;/script&gt;
  </code></pre>
  
  <p>The json is generated like this:</p>
  
  <pre><code>public ActionResult GetData1([DataSourceRequest] DataSourceRequest request)
          {
              var list = new List&lt;Product&gt;
                  {
                      new Product {ProductId = 1, ProductType = "SomeType 1", Name = "Name 1", Created = DateTime.UtcNow},
                      new Product {ProductId = 1, ProductType = "SomeType 2", Name = "Name 2", Created = DateTime.UtcNow},
                      new Product {ProductId = 1, ProductType = "SomeType 3", Name = "Name 3", Created = DateTime.UtcNow}
                  };
  
              return Json(list.AsQueryable().ToDataSourceResult(request));
          }
  </code></pre>
  
  <p>and seems to be send OK (according to firebug). However, nothing is bound (there are no javascript errors). Any ideas?</p>
  
  <p>PS:</p>
  
  <p>OnaBai's 2nd comment helped me to get this to work. I changed:</p>
  
  <pre><code>return Json(list.AsQueryable().ToDataSourceResult(request));
  =&gt;
  return Json(list);
  </code></pre>
  
  <p>which produces this JSON:</p>
  
  <pre><code>[{"ProductId":1,"ProductType":"SomeType 1","Name":"Name 1","Created":"\/Date(1371022051570)\/"},{"ProductId":1,"ProductType":"SomeType 2","Name":"Name 2","Created":"\/Date(1371022051570)\/"},{"ProductId":1,"ProductType":"SomeType 3","Name":"Name 3","Created":"\/Date(1371022051570)\/"}]
  </code></pre>
  
  <p>Still I would like to use:</p>
  
  <pre><code>return Json(list.AsQueryable().ToDataSourceResult(request));
  </code></pre>
  
  <p>as this will eventually make paging and sorting easier. It currently produces:</p>
  
  <pre><code>{"Data":[{"ProductId":1,"ProductType":"SomeType 1","Name":"Name 1","Created":"\/Date(1371022186643)\/"},{"ProductId":1,"ProductType":"SomeType 2","Name":"Name 2","Created":"\/Date(1371022186648)\/"},{"ProductId":1,"ProductType":"SomeType 3","Name":"Name 3","Created":"\/Date(1371022186648)\/"}],"Total":3,"AggregateResults":null,"Errors":null}
  </code></pre>
  
  <p>I tried to use:</p>
  
  <pre><code>field: "Data.ProductId",
  </code></pre>
  
  <p>instead of:</p>
  
  <pre><code>field: "ProductId",
  </code></pre>
  
  <p>in the JavaScript code with no avail.</p>