剣道のグリッド化

Question

私はこれをベアボーンに単純化しました。干渉している可能性のあるプロパティを取り除きました。（あなたが好きな方に戻すことができます） - ローカルの.jsonを指していても、私のグリッド。

ノースウィンドの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", 
    } 
] 

しかし、私のグリッドは空です。 エラーなし、何もありません。

Stumped。

Answer 1

あなたのコントローラーのように、サポートされているAngularディレクティブの代わりに、剣道のjQuery実装を使用しようとしています。

剣道UIグリッドは、製品の一部として正式にサポートされている指示文を使用して、AngularJSと組み込み統合されています。代わりにjQueryの$("#grid").kendoGrid(...)使用するのでは、あなたのコントローラでそう

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

：この統合を使用するには、アプリの角度スクリプトを参照すると、次のように剣道UIディレクティブを組み込んだモジュールを登録する必要があります代わりに、あなたが実際に剣道を使用するつもりだけ<div id="grid"></div>使用するのでは、あなたのビューで次に

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

：要素を見つけて、あなたのconfigオブジェクトを追加するために、あなたが実際にあなたのコントローラのスコープにconfigオブジェクトを使用しようとしていますここで指示し、パスするそれあなたのコントローラからconfigオブジェクト：

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

剣道は、実際の問題が異なっているhere

Answer 2

角の実装上のいくつかのかなり良いドキュメントを持っている - データソース設定は、サーバーに対応していないtype: "odata"設定を含みレスポンスなので、削除する必要があります。この設定では、Kendo UIのDataSourceインスタンスは返されたJSONのデータ項目を見つけることができません。そのため、テーブルの行はレンダリングされません。ここで

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

type設定せずに実行可能な例である：私はモジュールに[ 'kendo.directives']を追加した瞬間

http://dojo.telerik.com/ESija

Answer 3

、すべてが死にます。エラーはありません。

コントローラー：

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