Issue with dynamically adding tabs

Thread is closed for posting
7 posts, 0 answers
  1. Purush
    Purush avatar
    5 posts
    Member since:
    Sep 2012

    Posted 07 Dec 2011 Link to this post

    Hi ,

    I have a tabstrip inside a splitter and it has one tab item by default and i dymically adding tab item based on user action. when the new tab gets added iam facing two issues.

    1. Click on dynamically added tab don't bring content from url. it brings after couple of clicks over the text in tab item.
    2. The content from the dynamically added tab gets appended in default tab item which created in html declaration.

    This is the code for tab



    <div id="glaDocumentHost" class="glaReset">








    <li class="k-state-active"><label id="map">Map</label></li>








    <div style="padding:0px;margin:2px;"></div>








    "#glaDocumentHost").kendoTabStrip({ contentUrls: ["/YLA/YLAMAP/MapPanel"] });

    this is the code i'm using to add tab dynamically.




    var tabstrip = $("#glaDocumentHost").kendoTabStrip().data("kendoTabStrip");
    tabstrip.insertAfter({ text: name, contentUrl: url }, tabstrip.tabGroup.children(

    any help is appreciated.



  2. Andrés
    Andrés avatar
    37 posts
    Member since:
    Jun 2011

    Posted 19 Jan 2012 Link to this post

    ContentUrls only works if you don't have the div. Get rid of your "<div style="padding:0px;margin:2px;"></div>" and it will create a div for you with the content from that url. I was having the same problem and I worked it out recently, only leave the <ul> in there :)
    The documentation is not very clear about that.

    Hope that helps.
  3. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 24 Jan 2012 Link to this post

    Hello Purush and Andrés,

    It should be working with or without div content elements, check this jsFiddle:

    However, if I see correctly, Purush is initializing the TabStrip two times - one unintentionally when populating the variable here:
    var tabstrip = $("#glaDocumentHost").kendoTabStrip().data("kendoTabStrip");
    To avoid this, you only need the data attribute of the already initialized TabStrip to get its object, like this:
    var tabstrip = $("#glaDocumentHost").data("kendoTabStrip");

    Kind regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Harut
    Harut avatar
    6 posts
    Member since:
    Jan 2012

    Posted 18 Jul 2012 Link to this post

  5. Duke
    Duke avatar
    17 posts
    Member since:
    Apr 2013

    Posted 27 May 2013 Link to this post

    thank you so much. This was driving me crazy for hours, because my new added tab was never got hidden when I clicked another tab.
  6. Mike Graham
    Mike Graham avatar
    29 posts
    Member since:
    May 2010

    Posted 02 Jul 2013 Link to this post

    I was doing the same thing.  Following your tip fixed all kinds of flakiness I was seeing.
    Thanks !!!!!!!!!!!!!!!!! :)
  7. Kiran
    Kiran avatar
    28 posts
    Member since:
    Jul 2014

    Posted 08 Jun 2015 in reply to Kamen Bundev Link to this post

    It's working!!!
Back to Top