Showing modal dialog when navigating away from a tab in TabStrip

Question

Is there a way to display a modal dialog when user selects a tab in TabStrip component? The code below displays window.confirm, can not get modal dialog to display.

onTabSelected(e : any){
    if (!window.confirm("Continue with navigation?")) {
        e.prevented = true;
    }  
}

Answer 1

The dialog is not a direct substitute for window.confirm, because it cannot block the UI thread. To substitute the window.confirm with the Kendo UI dialog, you can prevent all tab selection, and wait for the dialog result:

onTabSelected(e: any) {
    e.prevented = true;
    this.dialogService.open({
      content: "Continue with navigation?",
      actions: [
        { text: "No" },
        { text: "Yes", primary: true }
      ]
    }).result.subscribe((result) => {
        if (result.primary) {
            // change tab through code
            this.tabStrip.selectTab(e.index);
        }
    });
}

See this plunkr for a working demo.