EXAMPLE: Dynamically select tab with index

6 posts, 0 answers
  1. jldoubleu
    jldoubleu 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 jldoubleu 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. Kendo UI is VS 2017 Ready
  4. Aaron
    Aaron avatar
    20 posts
    Member since:
    Jan 2015

    Posted 02 Jul 2015 in reply to jldoubleu 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. 

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 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!
     
  6. 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".



  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 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!
     
Back to Top
Kendo UI is VS 2017 Ready