Kendo UI Grid trying to select row with the following configuration

Question

In my AngularJS application im using Kendo UI Grid. I have the following Kendo UI Grid options and dataSource. What im trying to do is to somehow add click event on each row. I have definitions for each column but I cant access the whole row which contains the columns. Is this possible without the use of rowTemplate and altRowTemplate. Because if i use them i have to redefine the whole table again.

HTML:

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

Grid Options:

  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 is the data i pass into the kendo grid

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

You can use change event, which is triggered when use changes a row or a cell in the grid when the selectable option is set to true:

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

Demo