TabStrip change selected index after event completion

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

    Posted 28 Feb 2017 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 ) 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

  2. Ivan Danchev
    Ivan Danchev avatar
    1396 posts

    Posted 02 Mar 2017 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.

    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