剣道角度グリッド選択イベント

Question

私はAngularJSの剣道グリッドから選択イベントを処理しようとしています。

私のコードは以下の通りです。しかし、それは選択された行のデータを取得する必要が本当に嫌な方法のように感じる。特に_dataを使用しています。これを行うより良い方法はありますか？私は間違ったアプローチをしていますか？

<div kendo-grid k-data-source="recipes" k-selectable="true" k-sortable="true" k-pageable="{'refresh': true, 'pageSizes': true}" 
      k-columns='[{field: "name", title: "Name", filterable: false, sortable: true}, 
      {field: "style", title: "Style", filterable: true, sortable: true}]' k-on-change="onSelection(kendoEvent)"> 
</div> 

$scope.onSelection = function(e) { 
    console.log(e.sender._data[0].id); 
} 

Answer 1

次の手順を試してください。

 
    $scope.onSelection = function(kendoEvent) { 
     var grid = kendoEvent.sender; 
     var selectedData = grid.dataItem(grid.select()); 
     console.log(selectedData.id); 
    } 

Answer 2

がかなり遅れてパーティーに参加する、グリッドオブジェクトのために達することなく、それを行うための直接的な方法があります：

マークアップに：

k-on-change="onSelection(data)" 

コード：

$scope.onSelection = function(data) { 
    // no need to reach the for the sender 
} 

selected,dataItem,kendoEventまたはcolumnsを送信することがあります。

詳細については、this linkを参照してください。

Answer 3

角度指示でこれを行う方法の簡単な例です。

ここでは、クリックイベントとDOMハンドルを通して、基になる剣道グリッドへの参照を取得しています。

//this is a custom directive to bind a kendo grid's row selection to a model 
    var lgSelectedRow = MainController.directive('lgSelectedRow', function() { 
     return { 
      scope: { 
       //optional isolate scope aka one way binding 
       rowData: "=?" 
      }, 
      link: function (scope, element, attributes) { 
       //binds the click event and the row data of the selected grid to our isolate scope 
       element.bind("click", function(e) { 
        scope.$apply(function() { 
         //get the grid from the click handler in the DOM 
         var grid = $(e.target).closest("div").parent().data("kendoGrid"); 
         var selectedData = grid.dataItem(grid.select()); 
         scope.rowData = selectedData; 
        }); 
       }); 
      } 
     }; 
    }); 

Answer 4

選択された行への双方向バインディングのための指示。剣道の指示文と同じ要素 に置く必要があります。

活字版：

interface KendoGridSelectedRowsScope extends ng.IScope { 
     row: any[]; 
    } 

// Directive is registered as gridSelectedRow 
export function kendoGridSelectedRowsDirective(): ng.IDirective { 
     return { 
      link($scope: KendoGridSelectedRowsScope, element: ng.IAugmentedJQuery) { 

       var unregister = $scope.$parent.$on("kendoWidgetCreated", (event, grid) => { 
        if (unregister) 
         unregister(); 

        // Set selected rows on selection 
        grid.bind("change", function (e) { 

         var selectedRows = this.select(); 
         var selectedDataItems = []; 

         for (var i = 0; i < selectedRows.length; i++) { 
          var dataItem = this.dataItem(selectedRows[i]); 
          selectedDataItems.push(dataItem); 
         } 

         if ($scope.row != selectedDataItems[0]) { 

          $scope.row = selectedDataItems[0]; 
          $scope.$root.$$phase || $scope.$root.$digest(); 
         } 
        }); 


        // Reset selection on page change 
        grid.bind("dataBound",() => { 
         $scope.row = null; 
         $scope.$root.$$phase || $scope.$root.$digest(); 
        }); 

        $scope.$watch(
         () => $scope.row, 
         (newValue, oldValue) => { 
          if (newValue !== undefined && newValue != oldValue) { 
           if (newValue == null) 
            grid.clearSelection(); 
           else { 
            var index = grid.dataSource.indexOf(newValue); 
            if (index >= 0) 
             grid.select(grid.element.find("tr:eq(" + (index + 1) + ")")); 
            else 
             grid.clearSelection(); 
           } 
          } 
         }); 
       }); 
      }, 
      scope: { 
       row: "=gridSelectedRow" 
      } 
     }; 
    } 

Javascriptのバージョン

function kendoGridSelectedRowsDirective() { 
     return { 
      link: function ($scope, element) { 
       var unregister = $scope.$parent.$on("kendoWidgetCreated", function (event, grid) { 
        if (unregister) 
         unregister(); 
        // Set selected rows on selection 
        grid.bind("change", function (e) { 
         var selectedRows = this.select(); 
         var selectedDataItems = []; 
         for (var i = 0; i < selectedRows.length; i++) { 
          var dataItem = this.dataItem(selectedRows[i]); 
          selectedDataItems.push(dataItem); 
         } 
         if ($scope.row != selectedDataItems[0]) { 
          $scope.row = selectedDataItems[0]; 
          $scope.$root.$$phase || $scope.$root.$digest(); 
         } 
        }); 
        // Reset selection on page change 
        grid.bind("dataBound", function() { 
         $scope.row = null; 
         $scope.$root.$$phase || $scope.$root.$digest(); 
        }); 
        $scope.$watch(function() { return $scope.row; }, function (newValue, oldValue) { 
         if (newValue !== undefined && newValue != oldValue) { 
          if (newValue == null) 
           grid.clearSelection(); 
          else { 
           var index = grid.dataSource.indexOf(newValue); 
           if (index >= 0) 
            grid.select(grid.element.find("tr:eq(" + (index + 1) + ")")); 
           else 
            grid.clearSelection(); 
          } 
         } 
        }); 
       }); 
      }, 
      scope: { 
       row: "=gridSelectedRow" 
      } 
     }; 
    }