This is a migrated thread and some comments may be shown as answers.

Initially selected tab not showing content

5 Answers 166 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 2
Iron
Pierre asked on 28 May 2013, 05:36 PM
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

5 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 30 May 2013, 12:00 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pierre
Top achievements
Rank 2
Iron
answered on 30 May 2013, 06:38 PM
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...
0
Daniel
Telerik team
answered on 03 Jun 2013, 03:36 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pierre
Top achievements
Rank 2
Iron
answered on 06 Jun 2013, 11:52 AM
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
0
Daniel
Telerik team
answered on 10 Jun 2013, 11:26 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TabStrip
Asked by
Pierre
Top achievements
Rank 2
Iron
Answers by
Daniel
Telerik team
Pierre
Top achievements
Rank 2
Iron
Share this question
or