How to acces index of the selected tab

8 posts, 0 answers
  1. Marcus
    Marcus avatar
    18 posts
    Member since:
    Nov 2011

    Posted 03 Nov 2011 Link to this post

    <div id="tabstrip">
         <ul>
             <li>Table</li>
             <li>Chart</li>
         </ul>
         <div style="min-height:350px;"> </div>
         <div style="min-height:350px;"> </div>
    </div>

    How can I access the selected index or name? (tabstrip-1', tabstrip-2')

    I use the select event:
    $("#tabstrip").kendoTabStrip({
                            select: function(element){alert(element);}
                        });

    And it works, alert pops up. But I cant use element.type or element.name or whatever on this element? So I dont
    know which type is this element ...

    I need the name (Chart,Table) or the index?

    How to catch this?

    Thank you
    Marcus
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 04 Nov 2011 Link to this post

    Hello Marcus,

    The select event doesn't pass an element but an event structure instead. You can use its item property to get the item element or contentElement property to get the tab's content container. You can also access the tabstrip itself via this and get the index of the item with $(element.item).index() or its text with $(element.item).text() (if we use your event argument naming).

    Regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Luis Escobedo
    Luis Escobedo avatar
    5 posts
    Member since:
    Aug 2009

    Posted 01 Dec 2011 Link to this post

    Will you guys be adding some way of accessing the selected tab using the API? Something along the lines of:

    var tab = $("#tabStrip").kendoTabStrip().getSelectedTab();

    I'm thinking of making some sort of Wizard interface using the tabs, with separate buttons that control navigation, so I would like to be able to know which tab is currently selected for "back/next" buttons.

    Thanks! Great job so far.

    UPDATE:
    Ah nevermind :) I found it hidden in the examples.

    var  selectedIndex = tabstrip.select().index();
  5. Patrick
    Patrick avatar
    4 posts
    Member since:
    Dec 2014

    Posted 26 Jan 2015 Link to this post

    When I use the code posted above:

    var  selectedIndex = tabstrip.select().index();

    I always get the tab number from where the click started ie if the tab was on 0 when selected I get 0.  How do you find out what tab was selected?
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 29 Jan 2015 Link to this post

    Hello Patrick,

    Tried to reproduce it but to no avail. Can you please check this sample and let me know what I missed?

    http://dojo.telerik.com/@Kiril/UxEwi

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. ptw
    ptw avatar
    27 posts
    Member since:
    Sep 2015

    Posted 22 Jun in reply to Kiril Nikolov Link to this post

    I get the same behaviour noted by Patrick - the previously selected tab index is returned, not the just-selected one.

    Kiril, I've adapted your dojo example to demonstrate the behaviour here: http://dojo.telerik.com/UkUHi

    The main difference is that I've added an onSelect event and tried to get the tabstrip.select().index() from there. Note also that I changed the Kendo js/css to a more recent version from the CDN.

    Any clues or solution anyone?

    Regards

    -Paul

  8. ptw
    ptw avatar
    27 posts
    Member since:
    Sep 2015

    Posted 22 Jun in reply to ptw Link to this post

    Okay - I have a solution. But this seems like a bug to me.

    The tab actually selected can be accessed via $(e.item).index() - see: http://dojo.telerik.com/UkUHi/3

    Perhaps I'm missing something, but I'd expect that tabStrip.select().index() should return the same result wherever I call it in the code. I can't see a reason that that calling it from one function or somewhere else should matter.

  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 23 Jun Link to this post

    Hello,

    This is expected, as the widget will not return the newly selected method in the select event, as the select event is fired before the actual selection was made.

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