EXAMPLE: Dynamically select tab with index

[J]

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.

[Chris]

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
});

[Aaron]

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. 

[Federico]

Can i do this by name?

How can i select tab by name of this tab?

[Ivan Danchev]

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

[Alexander Popov]

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

 

 

[Aaron]

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".

[Alexander Popov]

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