How to prevent tab selection

[Ignacio]

Hi All,

I'm trying to implement a way to force the user to stay in the current tab if there are still unsumitted changes.

Googling around I've found that I should do something like this:

Add a handler to the "select" event

tabstripControl.kendoTabStrip({
    select: onSelect
});

Define my handler

function onSelect(e) {
    if (pendingChanges) {
        if (!confirm('Discard Pending changes?')) {
            e.preventDefault(); // Expected: stay in tab -> Result: tab changes anyway
        }
    }
}

But for some reason it's not working as expected.

Any ideas?

 

Thank you

[Patrick | Technical Support Engineer, Senior]

Hi Ignacio,

In the following examples, the Kendo TabStrip is using the Select event. 

var tabStrip = $("#tabstrip").kendoTabStrip({
  select: onSelect
});

The first Kendo UI Dojo by Progress is an example of a Kendo TabStrip where the user must have the checkbox selected in order to go to the next tab.  

The second Dojo uses your approach with a confirm prompt.  In this case, if the user selects cancel, it will stay on the tab. 

I hope this helps steer you in the right direction.

Regards,
Patrick
Telerik by Progress