Kendo Grid get selected row and assign to local variable - angularjs

Question

I am using a Kendo Grid with AngularJs and TypeScript. I am able to get the selected row but I cannot assign the result to a local variable as it seems to run in a different scope.
My grid has the following properties:
this.gridOptions = {
dataSource: {
data: this.items,
pageSize: 10
},
selectable: 'row',
filterable: {
mode: 'row'
},
change: this.onItemSelect,
...
}
The typescript function is as follows:
onItemSelect(kendoEvent : any) {
var grid = kendoEvent.sender;
this.selectedItem = grid.dataItem(grid.select());
}
selectedItem is defined in my Controller class:
export class ServicePackageModalController {
private selectedItem : any;
...
}
The problem is the this.selectedItem is undefined when I check it in another button event later on. I assume this is because the scope is different when the function gets called in the Kendo Grid, so 'this' means something else and not my controller class:
handleNext() {
console.debug(this.selectedItem) //this is undefined here?
}
So my question is how do I assign this result to my controller class so I can access it later on?

Answer 1

Only way I could see to solve this was adding the following code to my handleNext function:
var entityGrid = $("#EntitesGrid").data("kendoGrid");
var selectedItem = entityGrid.dataItem(entityGrid.select());
You also need to have an id attribute with the name EntitiesGrid on the kendo-grid directive.