让剑道网格工作答案

【问题标题】：getting Kendo Grid working让剑道网格工作
【发布时间】：2016-08-12 21:52:39
【问题描述】：

我已经将它简化为它的准系统 - 拉出任何可能会干扰的属性（如果你愿意，我可以将它们放回原处） - 甚至将它指向本地 .json - 并且仍然在我的网格中没有数据。

我确实在我放入的样本中看到了指向 Northwind api 的数据，所以我知道我的 i 被划线并且 t 被点缀。

        <div id="grid"></div>

这是在我的控制器中：

        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: 'Content/data/Listings.json'
                }
             },
            height: 550,
           columns: [{
                field: "Id",
                title: "Id",
                width: 240  
            },{
                field: "State",
                title: "State",
                width: 240  
            }]
        });

它的调用是这样的（我无法控制）：

http://localhost/Wizmo-web/Content/data/Listings.json?$callback=jQuery112103831734413679999_1470962161424&"%"24inlinecount=allpages&"%"24format=json

它正在从我的 Listings.json 返回数据（我已确保它是有效的）：

[
   {
      "Id":557,
      "State":"active",
      "Title":"Matching Father Son Shirts I Am Your Father Shirt ",
   },
   {
      "Id":558,
      "State":"active",
      "Title":"Baseball Hoodies Im All About That Base Hooded Swe",
   }
]

但是我的网格是空的。没有错误，什么都没有。

难倒。

【问题讨论】：

标签： angularjs kendo-ui

【解决方案1】：

我看起来在你的控制器中，你正在尝试使用 Kendo 的 jQuery 实现，而不是支持的 Angular 指令。

Kendo UI 网格使用产品官方支持的指令与 AngularJS 进行固有集成。要使用此集成，您需要在应用程序中引用 Angular 脚本并通过以下方式注册包含 Kendo UI 指令的模块：

angular.module("myApp", [ "kendo.directives" ])

因此，在您的控制器中，您实际上将在控制器范围内使用配置对象，而不是使用 jQuery $("#grid").kendoGrid(...) 来查找元素并添加配置对象：

$scope.mainGridOptions = {
    //all your config options here
};

那么在您看来，您实际上将在这里使用 Kendo 指令，而不是仅使用 <div id="grid"></div>，并从您的控制器传递配置对象：

<kendo-grid options="mainGridOptions">
...

Kendo 有一些关于 Angular 实现的非常好的文档here

【讨论】：

太棒了。谢谢你。现在我的牙齿不会在我的角度嵌入jQuery了。
根据您的说明和角度文档进行设置。当我插入 angular.module("WizmoApp", [ "kendo.directives" ]) 我的应用程序无声地死掉。没有错误，什么都没有。
是的。除了 kendo.directives 之外，我已经撕掉了其他所有东西，它就死了。我的控制器实际上是 7 行 - 包括 (function(){, use strict 和 })()。
我发现了一个问题。我有一个主要的 app.js，其中包含 angular .module('WizmoApp', ['ngResource','ngSanitize' 等。所以我很确定那是我应该添加 'kendo.directives' 的地方。通过删除它来自我的控制器，页面不再是空白 - 尽管我仍然没有显示剑道网格。
你能用你的代码创建一个 JSFiddle 或 codepen 吗？从那里应该很容易修复。

【解决方案2】：

实际问题不同——dataSource配置中包含type: "odata"设置，与服务器响应不对应，所以应该去掉。使用此设置，Kendo UI DataSource 实例无法在返回的 JSON 中找到数据项，这就是不呈现表行的原因。

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-type

这是一个没有type 设置的可运行示例：

http://dojo.telerik.com/ESija

【讨论】：

谢谢。 ITICC 是正确的。我在我的 Angular 应用程序中使用了 jQuery 实现。

【解决方案3】：

我将 [ 'kendo.directives' ] 添加到模块的那一刻，一切都死了。没有错误，什么都没有。

控制器：

(function() {
    'use strict';

    angular
        .module('WizmoApp', [ 'kendo.directives' ])
        .controller('listingsController', listingsController);

    listingsController.$inject = ['$http', '$location', '$stateParams', '$filter', 'toastr', 'DTOptionsBuilder', 'DTColumnDefBuilder', 'listingsService', 'datatableService', 'ngAuthSettings'];

    function listingsController($http, $location, $stateParams, $filter, toastr, DTOptionsBuilder, DTColumnDefBuilder, listingsService, datatableService, ngAuthSettings) {

...

index.html:

<script src="Content/vendor/Metronic/global/plugins/jquery.min.js" type="text/javascript"></script>
...
<script src="Content/vendor/Metronic/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="Content/vendor/datatables/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="Content/vendor/angular/angular.min.js" type="text/javascript"></script>
<script src="Content/vendor/KendoUI/js/kendo.all.min.js"></script>

【讨论】：