Tab Container Header tabs NOT on multiple rows

This is driving me crazy. I have a webpage that has a table on it. Inside the table I have a TabContainer. I have 13 tab headers I need for the one TabContainer. I populate the tab headers by a call to the database then doing a For Loop to enter all the headers. The problem is that when I run the app the tab headers are all on one row. How do I get the Tab Headers to split up into two rows?

Thanks in advanced.

mutlyp

Hi mutlyp,

As far as I know, there is no build-in support for this feature currently. You can votehere.

Hi Raymond

I actually found the answer but it took a lot of digging on the net. It's from Nazar Rizvi's blog

http://www.narizvi.com/blog/post/Two-rows-of-tab-headers-in-TabContainer-in-Ajax-Control-Toolkit.aspx

You have to go into the Tab.css and change the ".ajax__tab_default.ajax__tab_header {}" line. Then the Tab headers will wrap.

Funny how Nazar knew this and you a Microsoft rep didn't. Maybe you guys should hire Nazar.

Mutlyp,

Thanks for that link...

Regards

Karen

Thanks for sharing, it's so helpful.

TabContainer inside Master page

Hi everyone

In my Webapplicaton i have Master Page .

One of my webpage i have placed the Tabcontainer inside the

Design Code:

<%@dotnet.itags.org.PageLanguage="C#"MasterPageFile="~/MstrPages/Default.master"AutoEventWireup="true"CodeFile="VQuote.aspx.cs"Inherits="VQuote"Title="Untitled Page" %>

<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"
runat="server">
</asp:ScriptManager>

<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<contenttemplate>
<cc1:TabContainer ID="SampleTabContainer" runat="server" ActiveTabIndex="0" TabIndex="0">
<cc1:TabPanel ID="Panel1" runat="server" HeaderText="Panel1">
<ContentTemplate>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="Panel2" runat="server" HeaderText="Panel2">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server">Group Name</asp:Label>
</td>
<tr>
<asp:Label ID="lblGrouName" runat="server"></asp:Label>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</contenttemplate>
</asp:UpdatePanel>
</div>
</asp:Content>

when i load the page i am getting the below error:

System.Web.HttpException : {"The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)."}

Message : "The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)."

stacktrace : " at System.Web.UI.ControlCollection.Add(Control child)\r\n at AjaxControlToolkit.ScriptObjectBuilder.RegisterCssReferences(Control control)\r\n at AjaxControlToolkit.ScriptControlBase.OnPreRender(EventArgs e)\r\n at System.Web.UI.Control.PreRenderRecursiveInternal()\r\n at System.Web.UI.Control.PreRenderRecursiveInternal()\r\n at System.Web.UI.Control.PreRenderRecursiveInternal()\r\n at System.Web.UI.Control.PreRenderRecursiveInternal()\r\n at System.Web.UI.Control.PreRenderRecursiveInternal()\r\n at System.Web.UI.Control.PreRenderRecursiveInternal()\r\n at System.Web.UI.Control.PreRenderRecursiveInternal()\r\n at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)"

when i debug i am getting error at this object:

ScriptObjectBuilder.cs

public static void RegisterCssReferences(Control control)
{
foreach (string styleSheet in ScriptObjectBuilder.GetCssReferences(control))
{
// Add the link to the page header instead of inside the body which is not xhtml compliant
HtmlLink link = new HtmlLink();
link.Href = styleSheet;
link.Attributes.Add("type", "text/css");
link.Attributes.Add("rel", "stylesheet");
control.Page.Header.Controls.Add(link); --Here I am getting the error

}
}

Please any can help to solve this issue

regards

kumaran

Hi Kumaran,

The sample you provided itself is correct.

As the error message indicates, please don't use code block in your page, use assignment in code behind instead.