1

如果我尝试使用 Kendo 数据源将数据从远程服务 (WebAPI) 绑定到 Kendo Grid，我将不胜感激。当我在 Chrome 中使用开发人员工具时，我可以看到正在调用服务并返回 json 数据 - 问题是数据没有呈现到网格中。

这是一个非常简单的页面的 HTML，其中只包含网格：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link href="css/kendo.common.min.css" rel="stylesheet" />
    <link href="css/kendo.default.min.css" rel="stylesheet" />

    <script src="lib/jquery.min.js"></script>
    <script src="lib/kendo.web.min.js"></script>

</head>
<body>

    <div id="reportGrid"></div>

    <script>

        $(document).ready(function ()
        {
            // Report datasource
            var reportsDataSource = new kendo.data.DataSource({

                // Transport
                transport: {
                    read: {
                        url: "http://localhost:54363/api/report",
                        dataType: "jsonp",
                        jsonpCallback: "reportCallback"
                    }
                },

                // Schema
                schema: {
                    model: {
                        fields: {
                            SerialNumber: { type: "string" },
                            Version: { type: "number" },
                            DateReceived: { type: "date" },
                            Title: { type: "string" }
                        }
                    }
                }
            });


            $("#reportGrid").kendoGrid(
            {
                dataSource: reportsDataSource
            });


        });

    </script>

</body>
</html>

当页面加载时，调用 Web 服务并检索 JSON（我使用 JSONP，因为站点和服务位于不同的域中）。调用该服务并检索以下 JSON（我通过检查 Chrome 中的响应来获取此信息）。

[{"SerialNumber":"1","Version":2,"DateReceived":"2013-08-01T16:01:12.5828003+01:00",...

我真的不明白为什么没有填充网格。

4

4 回答 4

1

如果您按照此处的说明进行操作，您应该可以做到。

于 2013-07-30T14:30:45.897 回答
0

这里有一个显示 Web API 绑定的示例网站：https ://github.com/telerik/kendo-examples-asp-net/tree/master/grid-webapi-crud

也许它会帮助你前进。

于 2013-07-31T14:56:49.857 回答
0

我开始使用 odata，一切都开始按预期工作。潜在的错误与从 Web 服务返回的 JSON 格式不正确有关 - 尽管在我的一生中，我无法弄清楚服务返回的内容有什么问题。

于 2013-08-12T16:42:01.623 回答
0

我只是有同样的问题。

要修复它，只需将“数据”属性添加到模式中，在其中检查您获取值的格式。很可能你有一些包装 Data 对象的东西，你只需要返回项目列表。

schema: {
    data: function (response) {
        return response.Data;
    }
},

PS 有时我只是讨厌花多少时间来弄清楚 Kendo UI 的这些可选但重要的属性。我希望他们的文档更好。

于 2013-11-26T13:04:21.970 回答