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?
5 Answers, 1 is accepted
0
Accepted
Hello Matt,
Maybe the problem is that you initialize Kendo TabStrip twice. Can you check if removing on of them helps? From:
$("#tabstrip").kendoTabStrip({
});
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
to
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
only.
Kind regards,
Kamen Bundev
the Telerik team
Maybe the problem is that you initialize Kendo TabStrip twice. Can you check if removing on of them helps? From:
$("#tabstrip").kendoTabStrip({
});
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
to
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
only.
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
matt
Top achievements
Rank 1
Rank 1
answered on 09 May 2012, 09:19 AM
That was it, rookie mistake!!!!
Thanks.
Thanks.
0
Dr.YSG
Top achievements
Rank 2
Rank 2
answered on 17 May 2012, 07:25 PM
I am getting an odd effect when I switched to the 515 build,
My TabStrip works fine in Chrome and Firefox (latest versions) but in IE9 I am seeing an effect that looks more like a PanelBar (i.e. heading are one below each other, rather than a horizontal layout of tabs).
PS: I just switched back to the old version, and it is happening there also, so ignore this part about the version, it is something else I must have just done. But it is odd that it only shows up in IE9, It might have to do with the fact that my TabStrip is inside of a Splitter.
My TabStrip works fine in Chrome and Firefox (latest versions) but in IE9 I am seeing an effect that looks more like a PanelBar (i.e. heading are one below each other, rather than a horizontal layout of tabs).
PS: I just switched back to the old version, and it is happening there also, so ignore this part about the version, it is something else I must have just done. But it is odd that it only shows up in IE9, It might have to do with the fact that my TabStrip is inside of a Splitter.
0
Hi Yechezkal,
Check if the browser is not falling in Quirksmode (F12 -> Document Mode -> Quirks Mode), which is not supported by Kendo UI.
Kind regards,
Kamen Bundev
the Telerik team
Check if the browser is not falling in Quirksmode (F12 -> Document Mode -> Quirks Mode), which is not supported by Kendo UI.
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
Dr.YSG
Top achievements
Rank 2
Rank 2
answered on 18 May 2012, 03:22 PM
You are very sharp, because I was still trying to dig up more information, and I did not think I had provided enough.
Indeed, it is starting in quirks mode (even though I believe my header is HTML5 compliant):
UPDATE: I found my issue (thanks the w3c html vaidator). I added a todo before the doctype, which I now fixed
Indeed, it is starting in quirks mode (even though I believe my header is HTML5 compliant):
<!DOCTYPE html><html lang="en"><head>UPDATE: I found my issue (thanks the w3c html vaidator). I added a todo before the doctype, which I now fixed
<!DOCTYPE html><!--todo make map and panes grow to 100% of free space--><html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>EGPL Catalog Search</title> <script src="Kendo/jquery-1.7.1.js" type="text/javascript"></script> <script src="Kendo/kendo.all.js" type="text/javascript"></script>