Initially selected tab not showing content

6 posts, 0 answers
  1. Pierre
    Pierre avatar
    260 posts
    Member since:
    Apr 2007

    Posted 28 May 2013 Link to this post

    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
  2.
  3. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 30 May 2013 Link to this post

    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!
  5. Pierre
    Pierre avatar
    260 posts
    Member since:
    Apr 2007

    Posted 30 May 2013 Link to this post

    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...
  7. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 03 Jun 2013 Link to this post

    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!
  9. Pierre
    Pierre avatar
    260 posts
    Member since:
    Apr 2007

    Posted 06 Jun 2013 Link to this post

    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
  11. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 10 Jun 2013 Link to this post

    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!
Back to Top