javascript - Kendo UI 网格无法与启用 asp.net web api odata 的服务正常工作

Question

我们正在使用kendo(2013.3.1119)和knockout(2.3)

我们创建了一个非常简单的网格，其中远程 odata 源绑定(bind)到 ASP.NET Web API

考虑以下代码:

        $(element).kendoGrid({
            dataSource: {
                type: 'odata',
                transport: {
                    read: { url: '/odata/VehicleGroups', dataType: 'json' }
                },
        schema: {
          data: function(response) {
                return response.value;
            },
            total: function (response) {
                      return response['odata.count'];
                 }
            },
                serverSorting: true,
                serverPaging: true,
                serverFiltering: true
            },
            dataBound: function () {
                // we'are using knockout templates instead of kendo templates,
                // so after data load & after all row templates are created, we call following code to apply bindings.
                ko.memoization.unmemoizeDomNodeAndDescendants(element);
            },
            autoBind: true,
            rowTemplate: function (item) {
                // some codes are omitted here.
                // following code will use knockout template.
                return ko.renderTemplate('rowTemplate', context.createChildContext(item));
            },
            toolbar: function () {
                return ko.renderTemplate('toolbar', context);
            },
            pageable: {
                pageSize: 10
            },
            sortable: true,
            resizable: true,
            reorderable: false,
            columns: [{ field: 'dVehicle_01', title: 'Unit/Vehicle Number' },
                      { field: 'dVehicle_02', title: 'Vehicle Identification Number' },
                      { field: 'dVehicle_04', title: 'Vehicle Type' },
                      { field: '', title: 'Actions' }]
        });

以下项目工作正常:

1- 网格已创建。

2- 发送第一个带有 $inlineCount=allpages 和 take=10 的查询。

3- 收到响应并生成行模板并显示数据。

4- $(element).data('kendoGrid').dataSource.data() 填充有对象。

但是我们有以下问题:

$(element).data('kendoGrid').pager.dataSource.data() 为空，因此我们的寻呼机无法正常工作。

那么我们的实现出了什么问题呢？这是正确的配置吗？

起初，我们的 OData Web 服务响应存在问题，现在该服务已得到管理，如您在本文中所见:

kendo Grid DataSource with OData format = json

谢谢

修订版 2:根据请求，我添加了以下有关网格请求响应的信息:

textStatus: "success"

jqXhr.statusText: "OK"

jqXhr.responseJSON: 
    odata.count: "29"
    odata.metadata: "http://localhost:2452/odata/$metadata#VehicleGroups"
    value: Array[10]

jqXhr.getAllResponseHeaders():
    "Pragma: no-cache
    Date: Sat, 21 Dec 2013 07:20:00 GMT
    Server: Microsoft-IIS/8.0
    X-AspNet-Version: 4.0.30319
    X-Powered-By: ASP.NET
    Content-Type: application/json; charset=utf-8
    Cache-Control: no-cache
    DataServiceVersion: 3.0
    Content-Length: 7192
    Expires: -1"

jqXhr.state(): "resolved"

jqXhr.responseText:
    "{
      "odata.metadata":"http://localhost:2452/odata/$metadata#VehicleGroups","odata.count":"29","value":[
        {
          "YearGroup":[

          ],"Id":"fdd6a5e0-6587-11e3-978d-2797cb4c371a","Version":"122","DateOfArchive":"2013-12-15T12:54:49.0503312Z","IsArchived":false,"ISV":true,"CreatedBy":"ae5882fb-b833-46d7-9f58-0505ec2a6f8f","CreatedTime":"2013-12-15T12:54:49.0973461Z","LastModifiedTime":"2013-12-15T12:54:49.0973461Z","LastModifiedBy":"ae5882fb-b833-46d7-9f58-0505ec2a6f8f", ...

修订版 3:

我更改了配置以使用 Kendo UI 演示的以下 WCF 数据服务示例， http://demos.kendoui.com/service/Northwind.svc/Orders 但不幸的是，它对我不起作用。

修订版 4:

我已经降级到 kendo.all.min 2012.2.913，我的项目现在使用 Web API 和 knockout 运行良好(!)。

但是我创建了另一个示例，使用 WCF 数据服务而不是 Web API 并且没有 knockout

模板，并且它可以与最新版本的kendo(2013.3.1119)一起正常工作(但在我的项目之外)

knockout或者web api有什么问题吗？

修订版 5:

我已将运行良好的 WCF 数据服务示例移至我的项目中。

它不起作用!

什么原因？ Pager 正在使用旧版本，无论是在我的项目中还是在我的项目之外，但是

最新版本在我的项目中不起作用，即使没有 knockout 和 WCF，但最新版本是

在我的项目之外工作。

我现在应该做什么？

修订版 6:删除 kendo.dataViz.js 后，数据网格可与 ASP.NET Web API OData 配合使用， knockout 模板和分页。

现在我的项目一切正常。

Rev 7:我在 jsfiddle 上创建了一个非常简单的剑道网格，当引用 dataViz 时，它的寻呼机无法工作。

但是如果您删除 dataViz 引用，寻呼机将正常工作。

http://jsfiddle.net/ysmoradi/8L9Pn/2/

注意:请检查chrome上的jsfiddle，所有css均未引用，

所以它的ui并不美观，但是添加所有css并不能解决问题。

Answer 1

ASP.NET WebAPI 的 odata 配置略有不同，需要进行一些微调 - 例如响应的 total 字段和数据字段。

Kendo 团队分享了有关以下内容的工作示例 GutHub公共(public) repo 。 dataSource配置的索引页可以找到 here 。 Conoller 现已上市 here .

我希望此信息能够解决您遇到的问题。