kendoui Winkelraster Auswahlereignis

Question

Ich versuche, ein Auswahlereignis von einem KendoUI Grid in AngularJS zu behandeln.

Ich habe meinen Code funktioniert wie folgt. Es fühlt sich jedoch an, als wäre es eine ziemlich unangenehme Art, die Daten für die ausgewählte Zeile zu bekommen. Vor allem mit _data. Gibt es einen besseren Weg, dies zu tun? Habe ich den falschen Ansatz?

<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

bitte versuchen Sie folgendes:

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

Answer 2

die Partei Beitritt ziemlich spät, gibt es eine direkte Art und Weise ist, es zu tun, ohne für das Rasterobjekt erreicht:

auf dem Markup:

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

im Code:

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

Beachten Sie, dass Sie bei Bedarf weiterhin selected, dataItem, oder columns senden können.

konsultieren Sie this link für weitere Details.

Answer 3

Ein schnelles Beispiel, wie man das mit einer Winkelanweisung macht.

Beachten Sie, dass ich den Verweis auf das zugrunde liegende Kendo-Grid über das Click-Ereignis und den DOM-Handle abrufen kann.

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

Richtlinie für Zwei-Wege-Bindung an ausgewählte Zeile. Sollte auf das gleiche Element als Kendo-Grid-Direktive gesetzt werden.

Typoskript Version:

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 Version

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