angularjsで剣道グリッドバインディングが機能しない

APIからの応答を受け取った後に私が設定しているリストをバインドしようとしています。私はリストにオブジェクトを見ることができますが、私はまだ剣道グリッドがデータソースをバインドしていない理由を理解できませんでした。私は以下のようなコードを持っています。angularjsで剣道グリッドバインディングが機能しない

vm.getAccounts = function() { 
     acctSearchService.searchAccounts(null, vm.AccountSearchModel) 
      .then(getAccountsSuccess, getAccountsFailure); 
    } 

    vm.accountGridData = []; 
    function getAccountsSuccess(response) { 
     vm.accountGridData.push(response.model); 
     return vm.accountGridData; 
    }

私は、API呼び出しからの応答を受信した後vm.accountGridDataに結果を取得していますし、私は以下のように剣道グリッドのデータソースにそれをバインドしようとしています。

$("#grid").kendoGrid({ 
     dataSource: { data: vm.accountGridData }, 
     height: 550, 
     filterable: true, 
     sortable: true, 
     pageable: true, 
     columns: vm.mainGridColumns 
    });

は私がデータを取得するために他に何もする必要がありますか？あなたはあなたがいない場合、あなたのデータソース内のデータプロパティを必要といけない

出典

2016-12-09 tt0206

？私はコントローラの権利よりもむしろディレクティブで行われていると仮定していますか？ – Yaser

これはコントローラ内にあります。 – tt0206

ああ、命令に移動すると、ページが既にレンダリングされているので、コントローラにあるものは影響を受けません。 – Yaser

は最終的に私が戦った後、道を見つけた

はこれを試してみてください。それは簡単な一歩です。 .kendoGridをやろうとしている

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <base href="http://demos.telerik.com/kendo-ui/grid/angular"> 
 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
 
    <title></title> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.bootstrap.mobile.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.mobile.min.css" /> 
 

 
    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script> 
 
    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script> 
 
    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="example" ng-app="KendoDemos"> 
 
     <div ng-controller="MyCtrl"> 
 
     <kendo-grid k-scope-field="grid" options="mainGridOptions"></kendo-grid> 
 
     </div> 
 
    </div> 
 

 
    <script> 
 
     angular.module("KendoDemos", [ "kendo.directives" ]) 
 
     .controller("MyCtrl", function($scope, $http){ 
 

 
     $scope.data = new kendo.data.ObservableArray([]); 
 

 
     $http({ 
 
      method: 'GET', 
 
      type:"json", 
 
      url: '//jsonplaceholder.typicode.com/posts' 
 
     }).then(function successCallback(response) { 
 
      $scope.grid.dataSource.data(response.data); 
 
     }, function errorCallback(response) { 
 
      // called asynchronously if an error occurs 
 
      // or server returns response with an error status. 
 
     }); 
 

 
     $scope.mainGridOptions = { 
 
      dataSource: { 
 
      data: $scope.data, 
 
      pageSize: 5 
 
      }, 
 
      sortable: true, 
 
      pageable: true, 
 
      filterable: { 
 
        mode: "row" 
 
       }, 
 
      resizable: true, 
 
      columns: [{ 
 
      field: "userId", 
 
      title: "userId", 
 
      width: "120px" 
 
      },{ 
 
      field: "id", 
 
      title: "ID", 
 
      width: "120px" 
 
      },{ 
 
      field: "title", 
 
      width: "120px" 
 
      },{ 
 
      field: "body", 
 
      width: "120px" 
 
      }] 
 
     }; 
 

 
     }) 
 
    </script> 
 

 

 
    </body> 
 
</html>

出典

2016-12-16 03:20:40 tt0206

そのためのカスタム読取り関数を実装します。データソースプロパティは配列または剣道データソースオブジェクトである必要があります。

$("#grid").kendoGrid({ 
     dataSource: vm.accountGridData, 
     height: 550, 
     filterable: true, 
     sortable: true, 
     pageable: true, 
     columns: vm.mainGridColumns 
    });

とチェックアウトグリッドのドキュメント：http://docs.telerik.com/kendo-ui/api/javascript/ui/grid

出典

2016-12-09 03:35:12 Yaser

：

app.directive('myDirective', function() { 
    return { 
    restrict: 'EA',  
    scope: {}, 
    template: [].join(''), 
    controllerAs: 'vm', 
    controller: function() { 
     var vm = this; 
     vm.getAccounts = function() { 
      acctSearchService.searchAccounts(null, vm.AccountSearchModel).then(getAccountsSuccess, getAccountsFailure); 
     } 

     vm.accountGridData = []; 
     function getAccountsSuccess(response) { 
      vm.accountGridData.push(response.model); 
      return vm.accountGridData; 
     } 
    }, 
    link: function() { 
     $("#grid").kendoGrid({ 
      dataSource: { data: vm.accountGridData }, 
      height: 550, 
      filterable: true, 
      sortable: true, 
      pageable: true, 
      columns: vm.mainGridColumns 
     }); 
    } 
    }; 
});

し、HTML内：あなたはこのようなディレクティブを作成する必要が

出典

2016-12-09 08:18:21

私はあなたが提案した方法でデータソースにarraylistを割り当てようとしましたが、あなたのコントローラーに何があってもページが既にレンダリングされているので**影響を受けません。。 – tt0206

私はあなたの配列の周りにグリッドラッパーを知っていて、初期化の後にそれを参照していません。データソースを更新したい場合は、グリッドhtmlに 'kendo-grid =" grid "ディレクティブを追加し、データを受け取った後に' $ scope.grid.datasource.read（myDataArray） 'にロードするか、jqueryディレクティブを使用したくない場合は、指摘に@Layonezに感謝します。 –

私は** $（ "＃grid"）を追加しました。kendoGrid（{}）**関数の内部で、データソースとその作業を取得しています。 – tt0206

angularjsで剣道グリッドバインディングが機能しない

答えて

関連する問題