EXAMPLE: Dynamically select tab with index

8 posts, 0 answers
  1. J
    J avatar
    7 posts
    Member since:
    Dec 2004

    Posted 02 May 2012 Link to this post

    Greetings, 
    During coding, i needed to dynamically open tabs based on a users actions.  I discovered the use of the li index...works like a charm...

    1. Give each tab an ID

    <div id="tabStrip">
        <ul>
            <li id="tFirst">First tab</li>
            <li id="tSecond">Second tab</li>
        </ul>
        <div>First tab content</div>
        <div>Second tab content</div>
    </div>

    2. Use jQuery to get the tab by id (and later the index)
    var tabIndx = -1;
    var tab = $("#tFirst");
    if(tab != null) { //safety check
       tabIndx = tab.index();}           
    3. Change the tab...
    $("#tabStrip").data("kendoTabStrip").select(tabIndx);

    Enjoy.
  2. Chris
    Chris avatar
    4 posts
    Member since:
    Dec 2014

    Posted 08 May 2015 in reply to J Link to this post

    Very nice. You can also use index() as a simple way to get the selected tab number in the tabstrip's select event handler:

    function onSelect (e) {
      console.log("tab index:" + $(e.item).index());
    }

     

    $("#tabstrip").kendoTabStrip({
        dataTextField: "Name",
        dataSource: [{Name:"Tab A"}, {Name:"Tab B"}],
          select: onSelect
    });

  3. Aaron
    Aaron avatar
    20 posts
    Member since:
    Jan 2015

    Posted 02 Jul 2015 in reply to J Link to this post

    I am getting this runtime error:

    0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'select': object is null or undefined

    This is the JS:
    tab = $("#sysConfig");
            if (tab != null) { //safety check
                tabIndx = tab.index();
                alert('tabIndx = ' + tabIndx);
                $("#AdminTabStrip").data("kendoTabStrip").select(tabIndx);
            }

     

    This is the definition of the Kendo Tabstrip:
    @(Html.Kendo().TabStrip()
            .Name("AdminTabStrip")

    I would like to set focus to a particular Tab based on user input. 

  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1436 posts

    Posted 06 Jul 2015 Link to this post

    Hello Aaron,

    The error suggests that the TabStrip widget is not initialized when its select method is called. I would suggest making sure that the selection logic is executed after the widgets have been initialized.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Aaron
    Aaron avatar
    20 posts
    Member since:
    Jan 2015

    Posted 07 Jul 2015 Link to this post

    The following code works:

        $(document).ready(function () {
            var tabIndx = -1;

            tab = $("#" + $("#selectedTab").val());             // Grab Tab to set as Selected
            if (tab.length > 0) {                               // Safety check
                tabIndx = tab.index();                          // Grab the Tab Index
                var tabStrip = $("#AdminTabStrip").kendoTabStrip().data("kendoTabStrip");   // Grab the Tab Strip
                tabStrip.select(tabIndx);                                                   // Set the Selected Tab
            }
        });

     

    Note that I changed the way I access the TabStrip.  The code however always executed on document.ready.  If necessary please indicate when "the widgets have been initialized".



  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1436 posts

    Posted 10 Jul 2015 Link to this post

    Hello Aaron,

    The Widgets initialization code generated by the wrappers is also executed on document.ready, so the order of the code is important. For example: 
    $(document).ready(function () {
        var tabIndx = -1;
     
        tab = $("#" + $("#selectedTab").val());             // Grab Tab to set as Selected
        if (tab.length > 0) {                               // Safety check
            tabIndx = tab.index();                          // Grab the Tab Index
            var tabStrip = $("#AdminTabStrip").kendoTabStrip().data("kendoTabStrip");   // Grab the Tab Strip
            tabStrip.select(tabIndx);                                                   // Set the Selected Tab
        }
    });
     
    @(Html.Kendo().TabStrip()
        .Name("AdminTabStrip") //initialization happens here, however the code above was already executed and failed to access the TabStrip


    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Federico
    Federico avatar
    20 posts
    Member since:
    Oct 2017

    Posted 14 Nov Link to this post

    Can i do this by name?

    How can i select tab by name of this tab?

  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1304 posts

    Posted 16 Nov Link to this post

    Hello Federico,

    You can find a tab by its name with the help of the :contains() jQuery selector and select it by calling the TabStrip's select method, as shown in this dojo example.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular 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