событие выбора угловой сетки kendoui

Question

Я пытаюсь обработать событие выбора из сетки KendoUI в 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

Быстрый пример того, как это сделать с помощью угловой директивы.

Обратите внимание, что я получаю ссылку на базовую сетку кендо через событие click и дескриптор 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

Директива по двусторонней привязке к выбранной строке. Должен быть помещен в тот же элемент в качестве директивы kendo-grid.

версия Машинопись:

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