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

TabStrip change selected index after event completion

1 Answer 373 Views
This is a migrated thread and some comments may be shown as answers.
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 ) method.  I can specify the tabstrip to be positioned with <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.


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

    <link rel="stylesheet" href=""/>
    <link rel="stylesheet" href=""/>
    <link rel="stylesheet" href=""/>
    <link rel="stylesheet" href=""/>

    <script src=""></script>
    <script src=""></script>
<div id="tabStrip">
        <li>Tab 1</li>
        <li>Tab 2</li>
    <div>Content 1</div>
    <div>Content 2</div>

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

    // attach activate event handler during initialization
    var tabStrip = $("#tabStrip").kendoTabStrip({
        show: onActivate

1 Answer, 1 is accepted

Sort by
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.

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.
Asked by
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question