Tab control & master pages

How do I access a tab control that is on a Default.aspx form, which is diplayed in the ContentPlaceholder from my MasterPage.

Page.FindControl(string controlId) ?

I'm not sure, but I think this works...

Agapito

Nope it does not work.

Maybe im explaining wrong. The control resides in a Default.aspx that will be the ContentPlaceholder. I want to access the control from the master pages. The Tab control resides on the Default.aspx

I also tried

//Page.FindControl(TabContainer1);//Master.FindControl(TabControl1);this.ContentPlaceHolder1.FindControl(TabControl);

Given a Content Placeholder of "GCSContent" and a Tab Container of "TabContainer1", I am able to successfully find the control in the Page_Unload event of MasterPage.master using the following syntax:

this.GCSContent.FindControl("TabContainer1");

how do I accomplish this............?

It tells me that the TabContainer1 does not exist in the current context

protected void MenuItem_Click(object sender, MenuEventArgs e)
{
if (this.Menu1.SelectedItem.Value.Equals("1"))
{


this.ContentPlaceHolder1.FindControl("TabContainer1");
TabContainer1.ActiveTab = TabPanel2;

}

}

What is the ID of the tabContainer?

TabContainer myTabContainer = (TabContainer) this.ContentPlaceHolder1.FindControl("whatever_ID");

Tab Control and Background Image

Is it possible to apply a background image for the Tab control's body ?

By default , it is having white colour background.

Any pointers will be helpful

Thanks

Bagavathi

Yes it is possible, try to put the tab controls in a table and set the background image url to point to the image that you want to display as the background, then each tab will have a separate background image. Try this out.!!!

Enzoi!!

tab control problem

I have a default page that takes it from master page, I have put update panel and model pop up inside the my default page. Now I want to use Tab control for my default page. Three tabs, and when they click first one my panel1 will display, second tab clicked panel2 third panel3 will display. I have my pop up on panel 2.

I have created everything by watching video from example, but I cannot see my panel 2 and 3, only can see panel1. What I need to add. Maybe javascript?

Hi,

Here is a sample page made according to your description, please try it. In masterPage, there is nothing more than a ScriptManager.

<%@. Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1"> <ContentTemplate> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px"> Panel 1</asp:Panel> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2"> <ContentTemplate> <asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px"> Panel 2</br> <asp:Panel ID="Panel4" runat="server" Height="50px" Width="125px"> Popup<br /> <asp:Button ID="btnOK" runat="server" Text="OK" /></asp:Panel> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel4" OkControlID="btnOK" TargetControlID="Button1"> </ajaxToolkit:ModalPopupExtender> <asp:Button ID="Button1" runat="server" Text="Pop" /> </asp:Panel> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3"> <ContentTemplate> <asp:Panel ID="Panel3" runat="server" Height="50px" Width="125px"> Panel 3</asp:Panel> </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> </ContentTemplate> </asp:UpdatePanel>  </asp:Content>

Tab control style

hi

i want to override the default style of tab control.i copied the Css file from this linkhttp://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx

to a css file and set the tab container's css file to the new class name but this added some code in aspx page

<

ajaxToolkit:TabContainerID="TabContainer1"runat="server"CssClass="ajax_def_tab"><ajaxToolkit:TabPanelID="general"HeaderText="General "runat="server"><system.web.ui.controlrunat="server">

<div__designer:dtid="1688854155231235"id="DivGeneral"><asp:Panelrunat="server"GroupingText="General"Font-Size="10pt"Font-Names="Verdana"Height="50px"ID="Panel1"__designer:dtid="1688854155231236"><table__designer:dtid="1688854155231237"cellpadding="0"cellspacing="2"border=0class="label"width=100%><tr__designer:dtid="1688854155231238"><td__designer:dtid="1688854155231239"nowrap>First Name:</td><td__designer:dtid="1688854155231240"><asp:TextBoxrunat="server"BorderWidth="1px"Width="184px"ID="TextBox1"__designer:dtid="1688854155231241"></asp:TextBox>

</

td><td__designer:dtid="1688854155231242"nowrap>Last Name:</td><td__designer:dtid="1688854155231243"><asp:TextBoxrunat="server"BorderWidth="1px"ID="TextBox2"__designer:dtid="1688854155231244"></asp:TextBox>

</

td><td__designer:dtid="1688854155231245"nowrap>Middle Name</td><td__designer:dtid="1688854155231246"><asp:TextBoxrunat="server"BorderWidth="1px"Width="112px"Height="16px"ID="TextBox3"__designer:dtid="1688854155231247"></asp:TextBox>

</

td>

any help??

Seehttp://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx

-Damien

Tab control tabs

Hi,

Is there a way to show the tabs of a tab control on the left (instead of the default "top")?

(Something like the "Customer & Partner Solutions" onhttp://www.microsoft.com/en/us/default.aspx )

Thanks,

Z

http://deluxe-tabs.com/file/templates/tabs-vertical-template.html

That's nice…

But I meant is it possible to do it with the AJAX tab control?

Tab Controls and CssClass Not Working

I have been working with the tab Control for two days with no success at overridding the default styles for the tabs. I have copied the styles from the tabs.css file located in the toolkit, and have modified the hover, active and selected styles that I want to modiy. I have included the new css sheet into my application and included the CssClass reference in the file code. when I run the page or site to debug I get the default images and actions. Could anyone tell me what is wrong. I'm including the source code below:

ASP file

<%@dotnet.itags.org.PageLanguage="VB"AutoEventWireup="true"CodeFile="Default.aspx.vb"Inherits="_Default" %>

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

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Untitled Page</title>

<linkhref="Tabs.css"rel="stylesheet"type="text/css"/>

</head>

<body>

<formid="form1"runat="server">

<asp:ScriptManagerID="ScriptManager1"runat="server"/>

<div>

<cc1:TabContainerID="TabContainer1"runat="server">

<cc1:TabPanelID="TabPanel1"runat="server"CssClass="ajax__tab_tab1">

<HeaderTemplate>DashBoard</HeaderTemplate>

</cc1:TabPanel>

</cc1:TabContainer>

</div>

</form>

</body>

</html>

Style sheet

/* default layout */

.ajax__tab_default.ajax__tab_header {white-space:nowrap;}

.ajax__tab_default.ajax__tab_outer {display:-moz-inline-box;display:inline-block}

.ajax__tab_default.ajax__tab_inner {display:-moz-inline-box;display:inline-block}

.ajax__tab_default.ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}

