无法将kendo datagrid数据源绑定到Azure移动服务?

时间:2014-07-03 12:30:58

标签: kendo-ui azure-mobile-services

我正在尝试按照本教程将kendo UI datagrid绑定到我的azure后端移动服务表(SASA)。 http://ignaciofuentes.com/archive/2014/01/20/zumo-kendo/ 但不幸的是,由于某些原因,它无法正常工作。我已经尝试将移动服务javascript sdk从1.0.0更新到1.1.5仍然没有运气。

这是我的代码..任何人都可以指出我做错了什么..服务正在返回正确的JSON ..

<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/everlive">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>

     <div id="example">
        <div id="grid"></div>
        <script>
            $(document).ready(function() {
var client = new WindowsAzure.MobileServiceClient("MY SERVICE URL", "MY API KEY");
var table = client.getTable("sasa");
var dataSource = new kendo.data.DataSource({
transport: {
    read: function (options) {
        table.includeTotalCount() //necessary for grid to paginate
             .read()
             .done(options.success);
    },
    update: function (options) {
        table.update(options.data)
             .done(options.success);
    },
    create: function (options) {
        var item = options.data;
        delete item.id; //ZUMO doesnt allow you to set your own ID. It gets auto generated.
        table.insert(item)
             .done(options.success);
    },
    destroy: function (options) {
        table.del(options.data)
             .done(options.success);
    }
},
pageSize: 10,
schema: {
    total: "totalCount",
    model: {
        id: "id",
        fields: {
            id: { type: "number" },
            name: { type: "string" },
            developer: { type: "string" },
        }
    }
}});

$("#grid").kendoGrid({
pageable: true,
dataSource: dataSource,
columns: [
    "name",
    "developer", {
    command: [{
        name: "edit",
        text: "Edit"
    }, {
        name: "destroy",
        text: "Delete"
    }]
}],
toolbar: [{
    name: "create"
}],
editable: "inline"
});      


       });
        </script>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

在测试中我使用kendo数据源和windows azure移动服务做了一段时间,我的dataSource CRUD方法有点不同。

create: function(options) {
    delete options.data.id;
    client.getTable("Customer").insert(options.data).done(function(data) {
      options.success(data);
    });
  },
  read: function(options) {
    client.getTable("Customer").read().done(function(data) {
      options.success(data);
    });
  },
  update: function(options) {
    client.getTable("Customer").update(options.data).done(function(data) {
      options.success(data);
    });
  },
  destroy: function(options) {
    client.getTable("Customer").del(options.data).done(function(data) {
      options.success(data);
    });
  }

它运作正常。也许尝试将.done(options.success);更改为

.done(function(data) { 
    options.success(data);
});

看看它是否有效?

- 编辑我重建了我用来测试的MobileService并挖出了代码,它仍能正常工作。以下是jsbin http://jsbin.com/jirexo/2/edit

的示例