让剑道网格工作

Question

我已经将其简化为它的骨架-拉出任何可能干扰的属性(如果你喜欢，我可以把它们放回去)-甚至指向local .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

它是从我的清单返回数据的。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",
   }
]

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

难住了。

Answer 1

看起来在你的控制器中，你试图使用jQuery实现的剑道，而不是支持的Angular指令。

Kendo UI网格使用官方支持的指令与AngularJS集成。要使用这种集成，你需要在应用中引用Angular脚本，并以以下方式注册包含Kendo UI指令的模块:

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

所以在你的控制器中，不是使用jQuery $("#grid").kendoGrid(...)来查找元素并添加你的配置对象，而是在你的控制器范围中使用一个配置对象:

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

然后在你的视图中，而不是仅仅使用<div id="grid"></div>你实际上要在这里使用Kendo指令，并从你的控制器传递配置对象:

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

Kendo有一些关于Angular实现的很好的文档

Answer 2

实际的问题是不同的-数据源配置包括一个type: "odata"设置，它不对应于服务器响应，所以它应该被删除。使用此设置，Kendo UI DataSource实例无法在返回的JSON中找到数据项，这就是不呈现表行的原因。

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource配置类型

下面是一个没有type设置的可运行示例:

http://dojo.telerik.com/ESija

Answer 3

当我添加['kendo ']时。指令[]给模块，一切就都死了。没有错误，没有。

控制器:

(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>