Angular Kendo Grid 小部件，使用哪个包文件？答案

【问题标题】：Angular Kendo Grid widget, which package file to use?Angular Kendo Grid 小部件，使用哪个包文件？
【发布时间】：2014-05-08 16:11:38
【问题描述】：

我正在使用“kendo.web.min.js”通过范围创建剑道网格，如下所示：

<div id="grid" kendoui-grid ng-model="rows"></div>
$("#grid").kendoGrid({....

在范围内，我通过它的 id 获取元素并在其上构建网格。

现在我需要将它用作指令，就像那样（没有 id）：

<div kendo-grid k-options="mainGridOptions"></div>

如下图：

http://kendo-labs.github.io/angular-kendo/#/Grid

但网格无法显示。

“kendo.web.min.js”是正确的文件吗？

如果没有，我应该使用哪一个？

谢谢！

【问题讨论】：

标签： angularjs kendo-ui grid directive

【解决方案1】：

除了 Kendo UI 所需的脚本之外，您还必须包含 Angular 库脚本和 Angular/Kendo 集成脚本。

这是一个完整的例子：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Angular + Kendo</title>
    <link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
    <link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.bootstrap.min.css">
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src="//cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
    <script src="//kendo-labs.github.io/angular-kendo/angular-kendo.js"></script>
</head>
<body ng-app="angular-kendo-example">
    <div ng-controller="GridController">    
        <div kendo-grid k-options="options" k-data-source="northwind"></div>
    </div>

    <script>
        angular.module('angular-kendo-example', ['kendo.directives']);

        function GridController($scope) {
            $scope.options = {
                sortable: true,
                pageable: true,
                columns: [{
                    field: "FirstName",
                    title: "First Name",
                    width: "120px"
                },{
                    field: "LastName",
                    title: "Last Name",
                    width: "120px"
                },{
                    field: "Country",
                    width: "120px"
                },{
                    field: "City",
                    width: "120px"
                },{
                    field: "Title"
                }]
            };

            $scope.northwind = {
                type: "odata",
                transport: {
                    read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                },
                pageSize: 5,
                serverPaging: true,
                serverSorting: true
            };
        }
    </script>
</body>
</html>

Here is a link to a running fiddle.

【讨论】：

谢谢！经过我检查，这是一个角度问题。