Two rows of tab headers in TabContainer in Ajax Control Toolkit
Posted by ken zheng on July 9, 2008
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.
If you don’t wan to re-compile the code, just do
tag at the top:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”;>
then:
style type=”text/css”
.ajax__tab_xp .ajax__tab_header {white-space:normal;}
/style>
and:
…
ajaxToolkit:TabContainer runat=”server” ID=”GIListTabs” Width=”100%” CssClass=”ajax__tab_xp”
Derek Brown said
EDIT 2 FINAL..
I found a programmatic trick to this, or at least it worked for me. What I did was add an extra tab when (tabindex-1) mod 10 = 0. set extra tab TabHeaderText = “<div style=’clear:both;’>”. also set extratab.visible = false. Then keep count of how many extra tabs added as RowCount. Then when finished adding all tabs, loop till RowCount and add more extra tabs with TabHeaderText = “</div>”, and visible = false. works in firefox and IE7. havent tried other browsers. some code below. (tabspacer.ascx has nothing to it, besides class inherits from BaseControl, which inherits from UserControl, and shadows my BasePage. BasePage inherits Page. the aspx itself with the tabs on it inherits from BasePage.
public void AddTabs(String PageFile, int CMSAdministratorId, int WebsiteId, Boolean IsNewTabOnly)
{
int i = 0;
String sProc = “usp_sel_SomeStoreProc”;
SqlParameter[] sp = new SqlParameter[1];
sp[0] = new SqlParameter(”@Param1″, _Param1);
SqlDataReader dr = DatabaseCalls.ExecuteReader(DatabaseConnections.GetConnectionString(CMSUtility.Databases.MyDatabase), sProc, sp);
while (dr.Read())
{
i += 1;
AddTab(dr["ControlPath"].ToString(), dr["TabName"].ToString(), i);
}
dr.Close();
for (int j = 1; j <= _rowCount; j++)
{
TabPanel tp2 = new TabPanel();
tp2.HeaderText = “</div>”;
tp2.ID = “TabsClose” + j.ToString();
tp2.Style.Value = “border:none; background-color: white; width:0px; padding: 0 0 0 0;”;
tp2.Visible = false;
BaseControl bctl2 = (BaseControl)TemplateControl.LoadControl(”~/Controls/tabspacer.ascx”);
tp2.Controls.Add(bctl2);
Tabs.Add(tp2);
}
SetActiveTabIndex(0);
}
private void AddTab(String BaseControlPath, String TabName, int TabIndex)
{
TabPanel tp = new TabPanel();
tp.HeaderText = TabName;
tp.ID = “Tabs” + TabIndex.ToString();
BaseControl bctl = (BaseControl)TemplateControl.LoadControl(BaseControlPath);
tp.Controls.Add(bctl);
Tabs.Add(tp);
int remainder = (TabIndex – 1) % 10;
if (remainder == 0)
{
_rowCount += 1;
TabPanel tp2 = new TabPanel();
tp2.HeaderText = “<div style=’clear:both;’>”;
tp2.ID = “TabsBR” + TabIndex.ToString();
tp2.Style.Value = “border:none; background-color: white; width:0px; padding: 0 0 0 0;”;
tp2.Visible = false;
BaseControl bctl2 = (BaseControl)TemplateControl.LoadControl(”~/Controls/tabspacer.ascx”);
tp2.Controls.Add(bctl2);
Tabs.Add(tp2);
}
}