Question

我很感激帮助理解我试图使用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",...

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

Answer 1

如果您已按照说明here进行操作，则应该可以执行此操作。

Answer 2

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

也许这会帮助你前进。

Answer 3

我开始使用odata，它开始按预期工作了。潜在的错误与Web服务中返回的JSON没有正确格式化有关 - 虽然在我的生活中我无法弄清楚服务返回的内容有什么问题。

Answer 4

我遇到了同样的问题。

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

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

P.S。有时我只是讨厌弄清楚Kendo UI的这些可选但重要的属性需要多少时间。我希望他们的文件更好。

将Kendo Grid绑定到Web API

4 个答案: