Kendo UI Grid尝试使用以下配置选择行

在使用Kendo UI Grid的我的AngularJS应用程序中。我有以下的Kendo UI网格选项和数据源。我试图做的是以某种方式添加每行上的点击事件。我有每个列的定义，但我不能访问包含列的整个行。这可能没有使用rowTemplate和altRowTemplate。因为如果我使用它们，我必须重新定义整个表格。Kendo UI Grid尝试使用以下配置选择行

HTML：

<div 
      k-options="ctrl.mainGridOptions" 
      k-rebind="ctrl.mainGridOptions" 
      kendo-grid="ctrl.gridInstance"> 
    </div>

网格选项：

this.mainGridOptions = { 
       dataSource: { 
        data: this.allRows, 
        pageSize: 150, 
        schema: { 
         model: { 
          fields: { 
           activityType: { type: "string" }, 
           communicationType: { type: "string" }, 
           count: { type: "number" }, 
          } 
         } 
        }, 
        aggregate: [ 
         { 
          field: "activityType", 
          aggregate: "count" 
         }, 
         { 
          field: "communicationType", 
          aggregate: "count" 
         }, 
         { 
          field: "count", 
          aggregate: "count" 
         } 
        ], 
        group: { 
         field: this.groupBy.field, 
         aggregates: [ 
          { 
           field: "activityType", 
           aggregate: "count" 
          }, 
          { 
           field: "communicationType", 
           aggregate: "count" 
          }, 
          { 
           field: "count", 
           aggregate: "count" 
          } 
         ] 
        } 
       }, 
       scrollable: { 
        virtual: true 
       }, 
       sortable: true, 
       resizable: false, 
       pageable: false, 
       groupable: true, 
       columnMenu: true, 
       filterable: true, 
       reorderable: false, 
       columns: [ 
        { 
         headerTemplate: '<md-checkbox ng-model="dataItem.checked" ng-change="ctrl.headerSelected(dataItem)" aria-label="row check" ng-transclude=""></md-checkbox>', 
         template: '<md-checkbox stop-event ng-class="{\'row-selected\' : ctrl.checkVisible.length > 0 || ctrl.headerCb}" ng-model="dataItem.checked" ng-change="ctrl.rowSelected(dataItem, dataItem.cbIndex)" aria-label="item check"></md-checkbox>', 
         width:"50px" 
        }, 
        { 
         field: "activityType", 
         title: "activityType", 
         aggregates: ['count'], 
         template: '<span ng-bind="dataItem.activityType"></span>', 
         groupHeaderTemplate: '<span class="aggregate-wrapper" ng-click="ctrl.toggleGroupCollapse($event)"><span>' + "activityType" + ':' + '</span>' + ' #= value # (Count: #= count#)</span>' 
        },{ 
         field: "communicationType", 
         title: "communicationType", 
         aggregates: ['count'], 
         groupHeaderTemplate: '<span class="aggregate-wrapper" ng-click="ctrl.toggleGroupCollapse($event)"><span>' + "communicationType" + '</span>' + ' #= value # (Count: #= count#)</span>' 
        },{ 
         field: "count", 
         title: "count", 
         aggregates: ['count'], 
         template: '<div layout="row" layout-align="center center">' + 
         '<md-progress-linear flex="80" md-mode="determinate" ng-value="ctrl.calcProgressValue(dataItem.count)"></md-progress-linear>' + 
         '<span flex style="text-align:right" ng-bind="dataItem.count"> </span>' + 
         '</div>', 
         groupHeaderTemplate: '<span class="aggregate-wrapper" ng-click="ctrl.toggleGroupCollapse($event)"><span>' + "count" + ':' + '</span>' + ' #= value # (Count: #= count#)</span>' 
        }, 
        { 
         field: "", 
         title: null, 
         template: '<span class="action-controls"><i class="material-icons">label</i><i class="material-icons">star_rate</i><i class="material-icons"> more_vert </i></span>', 
         width: '200px' 
        } 
       ], 
      };

这是我进入剑道网格中的数据

this.allRows = [ 
{ 
     "activityType": 2, 
     "activitySubType": 10, 
     "count": 265 
     }, 
     { 
     "activityType": 2, 
     "activitySubType": 1, 
     "count": 238 
     }, 
     { 
     "activityType": 7, 
     "activitySubType": 3, 
     "count": 102 
     }, 
     { 
     "activityType": 6, 
     "activitySubType": 12, 
     "count": 142 
     }, 
     { 
     "activityType": 6, 
     "activitySubType": 18, 
     "count": 98 
     }, 
     { 
     "activityType": 2, 
     "activitySubType": 19, 
     "count": 145 
     } 
];

来源

2016-11-30 Georgi Antonov

让我说清楚了。所有你想要的是对所有行点击事件和点击你需要的全部行数据..对？ –

确切地做出点击更改范围变量，然后在行上用ng-class更改它的类 –

我不知道Angular的东西..会给你控制点击并获取行数据..会帮助你吗？你必须从那里继续 –

您可以使用change event，这是在使用时触发当t时刻在网格中更改行或单元格他selectable选项设置为true：

change: function() { 
    // Get your row's data 
    var dataItem = this.dataItem(this.select()); 
}

Demo

来源

2016-11-30 10:18:11 DontVoteMeDown

它的工作原理，但为什么我不能选择第二行，当我做第一行得到取消选择 –

我只想调用一个函数，当一行被点击thatas所有。使用可选：“多行，”它需要按Ctrl键来选择第二行。 –

@GeorgiAntonov在单击行时调用*函数*，您只需在事件内部调用它即可。要选择多行而不使用Ctrl键，您必须使用我认为的自定义代码。 – DontVoteMeDown

Kendo UI Grid尝试使用以下配置选择行

回答

相关问题