How to prevent tab selection

2 posts, 0 answers
  1. Ignacio
    Ignacio avatar
    1 posts
    Member since:
    Oct 2012

    Posted 16 Aug 2016 Link to this post

    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

        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

  2. Patrick
    Patrick avatar
    255 posts

    Posted 17 Aug 2016 Link to this post

    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.

    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top