evento selezione griglia angolare kendoui

Question

Sto tentando di gestire un evento di selezione da una griglia KendoUI in AngularJS.

Ho il mio codice funzionante come di seguito. Tuttavia sembra un modo davvero brutto di dover ottenere i dati per la riga selezionata. Soprattutto con _data. C'è un modo migliore per farlo? Ho avuto l'approccio sbagliato?

<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

prova le seguenti:

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

Answer 2

adesione al partito piuttosto tardi, non v'è un modo diretto per farlo senza raggiungere per l'oggetto della griglia:

sul markup:

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

nel codice:

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

nota che si può ancora inviare selected, dataItem, kendoEvent o columns se necessario.

consultare this link per ulteriori dettagli.

Answer 3

Un rapido esempio di come eseguire questa operazione con una direttiva angolare.

Nota che sto ottenendo il riferimento alla griglia di kendo sottostante attraverso l'evento click e il DOM handle.

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

Direttiva per il collegamento bidirezionale alla riga selezionata. Dovrebbe essere messo sullo stesso elemento come direttiva kendo-grid.

versione tipografico:

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

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