Initially selected tab not showing content

[Pierre]

After creating the tab with:

$elem.kendoTabStrip({
    animation: {
        open: {
            effects: effet
        }
    }
});

I do:

var objKendoTabStrip = $elem.data("kendoTabStrip")
objKendoTabStrip.select("li:contains(" + tab + ")")

I can see that the tab is selected, but ton content are not displayed. I think the tab do not extend. If I click on another tab, I see the selected tab momentary fadeout and then the new tab fadein.
Any suggestion?
Thanks

[Daniel]

Hello,

I tested the described scenario but the tab seems to be selected correctly on my side. Could you check this jsBin and let me know if I am missing something?
On a side note, besides using the select method to select the tab via code, you could also specify the selected tab by setting the "k-state-active" class to the list item.

Regards,
Daniel
Telerik

[Pierre]

Hi, I try my code in your JSBin and all is working good!
But you are on the version 2013.1.514 and mine are on 2013.1.319. Maybe is the point...

[Daniel]

Hello again,

I tested with the Q1 2013 release but the tab still seems to be correctly selected. Could you check the updated jsBin and let me know if you notice any other differences or provide the full code you are using so I can check the setup? 

Regards,
Daniel
Telerik

[Pierre]

I retry my code and found that all is working good in IE10 but not in Firefox or Chrome. I then retry you jsBin post, and all is working good in IE, Chrome and Firefox..

I joint a part of our code.
The point is that we load a html page from another, parse it and transform some element in kendo manuallay. The starting page is constructeur.html and the JS file that construct the tabStrip is located in Js/Const/actOnglets.js

thanks

[Daniel]

Hi,

The kendo.common CSS file is not loaded yet when selecting the tab so the tabstrip cannot detect that it is hidden. You should either load the kendo.common file initially or use the select method after it has been loaded. An alternative solution would be to find the content element and hide it before using the select method so that it is shown after the animation has completed e.g.

var item = objKendoTabStrip.element.find("li:contains(" + acteurParam['defaut'] + ")"),
    itemIdx = item.index();
objKendoTabStrip.contentElements.filter(":eq(" + itemIdx+ ")").hide();
objKendoTabStrip.select(item);

Regards,
Daniel
Telerik