title: How to bind JSON data with Kendo Grid
body: <p>Using MY WCF Service I am exposing JSON data:</p>
  
  <pre><code> [OperationContract]
   [WebGet(ResponseFormat=WebMessageFormat.Json)]
   List&lt;ProductDetails&gt; GetProductDetails();
  </code></pre>
  
  <p>Here is a sample of the returned JSON:</p>
  
  <blockquote>
    <p>{"d":[{"__type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":11,"UnitPrice":14.0000,"quanity":12},{"__type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":42,"UnitPrice":9.8000,"quanity":10},{"__type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":72,"UnitPrice":34.8000,"quanity":5},{"__type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10249,"ProductId":14,"UnitPrice":18.6000,"quanity":9},{"__type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10249,"ProductId":51,"UnitPrice":42.4000,"quanity":40}</p>
  </blockquote>
  
  <p>Trying to bind that to Kendo Grid using :</p>
  
  <pre><code>   &lt;script&gt;
                  $(document).ready(function () {
                      $("#grid").kendoGrid({
                          dataSource: {
                              type: "json",
                              transport: {
                                  read: "http://localhost/KendoServices/Web/GetProductDetails"
                              },
                              pageSize: 10
                          },
                          groupable: true,
                          sortable: true,
                          pageable: {
                              refresh: true,
                              pageSizes: true,
                              buttonCount: 5
                          },
                          columns: [{
                              field: "OrderId",
                              title: "OrderId",
                              width: 140
                          }, {
                              field: "ProductId",
                              title: "ProductId",
                              width: 190
                          }, {
                              field: "UnitPrice",
                              title: "UnitPrice"
                          }, {
                              field: "quanity",
                              width: 110
                          }]
                      });
                  });
              &lt;/script&gt;
  </code></pre>
  
  <p>For some reason, I'm unable to see any data on grid. There might be something wrong with the way I'm trying to bind my data. </p>