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

Question

在我使用 Kendo UI Grid 的 AngularJS 应用程序中。 我有以下 Kendo UI Grid 选项和数据源。我想要做的是以某种方式在每一行上添加点击事件。我对每一列都有定义，但我无法访问包含这些列的整行。如果不使用 rowTemplate 和 altRowTemplate，这可能吗？因为如果我使用它们，我必须再次重新定义整个表。

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

Answer 1

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

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

Demo