Kendo UI Grid trying to select row with the following configuration - angularjs

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