This is a migrated thread and some comments may be shown as answers.

TabStrip change selected index after event completion

1 Answer 373 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 28 Feb 2017, 05:14 PM

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>

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 02 Mar 2017, 01:22 PM
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.
Tags
TabStrip
Asked by
Ryan
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or