How to prevent tab selection

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

    Posted 16 Aug 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

    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

  2. Patrick
    Admin
    Patrick avatar
    173 posts

    Posted 17 Aug 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.

    Regards,
    Patrick
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top