How to acces index of the selected tab

[Marcus]

<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

[Kamen Bundev]

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

[Luis Escobedo]

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();

[Patrick]

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?

[Kiril Nikolov]

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

 

 

[ptw]

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

[ptw]

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.

[Kiril Nikolov]

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