Can't Seem To Navigate To URL On Row Change Event???

[Cedric Gaines]

I know I'm new to these control, and I've researched, but can't seem to find an answer that works.

I have a grid, and thats now working 100%, but I can't seem to navigate to a url on the selected row click / change?  I'm getting a window.location undefined error.  I know it's probably something simple I'm overlooking, but I'm just not seeing it yet?

Here is what I have...

$("#agencyListGrid").kendoGrid({
columns: [{
field: "agencyName",
title: "Agency"
},
{
field: "agencyID",
title: "View",
width: 100,
headerAttributes: {
style: "text-align:center"
},
template: '<div style="text-align:center" onclick="navigateToAgency"><i class="fa fa-search fa-lg" aria-hidden="true"></i></div>'
},
{
field: "agencyID",
title: "Archive",
width: 100,
headerAttributes: {
style: "text-align:center"
},
template: '<div style="text-align:center"><i class="fa fa-archive" aria-hidden="true"></i></div>'
}],
dataSource: {
data: this.agencyList.agencies,
pageSize: 15
},
height: 500,
selectable: "row",
scrollable: false,
pageable: {
pageSizes: true,
buttonCount: 5
},
change: function() {
var tempView = $("#agencyListGrid").data("kendoGrid");
//Getting selected item
var selectedItem = tempView.dataItem(tempView.select());
this.window.location = "agencies/" + selectedItem.agencyID;
}
});
}

ERROR MESSAGE:

ERROR TypeError: Cannot set property 'location' of undefined
    at init.change (agency-list.component.ts:84)
    at init.trigger (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)

[Georgi]

Hi Cedric,

The described behavior is expected since the this context within the event handler of the change event is the grid itself. 

So in order to navigate within the change event handler, access the window instance without the this keyword.

e.g.

window.location.href = "agencies/" + selectedItem.agencyID;

Regards,
Georgi
Progress Telerik