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

Issue with dynamically adding tabs

6 Answers 427 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Purush
Top achievements
Rank 1
Purush asked on 07 Dec 2011, 06:24 PM
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">

 

 

 

<ul>

 

 

 

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

 

 

 

</ul>

 

 

 

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

 

 

 

</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(
"li:last"));

any help is appreciated.

Thanks
Purush

 

6 Answers, 1 is accepted

Sort by
0
Andrés
Top achievements
Rank 1
answered on 19 Jan 2012, 06:02 AM
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.
Cheers
0
Kamen Bundev
Telerik team
answered on 24 Jan 2012, 02:48 PM
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!
0
Harut
Top achievements
Rank 1
answered on 18 Jul 2012, 11:21 AM
deleted
0
Duke
Top achievements
Rank 1
answered on 27 May 2013, 01:07 PM
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.
0
Mike Graham
Top achievements
Rank 1
answered on 02 Jul 2013, 10:50 AM
I was doing the same thing.  Following your tip fixed all kinds of flakiness I was seeing.
Thanks !!!!!!!!!!!!!!!!! :)
0
Kiran
Top achievements
Rank 1
Veteran
Iron
answered on 08 Jun 2015, 09:28 PM
It's working!!!
Tags
TabStrip
Asked by
Purush
Top achievements
Rank 1
Answers by
Andrés
Top achievements
Rank 1
Kamen Bundev
Telerik team
Harut
Top achievements
Rank 1
Duke
Top achievements
Rank 1
Mike Graham
Top achievements
Rank 1
Kiran
Top achievements
Rank 1
Veteran
Iron
Share this question
or