Kendo Grid 未绑定到我的 WCF 服务
Posted
技术标签:
【中文标题】Kendo Grid 未绑定到我的 WCF 服务【英文标题】：Kendo Grid not Binding to My WCF Service 【发布时间】：2014-06-14 17:30:03 【问题描述】：基本上，这是我的网络服务返回的数据示例：
"d":
[
"__type":"MyDataItem:#MyProject.SomeSpace.Data",
"Format":"msw12",
"Id":"0900d60b8712e4ea",
"LastModifiedBy":"",
"LastModifiedDate":null,
"Name":"Jeff's tax document",
"Size":12727
,
"__type":"MyDataItem:#MyProject.SomeSpace.Data",
"Format":"pdf",
"Id":"0900d60b8714b1d8",
"LastModifiedBy":"",
"LastModifiedDate":null,
"Name":"Bob's Test File",
"Size":11911784
]
这是我的剑道网格代码。它加载、调用服务，但随后出现错误：
<div id="example" class="k-content">
<div id="grid"></div>
<script type="text/javascript">
$(document).ready(function ()
$("#grid").kendoGrid(
dataSource:
type: "odata",
transport:
read: "http://localhost:4567/Services/MYSERVICE.svc/GetListing",
dataType: "json"
,
schema:
data: "d"
,
pageSize: 10,
serverPaging: true,
serverSorting: true
,
scrollable:
virtual: true
,
height: 250,
selectable: "row",
columns: [
field: "d.Name",
title: "Name"
,
field: "d.LastModifiedDate",
title: "Last Modified"
,
field: "d.Size",
title: "File Sized",
,
field: "d.LastModifiedBy",
title: "Last Modified By"
]
);
)
</script>
</div>
我在 Chrome 中看到的错误是： Uncaught SyntaxError: Unexpected token :
但是，该错误与返回的 json 数据有关，并且都在一行上，因此无法帮助我找到它。
我注意到从服务返回的数据在根节点的开头有一个“d”。我在网上看到的其他json数据示例要简单得多，并且没有这个根节点。如果需要，我们也许可以更新服务以不同的方式返回数据。我只想知道如何编辑我的剑道代码以将这些东西放在网格上。我认为之后我可以研究和调整它。
我需要“d”吗？在列声明中引用？我想我可能有那部分错了。
感谢您的帮助！
【问题讨论】：
你试过删除d.吗？
【参考方案1】：
我发现了一些问题。您已指定“odata”，但您的服务似乎不是 OData 端点。然后，您将dataType 设置为不是的传输选项- 它是transport.read 的选项。最后，您需要从列的字段名称中删除 d。
下面是固定配置的样子：
$("#grid").kendoGrid(
dataSource:
transport:
read:
url: "http://localhost:4567/Services/MYSERVICE.svc/GetListing",
dataType: "json"
,
schema:
data: "d"
,
pageSize: 10
,
scrollable:
virtual: true
,
height: 250,
selectable: "row",
columns: [
field: "Name",
title: "Name"
,
field: "LastModifiedDate",
title: "Last Modified"
,
field: "Size",
title: "File Sized",
,
field: "LastModifiedBy",
title: "Last Modified By"
]
);
还有现场演示：http://trykendoui.telerik.com/@korchev/IGah
【讨论】：
【参考方案2】：是的 - 删除“d”。在您的列定义中。来自documentation，一个例子：
<script>
var dataSource = new kendo.data.DataSource(
transport:
read:
url: "http://demos.telerik.com/kendo-ui/service/twitter/search",
dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
data: q: "html5" // search for tweets that contain "html5"
,
schema:
data: "results" // twitter's response is "results": [ /* results */ ]
);
dataSource.fetch(function()
var data = this.data();
console.log(data.length);
);
</script>
data: "results" 只是告诉 kendo 该数组包含在对象结果中。列定义不应包含 results.Column1、results.Column2，仅包含 Column1、Column2 等...
columns: [
field: "Name",
title: "Name"
,
field: "LastModifiedDate",
title: "Last Modified"
,
field: "Size",
title: "File Sized",
,
field: "LastModifiedBy",
title: "Last Modified By"
]
另外，我后来遇到的另一个问题是在进行服务器端分页时计数错误。这是因为我错过了“总”元素。 “total”元素应该返回元素的总数（不仅仅是返回的元素数 - 如果您正在执行服务器端分页）。
来自documentation
如果未指定 schema.total，则返回 Array 的长度 将使用 schema.data。 schema.total 选项必须设置，如果 serverPaging 选项设置为 true。
示例
<script>
var dataSource = new kendo.data.DataSource(
transport:
/* transport configuration */
serverGrouping: true,
schema:
total: "total" // total is returned in the "total" field of the response
);
</script>
现在都在一起
<div id="example" class="k-content">
<div id="grid"></div>
<script type="text/javascript">
$(document).ready(function ()
$("#grid").kendoGrid(
dataSource:
transport:
read:
url: "http://localhost:4567/Services/MYSERVICE.svc/GetListing",
dataType: "json"
,
schema:
data: "d",
total: "totalCount"
,
pageSize: 10,
serverPaging: true,
serverSorting: true
,
scrollable:
virtual: true
,
height: 250,
selectable: "row",
columns: [
field: "Name",
title: "Name"
,
field: "LastModifiedDate",
title: "Last Modified"
,
field: "Size",
title: "File Sized",
,
field: "LastModifiedBy",
title: "Last Modified By"
]
);
)
</script>
</div>
你应该返回什么
"d":
[
"__type":"MyDataItem:#MyProject.SomeSpace.Data",
"Format":"msw12",
"Id":"0900d60b8712e4ea",
"LastModifiedBy":"",
"LastModifiedDate":null,
"Name":"Jeff's tax document",
"Size":12727
,
"__type":"MyDataItem:#MyProject.SomeSpace.Data",
"Format":"pdf",
"Id":"0900d60b8714b1d8",
"LastModifiedBy":"",
"LastModifiedDate":null,
"Name":"Bob's Test File",
"Size":11911784
, /* ..... 8 other items if you are doing 10 per page ... */
],
"totalCount": 534
编辑 很好地抓住了 Atanas，我错过了 jsonp 部分。我已经更新了这段代码，并稍微修改了你的代码以添加 serverPaging。注意：服务器分页实际上不起作用，因为您没有处理分页的后端逻辑，但是添加了“计数”元素。应该让你开始。
http://trykendoui.telerik.com/uNIX
【讨论】：
嗨，Jac。感谢您的出色回应！ “totalCount”...您是说服务需要将其作为流末尾的最后一条信息返回，如您的示例所示？ 也值得注意。我仍然收到同样的错误。由于我目前无法更改 WCF 服务以恢复“totalCount”，因此我决定取出分页来看看这是否可行。所以我从你的例子中取出了 pageSize、serverPaging、serverSorting 和 totalCount，它仍然给了我： Uncaught SyntaxError: Unexpected token : 查看编辑，Atanas 是对的，我错过了其他内容以上是关于Kendo Grid 未绑定到我的 WCF 服务的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 MVC Razor 在编辑器模板中将 Kendo UI Grid 绑定到我的模型集合
文档准备好后的数据源 ajax kendo 网格，因为模型未正确绑定在部分视图上