How to separate Kendo Tabstrip tab list and content divs in html? - kendo-ui

Question

So, I'm working with kendo in js. I'd like to use the tabstrip, but I'd like the tabs to be contained in a header that is styled and contains some other elements, so I am wondering if there is a way to separate the tab list and their associated divs. I'm looking to have something like this:
<div class="border">
<div class="header">
<div id="tabstriplist">
<ul>
<li id="tab1">First tab</li>
<li id="tab2">Second tab</li>
</ul>
</div>
<div>Some other text</div>
</div>
<div class="content">
<div id="tabcontent1">Stuff</div>
<div id="tabcontent2">Stuff</div>
</div>
</div>
However, it seems like all the example code I can find simply puts the associated divs immediately after the list, so the order of the divs corresponds to the list order. Is there any way to accomplish this sort of thing?
Edit: to clarify, I am looking for a way to display the tabcontent divs outside of the header. I don't really care about where the actual divs are in the html, but rather, where they will appear when they are generated on the page.

Answer 1

Ok, I figured it out. I don't think there is a way to directly attach the content divs to the tabs, but you can achieve the same functionality with the "show" or "select" events for the tabstrip. Here's what I ended up writing, boiled down.
Html:
<div class="border">
<div class="header">
<div id="tabstriplist">
<ul>
<li id="tab1">First tab</li>
<li id="tab2">Second tab</li>
</ul>
<div></div>
<div></div>
</div>
<div>Some other text</div>
</div>
<div class="content">
<div id="tabcontent1">Stuff1</div>
<div id="tabcontent2">Stuff2</div>
</div>
</div>
Js:
$(document).ready(function () {
function onTabSelect(selection) {
var contents = $("#content").children();
var tabNum = selection.contentElement.id.charAt(selection.contentElement.id.length - 1);
for (i = 0; i < contents.length; i++) {
if (tabNum - 1 === i) {
$("#" + contents[i].id).show();
}
else {
$("#" + contents[i].id).hide();
}
}
}
$("#tabstrip").kendoTabStrip({
show: onTabSelect
}).data("kendoTabStrip").select(0);
$("#tabstrip-1").remove();
$("#tabstrip-2").remove();

Answer 2

First solution would be to leave empty divs like:
<div class="border">
<div class="header">
<div id="tabstriplist">
<ul>
<li id="tab1">First tab</li>
<li id="tab2">Second tab</li>
</ul>
<div></div>
<div></div>
</div>
<div>Some other text</div>
</div>
<div class="content">
<div id="tabcontent1">Stuff</div>
<div id="tabcontent2">Stuff</div>
</div>
</div>
And then set tab content whenever you want
$(document).ready(function() {
var tabstrip = $("#tabstriplist").kendoTabStrip().data("kendoTabStrip");
var item = tabstrip.contentElement(0);
//replace the first tab content
$(item).html($("#tabcontent1").html());
});
Or to create the entire tab strip dinamically using:
<div id="tabstrip"></div>
<div class="content">
<div id="tabcontent1">Stuff</div>
<div id="tabcontent2">Stuff2</div>
</div>
And JS to initialize like:
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.append({
text: "Firts tab",
content: $("#tabcontent1").html()
});
tabstrip.append({
text: "Second tab",
content: $("#tabcontent2").html()
});