TabStrip change selected index after event completion

2 posts, 0 answers
  1. Ryan
    Ryan avatar
    17 posts
    Member since:
    Oct 2016

    Posted 28 Feb Link to this post

    Hello, I have a Tabstrip with the event 'Activate'.  When a user clicks a tab on the tabstrip, the activate event fires.  During this time I am determing whether the tabstrip will continue on its merry way to allow a user to access to the tab they clicked, or deny them and specify the tab they need to go to.

    My issue is with the tabstrip.select( ) method.  I can specify the tabstrip to be positioned with tabstrip.select( <int> ), but this only works the first time using the 'Activate' listener.  It does not work at all with show or select.

    I have modified a Kendo Dojo to give an example.  What should be happening is upon Tab 1 being selected, the Tabstrip should force the user back to Tab 2.  The tabstrip doesn't seem to be doing this at all.

     

    http://dojo.telerik.com/iJolu

     

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Kendo UI Snippet</title>

        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>

        <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
    </head>
    <body>
      
    <div id="tabStrip">
        <ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
        </ul>
        <div>Content 1</div>
        <div>Content 2</div>
    </div>

    <script>
        // event handler for activate
        var onActivate = function(e) {
            // access the activated item via e.item (Element)
          var ts = $("#tabStrip").kendoTabStrip().data('kendoTabStrip');
          debugger;
          switch ($(e.item).find(".k-link").text().trim()) {
             case "Tab 1":
              ts.select(1);
              debugger;
              break;
          }
            // detach activate event handler via unbind()
            tabStrip.unbind("activate", onActivate);
        };

        // attach activate event handler during initialization
        var tabStrip = $("#tabStrip").kendoTabStrip({
            show: onActivate
        }).data("kendoTabStrip");
    </script>
    </body>
    </html>

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1268 posts

    Posted 02 Mar Link to this post

    Hello Ryan,

    Thank you for providing a sample dojo.

    Since you are selecting a tab in the TabStrip's show event the selection needs to be made after a small  delay, so here's a modified dojo, in which the setTimeout method is used to delay the second tab's selection.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top