Kendo UI Grid无法正常工作

时间:2013-06-24 13:00:06

标签: kendo-ui kendo-grid

我有一个绑定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“grid”,最后,我调用read函数“dts.read()”。 DataSource从服务器读取数据,但不会显示在网格上。

任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:1)

您的dataSource可能存在一些问题,因为我无法使用kendo UI的服务重现此问题。

<script>

var dts = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
        dataType: "jsonp" ,
    },
    schema: {
        model: {
            fields: {
                OrderID: { type: "number" },
                Freight: { type: "number" },
                ShipName: { type: "string" },
                OrderDate: { type: "date" },
                ShipCity: { type: "string" }
            }
        }
    },
    pageSize: 10
});

var grid = $("#grid").kendoGrid({
    dataSource: dts,
    navigatable: true,
    sortable: true,
    audoBind: false,
    height: 240,
    pageable: false,
    scrollable: false,
    columns: [{
        *field: "ShipName",
        width: 100,
        title: "ShipName"
    }, {
        field: "OrderID",
        width: 80,
        title: "OrderID",
        format: "{0:c}"
    }]
}).data("kendoGrid");
dts.read();

请查看以下链接进行演示。

http://jsfiddle.net/jayeshgoyani/KZRfV/