What i was wanting to happen is for my aspx page to load a number of user controls and then for the tabstrip control turn each loaded user control into a tabstrip item. I have written some code that will take the contents of a div and set it as the title then another div as the content. The idea was to have more control over the tab titles and for the tabs to be created dynamically. The amount of user controls and the content isnt known till the page is loaded
Basically the exact same code as below works with 2011 Q3 but not with the new update.
Javascript
$(document).ready(
function
() {
// var ParentID;
$(
"#tabstrip"
).kendoTabStrip({
});
var
tabstrip = $(
"#tabstrip"
).kendoTabStrip().data(
"kendoTabStrip"
);
//for each DIV within tab content, move it to a new tab within the tad strip
$(
'#tabcontent'
).children().each(
function
(index) {
//Get HTML from DIV
var
title = $(
this
).find(
'.tab_title'
).html();
$(
this
).find(
'.tab_title'
).css(
'display'
,
'none'
);
var
innerHTML = $(
this
).html();
//Append to the TABStrip
tabstrip.append(
[{
text: title,
content: innerHTML
}]
);
//Remove original DIV
$(
this
).remove();
});
$(
'#tabstrip .k-tabstrip-items'
).children().each(
function
(index) {
var
th = $.trim($(
this
).text());
$(
this
).html(th);
});
});
aspx page
<div id=
"tabstrip"
>
</div>
<div id=
"tabcontent"
>
<asp:PlaceHolder ID=
"PHContent"
runat=
"server"
></asp:PlaceHolder>
</div>
N.B. Placeholder is where the user controls is loaded into
User Control
<
div
class
=
"editDefaultInfo"
title
=
"Tab Title"
>
<
div
class
=
"tab_title"
>
<
span
class
=
"glyph listicon"
></
span
>
<
p
>Tab Title</
p
>
</
div
>
<
h1
>Tab Title</
h1
>
<
div
class
=
"form_content"
>
Tab Content
</
div
>
<!--form_content-->
</
div
>
<!--Defaultinfo-->
Has something changed with the tabstrip control that would mean it no longer works?