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

Select tab by id given on creation

7 Answers 1184 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jhonny
Top achievements
Rank 1
Jhonny asked on 05 Jan 2012, 11:05 AM
Hello,

I need to somehow select specific tab. I was trying something like:

tabStrip.append(
            [
                {
                    id: "myId1",
                    text:title,
                    contentUrl:url
                }
            ]
        );
...
tabStrip.select("#myId1");


But it did not work. How I can do such thing (e.g. select a specific tab)? Should I count each added tab manually and select by index? How tabStrip.select works?

Thank you.

7 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 09 Jan 2012, 02:06 PM
Hello Jhonny,

The TabStrip select() method selects the DOM element/jQuery selector you pass to it. However, the append method doesn't support passing an id to it, so you would have to set it later or just use jQuery to match an element and select it.

All the best,
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!
0
Cary
Top achievements
Rank 1
answered on 12 Mar 2013, 09:42 PM
I'm running into the same issue when adding tabs via the dataSource. http://jsfiddle.net/v5URa/3/
How do you recommend setting the id later?

Thanks
0
Kamen Bundev
Telerik team
answered on 15 Mar 2013, 08:40 AM
Hi Cary,

You don't need to number your tabs in order to select them - you can pass the tab number to the select method and it will get selected:
tabStrip.select(1);

You can also pass a jQuery selector that would match your TabStrip item (a LI element) by text:
tabStrip.select("li:contains(tab 2)");

There were also other issues with your jsFiddle - you were using the very first version of Kendo UI in it, one that is almost 2 years old now - and to get the TabStrip javascript object, you need to get its data, not the init result. I've updated it to fix these and to use the second method.

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!
0
Zachary
Top achievements
Rank 1
answered on 28 Dec 2015, 04:53 PM
I need a unique identifier as part of a tab "li". I don't like having to select via index (unknown) or title text (not unique). This seems like it should be standard as most controls allow a template or property to accomplish this.
0
Vladimir Iliev
Telerik team
answered on 04 Jan 2016, 05:04 PM
Hi Zachary,

As the "append" method always appends the new tab at the end of the collection you can select the new tab using jQuery and set it's "id" attribute. For convenience I created small example which you can use as baseline:

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Yuriy
Top achievements
Rank 1
answered on 13 Jul 2017, 02:02 PM

Hi Vladimir,

I think Zachary has an excellent point here. We need a way to set unique tab ids in order to select them. Index isn't consistent, for the reason tabs could be build conditionally (ex. user has access to see some). Therefore index will be different for each user. Title text isn't reliable unique either, titles changes all the time. Is there a way to set id attribute on init? After it's been initialed it's hard to assign id's for the same reason you don't know what is what.

Thanks,

-Yuriy

0
Ivan Danchev
Telerik team
answered on 18 Jul 2017, 08:37 AM
Hi Yuriy,

Currently setting the id of the item through an id property as suggested in the original poster's first reply is not supported by the TabStrip. It is not a behavior specific to the TabStrip, setting the id this way is not available for the other widgets with similar navigation functionality (Menu, PanelBar, TreeView). We would suggest logging this as a feature/improvement request in our public Feedback Portal and voting for it.

Regards,
Ivan Danchev
Progress Telerik
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.
Tags
TabStrip
Asked by
Jhonny
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Cary
Top achievements
Rank 1
Zachary
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Yuriy
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or