数据返回到浏览器但 Kendo 网格未被调用？

Question

我有一个使用多个 Kendo 网格的页面。每个网格定义一个数据源，它对 Wep API 2.0 资源进行 ajax 调用。

Fiddler 显示正在进行 ajax 调用并且数据正在正确返回。但是，网格似乎对此无能为力。我在网格上有一个用于 dataBound 属性的函数，但它从未被调用过。

知道会发生什么吗？

更新

这是代码和返回的数据。

数据源

var getUnassignedCases = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: {
            url: hostUrl + "/api/cases/getUnassignedCases/" + sakUser,
            dataType: "jsonp",
            cache: false,
            data: { id: sakCase }
        },
        scrollable: {
            virtual: true
        },
        pageSize: 10,
        resizable: true,
        sortable: {
            mode: "single",
            allowUnsort: true
        },
        pageable: {
            input: true,
            numeric: false,
            buttonCount: 10
        }
    },
    schema: {
        model: {
            id: "SakCase",
            fields: {
                SakCase: { type: "number" },
                CaseId: { type: "string" },
                SakIntake: { type: "string" },
                CaseTypeDescription: { type: "string" },
                DateCreated: { type: "date" },
                CaseStatusCode: { type: "string" }
            }
        }
    },
    pageSize: 10
});

网格

DisplayNoResultsFound 函数从未被调用（就像现在这样），所以我没有包含源代码。

$("#UnassignedCasesGrid").kendoGrid({
    columns: [
                { field: "CaseId", title: "Case ID", width: 150, template: "<a href='/Arms/Case_Information.aspx?SakCase=${SakCase}'>${CaseId}</a>" },
                { field: "SakIntake", title: "Intake ID", template: "#if (SakIntake === null) {# #} else {#<a href='/Arms/Intake.aspx?SakIntake=${SakIntake}'>${SakIntake}</a>#} #" },
                { field: "CaseTypeDescription", title: "Case Type", width: 100 },
                { field: "DateCreated", title: "Date Created", format: '{0:MM/dd/yyyy}', width: 100, editor: dateTimeEditor },
                { field: "CaseStatusCode", title: "Case Status" }
    ],
    dataSource: getUnassignedCases,
    dataBound: function () {
        DisplayNoResultsFound($('#UnassignedCasesGrid'), 'UnassignedCasesCount', 'Unassigned Cases');
    },
    type: "aspnetmvc-ajax",
    groupable: false,
    scrollable: {
        virtual: true
    },
    pageSize: 10,
    resizable: true,
    sortable: {
        mode: "single",
        allowUnsort: true
    },
    pageable: {
        buttonCount: 10
    }
});

Return 来自 Web API 调用

前几个字段。 header 中的长度反映了返回的 100 个测试行。

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Fri, 24 Jul 2015 17:46:56 GMT
Content-Length: 14993

[
  {
    "SakCase": 1,
    "CaseId": "2015M00001",
    "SakIntake": null,
    "CaseTypeDescription": "Medical Review",
    "DateCreated": "2014-08-04T17:19:59",
    "CaseStatusCode": "O"
  },
  {
    "SakCase": 2,
    "CaseId": "2015M00002",
    "SakIntake": null,
    "CaseTypeDescription": "Medical Review",
    "DateCreated": "2013-03-20T08:02:46",
    "CaseStatusCode": "O"
  }
]

DOM 通话后

以下摘自 chrome 检查元素。

这是列的定义：

<thead role="rowgroup">
    <tr role="row">
    <th role="columnheader" data-field="CaseId" data-title="Case ID" class="k-header" data-role="sorter">
        <a class="k-link" href="#">Case ID</a>
    </th>
    <th role="columnheader" data-field="SakIntake" data-title="Intake ID" class="k-header" data-role="sorter">
        <a class="k-link" href="#">Intake ID</a>
    </th>
    <th role="columnheader" data-field="CaseTypeDescription" data-title="Case Type" class="k-header" data-role="sorter">
        <a class="k-link" href="#">Case Type</a>
    </th>
    <th role="columnheader" data-field="DateCreated" data-title="Date Created" class="k-header" data-role="sorter">
        <a class="k-link" href="#">Date Created</a>
    </th>
    <th role="columnheader" data-field="CaseStatusCode" data-title="Case Status" class="k-header" data-role="sorter">
        <a class="k-link" href="#">Case Status</a>
    </th>
    </tr>
</thead>

这是table的内容：

<table role="grid">
    <colgroup>
        <col style="width:150px">
        <col>
        <col style="width:100px">
        <col style="width:100px">
        <col>
    </colgroup>
    <tbody role="rowgroup"></tbody>
</table>

Answer 1

原来这是一条红鲱鱼。浏览器没有获取数据，这不是一个有约束力的问题。我们确实测试了我们的模板（很好），我们获取了从 API 返回的数据，并将其显式插入到页面中，效果很好。

事实证明，当使用带有 https 连接的 Fiddler 时，fiddler 取回了数据，但由于 CORS 配置，浏览器拒绝了它。一旦我输入一些消息以尝试找出绑定问题的位置（因此我随后打开了控制台），就会在浏览器开发人员工具的控制台中看到这一点。一旦 API 服务器配置为允许使用 web.config 文件中的 Access-Control-Allow-Origin 进行跨站点访问，它就起作用了。

数据返回到浏览器但 Kendo 网格未被调用？

Data is returned to browser but Kendo Grid isn't called?

kendo-grid

asp.net-web-api2

更新

数据源

网格

Return 来自 Web API 调用

DOM 通话后