kendo-ui - 剣道 UI グリッドが機能しない

Question

DataSource からデータをバインドするグリッドがありますが、データは表示されません。サーバーからのデータは表示されますが、グリッドは空のままです。これが私のコードです。

var dts = new kendo.data.DataSource({
  type: "json",
  serverPaging: true,
  pageSize: 20,
  group: { field: 'ProductType' },
  transport: {
    read: {
      url: "http://someurl.com", // the remove service url
      dataType: "json" ,// JSONP (JSON with padding) is required for cross-domain AJAX
      type: "GET", 
    },
  parameterMap: function(options) {
    return {
      //Some parameters
      };
    }
  }    
});

var grid = $("#grid").kendoGrid({
  dataSource: dts,
  navigatable: true,
  sortable: true,
  audoBind: false,
  height: 240,
  pageable: false,
  scrollable: false,
  columns: [
    {
      field: "SKU",
      width: 100,
      title: "SKU"
    }, {
      field: "ItemDescription",
      width: 150,
      title: "DescriptionDescription"
    }, {
      field: "Quantity",
      width: 80,
      title: "QTY"
    }, {
      field: "UOM",
      width: 80,
      title: "UOM"
    }, {
      field: "UnitPrice",
      width: 130,
      title: "UnitPrice",
      format: "{0:c}"
    }, {
      field: "Tax",
      width: 80,
      title: "Tax",
      format: "{0:c}"
    }, {
      field: "Total",
      width: 80,
      title: "Total",
      format: "{0:c}"
    }
  ]
}).data("kendoGrid");

dts.read();

これが私のコードです。最初にデータソース「dts」を作成し、次にグリッド「grid」を作成し、最後に読み取り関数「dts.read()」を呼び出します。DataSource はサーバーからデータを読み取りますが、グリッドには表示されません。

どんな助けでも大歓迎です！