CODEWITHSUNDEEP
javascriptangularangular2-routing
dstr
dstr

Reputation: 8928

Access Router in Javascript code

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
    }
}

Upvotes: 2

Views: 283

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657118

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()

Upvotes: 1

Related Questions