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

2 posts, 0 answers
  1. Cedric Gaines
    Cedric Gaines avatar
    12 posts
    Member since:
    Dec 2004

    Posted 19 Oct 2017 Link to this post

    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)

  2. Georgi
    Admin
    Georgi avatar
    574 posts

    Posted 23 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top