Access Router in Javascript code

Question

I have a TypeScript component with a JS function in it. The function is called by Kendo UI so the function is executed in Javascript context, which means I can't use "this" (this returns the caller Kendo component). I want to redirect the page in this function but I rather use router.navigate* functions instead of location.href replace. Is it possible to access router instance in Javascript context?

export class MyComponent implements AfterViewInit {
    //template: `<div #grid></div>`
    @ViewChild('grid') private grid: ElementRef;

    ngAfterViewInit() {
        this.configureGrid();
    }

    private configureGrid() {
        let kendoGrid: kendo.ui.Grid = jQuery(this.grid.nativeElement).data("kendoGrid");
        let kendoColumn: kendo.ui.GridColumn = {};
        kendoColumn.command = { text: "My Button", click: this.myButtonCommand, className: "btn" };
        kendoGrid.columns.add(kendoColumn);
    }

    myButtonCommand(e) {
        //redirect here
    }
}

Have you tried { text: "My Button", click: this.myButtonCommand.bind(this), className: "btn" };? — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 29, 2016 at 11:18

Günter Zöchbauer · Accepted Answer · 2016-04-29 11:20:06Z

1

I think this should work

private configureGrid() {
    let kendoGrid: kendo.ui.Grid = jQuery(this.grid.nativeElement).data("kendoGrid");
    let kendoColumn: kendo.ui.GridColumn = {};
    kendoColumn.command = { text: "My Button", click: (e) => this.myButtonCommand(e), className: "btn" };
    kendoGrid.columns.add(kendoColumn);
}

and you should be able to just call this.router.navigate...() in myButtonCommand()

answered Apr 29, 2016 at 11:20

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dstr Over a year ago

Thank you. I also want to add that your "click: this.myButtonCommand.bind(this)" method works too.

Collectives™ on Stack Overflow

Access Router in Javascript code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related