/* tab1 theme */

.ajax__tab_tab1.ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>)repeat-xbottom;}

.ajax__tab_tab1.ajax__tab_outer {padding-right:4px;background:url("Images\green_gradient_3.gif")no-repeatright;height:21px;}

.ajax__tab_tab1.ajax__tab_inner {padding-left:3px;background:url("Images\green_gradient_1.gif")no-repeat;}

.ajax__tab_tab1.ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>)repeat-x;}

.ajax__tab_tab1.ajax__tab_hover.ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>)no-repeatright;}

.ajax__tab_tab1.ajax__tab_hover.ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>)no-repeat;}

.ajax__tab_tab1.ajax__tab_hover.ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>)repeat-x;}

.ajax__tab_tab1.ajax__tab_active.ajax__tab_outer {background:url("Images\green_gradient_4.gif")no-repeatright;}

.ajax__tab_tab1.ajax__tab_active.ajax__tab_inner {background:url("Images\green_gradient_3.gif")no-repeat;}

.ajax__tab_tab1.ajax__tab_active.ajax__tab_tab {background:url("Images\green_gradient_1.gif")repeat-x;}

.ajax__tab_tab1.ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1pxsolid#999999;border-top:0;padding:8px;background-color:#ffffff;}

/* scrolling */

.ajax__scroll_horiz {overflow-x:scroll;}

.ajax__scroll_vert {overflow-y:scroll;}

.ajax__scroll_both {overflow:scroll}

.ajax__scroll_auto {overflow:auto}

thank you,

kkof

You should apply the CssClass attribute to the TabContainer control rather than to the TabPanel element.

Kind regards,

sbogus.

Thanks sbogus, placing the CssClass on the TabContainer corrected the issues I was having.

Tab Panel - Gap between tab and body and style problems

Hi guys.

I am using the AJAX tab panel control and applying custom styles to it. I'm having a problem in that I cannot seem to get the "default" style for the tabs to look right.

I am trying to do something similar to the default style of the tab, whereby the top border changes color when the user hovers over a tab. My problem is two fold:

Firstly, there is a small gap between the tab itself and the content displayed in the body of the panel. How do I get rid of that space? I've tried setting padding and spacing on just about all the styles they mention on the ajax sample website, but I'm not having any luck getting rid of it.

Secondly, this is the style for my outer border:

1.TabPanel .ajax__tab_outer
2{
3background-color: #FFFFFF;
4border-left: solid1px #666666;
5border-top: solid1px #666666;
6border-right: solid1px #666666;
7border-bottom: solid0px #FFFFFF;
8margin-bottom:0px;
9margin-left:2px;
10padding:2px;
11}

And this is the style that has to be applied when the user hovers over a tab:

1.TabPanel .ajax__tab_hover
2{
3background-color: #FFFFFF;
4border-left: solid1px #666666;
5border-top: solid1px #666666;
6border-right: solid1px #666666;
7border-bottom: solid0px #FFFFFF;
8margin-bottom:0px;
9margin-left:2px;
10padding:2px;
11}

What's happening with this setting though is that ANOTHER border is put around the tab, so it looks COMPLETELY wonky.

Please please please help me! I have to have this done tomorrow and it looks TERRIBLE at the moment.

Thanks everyone,
Johann.

Seehttp://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx for a tab theming example.

-Damien

TabContainer - Tabs look weird!

Why is the default style looking weird like this. I did not change anything from the original settings so why is this happening and how can I correct it?

hum... I only have this problem with IE6 and 7, it's looks fine with Mozilla.

<%@. Page Language="vb" AutoEventWireup="false" EnableEventValidation="false" CodeBehind="test1.aspx.vb" Inherits="ClientBase.test1" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <link href="Styles.css" type="text/css" rel="stylesheet"></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:TabContainer ID="TabContainer1" runat="server"> <cc1:TabPanel HeaderText="Tab 1" runat="server"> <ContentTemplate> blabla 1 </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel HeaderText="Tab 2" runat="server"> <ContentTemplate> blabla 2 </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel HeaderText="Tab 3" runat="server"> <ContentTemplate> blabla 3 </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer> </form></body></html>

I am sure that someone must have experienced this before. Any sugestions would be great.

Thanks

Yes, I have the EXACT same problem. When I have the page all by itself, it looks as expected. But when I put the page in a template, it gets those same strange white boxes that cut the tab text in 1/2. If you find a solution, please post it here for the rest of us!

A little more research brings me to this thread:http://forums.asp.net/p/1069041/1554327.aspx#1554327 - which discusses in detail the exact problem. It has to do with tabs in Master pages.

Thanks for your reply, this lead me toward the answer needed. It seems that because Quirks Mode is not supported by Ajax Tabs (not sur what quirks mode is exactly) that the page containning the tabs need the following DocType definition in order for it to show properly.

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">