Kendo UI TabStrip e.preventDefault() doesn't work

Question

Two problems:

1.) e.preventDefault() doesn't work correctly with Kendo UI TabStrip when somewhere

$("#tabstrip").kendoTabStrip().data('kendoTabStrip');

appears.

2.) Imagine the User clicks on another tab, but has unsaved changes. A dialog pops up and ask if he wants to discard the changes and go to the tab or if he wants to stay on the active tab to save his changes.

My solution doesn't work. Because of the 1. Problem I guess and because .data() somehow reinitialises the TabStrip?! What is wrong?

Here is a (not) working example http://jsfiddle.net/Nakkvarr/w9586/

Any ideas on this issue?

Answer 1

The reason it doesn't work for the first tab is because you initialized the tab strip twice on the same element $('#tabstrip'). Since you bound the select event on the first initialization, the subsequent initialization overwrote it (the select event isn't handled anymore). You even answered the problem yourself by stating that it works if you comment the second initialization line out.

I'm not entirely sure what you're trying to accomplish with the setTimeout() function in the second example. It's unnecessary.

Using e.preventDefault() works as expected. JSFiddle: http://jsfiddle.net/w9586/6/