sự kiện chọn lưới góc kendoui

Question

Tôi đang cố gắng xử lý sự kiện lựa chọn từ Lưới KendoUI trong AngularJS.

Tôi đã nhận được mã của mình hoạt động như sau. Tuy nhiên nó cảm thấy giống như một cách thực sự khó chịu của việc có được dữ liệu cho hàng đã chọn. Đặc biệt là sử dụng _data. Có cách nào tốt hơn để làm điều này? Tôi đã có cách tiếp cận sai?

<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

hãy thử những điều sau đây:

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

Answer 2

Tham gia bữa tiệc khá muộn, có một cách trực tiếp để làm điều đó mà không đạt cho đối tượng lưới:

trên đánh dấu:

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

trong mã:

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

lưu ý rằng bạn vẫn có thể gửi selected, dataItem, kendoEvent hoặc columns nếu cần.

tham khảo this link để biết thêm chi tiết.

Answer 3

Ví dụ nhanh về cách thực hiện điều này với chỉ thị góc.

Lưu ý ở đây tôi nhận được tham chiếu đến lưới kendo cơ bản thông qua sự kiện nhấp chuột và xử lý 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

Chỉ thị cho liên kết hai chiều với hàng đã chọn. Nên đặt cùng một thành phần làm chỉ thị lưới kendo.

phiên bản nguyên cảo:

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 phiên bản

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