Select tab by id given on creation

8 posts, 0 answers
  1. Jhonny
    Jhonny avatar
    2 posts
    Member since:
    Jan 2012

    Posted 05 Jan 2012 Link to this post

    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.
  2.
  3. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 09 Jan 2012 Link to this post

    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!
  5. Cary
    Cary avatar
    1 posts
    Member since:
    Feb 2013

    Posted 12 Mar 2013 Link to this post

    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
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 Mar 2013 Link to this post

    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!
  9. Zachary
    Zachary avatar
    3 posts
    Member since:
    Apr 2014

    Posted 28 Dec 2015 Link to this post

    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.
  11. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 04 Jan 2016 Link to this post

    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!
     
  13. Yuriy
    Yuriy avatar
    10 posts
    Member since:
    Jul 2015

    Posted 13 Jul 2017 Link to this post

    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

  14.
  15. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2187 posts

    Posted 18 Jul 2017 Link to this post

    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.
Back to Top