Question

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

我确实看到了我放入的样本中的数据，当它指向Northwind api时，所以我知道我已经克服了我的问题。

        <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",
   }
]

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

难住了。

Answer 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
};

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

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

Kendo在Angular实现here

上有一些非常好的文档

Answer 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

Answer 3

我添加[＆＃39; kendo.directives＆＃39;对于模块，一切都会死亡。没有错误，没有。

控制器：

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

让Kendo Grid工作

3 个答案: