The example below illustrates a case in which tabs do not select when the dataUrlField is specified as a page local href such as '#content1'.
It seems like this case should work since the select event fires and the correct element is passed in. It would be ideal if there was a more reliable way to obtain access to the data element to which a tab is bound.
It seems like this case should work since the select event fires and the correct element is passed in. It would be ideal if there was a more reliable way to obtain access to the data element to which a tab is bound.
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <link href="kendo.common.min.css" rel="stylesheet" /> <link href="kendo.default.min.css" rel="stylesheet" /> <script src="jquery.min.js"></script> <script src="kendo.all.min.js"></script> <script> $(function () { var data = [{ Name: 'Tab 1', Url: '#content1' }, { Name: 'Tab 2', Url: '#content2' }]; $("#tabstrip").kendoTabStrip({ dataTextField: "Name", dataUrlField: "Url", dataSource: data, select: function (el) { //would be nice to have a reference to the data source data item here rather than relying on the item index. var itemIndex = $(el.item).index(); $('.tabContent').hide(); $('#content' + itemIndex).show(); } }); getSelectedTabIndex = function () { return $("#tabstrip").data("kendoTabStrip").select().index(); } $('#showSelectedTabIndex').click(function () { //always returns -1 alert(getSelectedTabIndex()); }); }); </script></head><body> 1.) Click a tab <br /> 2.) Click the Show Selected Tab Index button.<br /> <br /> The tab is not visually selected and the value returned for the selected index is -1. <br /><br /> <button id="showSelectedTabIndex">Show Selected Tab Index</button> <div id="tabstrip"></div> <div id="content0" class="tabContent" style="display:none;">Content 1</div> <div id="content1" class="tabContent" style="display:none;">Content 2</div> </body></html>3 Answers, 1 is accepted
0
Accepted
Hello,
Regards,
Daniel
Telerik
The selection is not updated when the url option is used for the item since it is expected that the page will be navigated. If the selection should also be updated in your scenario then I can suggest to use the activateTab method in the select event:
select: function (e) { this.activateTab(e.item);}Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Zach
Top achievements
Rank 1
Rank 1
answered on 03 Oct 2013, 10:30 PM
Thanks Daniel.
Hopefully the activateTab method can be listed in the documentation at some point. Also, this still seems like a bug. The browser is not going to navigate if the href start with #, so the expected behavior would be for the tab to activate without the need for a call to activateTab.
Hopefully the activateTab method can be listed in the documentation at some point. Also, this still seems like a bug. The browser is not going to navigate if the href start with #, so the expected behavior would be for the tab to activate without the need for a call to activateTab.
0
Hello again,
Daniel
Telerik
Thank you for noticing that the activateTab method is missing from the documentation. I have included it and it should now be available.
Regarding the scenario with the local URLs - currently we do not plan to add support for this scenario and at least so far, you are the first one to request it. If you believe that this should be handled internally by the widget then I can suggest to open a new item in our user voice forum so we can track its interest.
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!