Tab container & Tab panel

Hi

I am trying to customize look n feel of tab panel's Header Text -- by giving a hover effect or a different background image to tabs. I could not see any way of achieving it.

Where is the location of class ajax__tab_xp? If I create my own class, the separate tabs disappear.. How to apply or modify the stylesheet class??

Thanks in advance for your help.

Anyone guyz? AJAX experts? Please help.

I will greatly appreciate a line of working code for this.. Thanks in advance.

Hi,

Here is a code snippet demonstrate using custom style on tabContainer.

<style type="text/css">
.ajax__tab_xp2 .ajax__tab_header {
font-family:verdana,tahoma,helvetica;
font-size:21px;
background:
repeat-x
bottom;white-space:normal;
}
.ajax__tab_xp2 .ajax__tab_outer {
border-style: solid double;
padding-right:4px;
background:
no-repeat
right;
height:21px;
}
.ajax__tab_xp2 .ajax__tab_inner {
padding-left:3px;
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_tab {
height: 100px;
padding:4px;
margin:0;
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_outer {
background:
no-repeat
right;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_inner {
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_tab {
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_outer {
background:
no-repeat
right;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_inner {
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_tab {
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_container .ajax__tab_default {text-align:center; background-color:Blue;white-space:normal;}
.ajax__tab_xp2 .ajax__tab_body {text-align:center; background-color:Blue; font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px; border-style:none; border-color:Green; border-bottom-style:none; border-left:none; border-right:none; border-top:none; }
.ajax__tab_xp .ajax__tab_body {
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #999999;
border-top:0;
padding:8px;
background-color:#ffffff;
}
</style>

<ajaxToolkit:TabContainer CssClass="ajax__tab_xp2" ....................

This question is being asked soooo many times...

Maybe this'll help:

http://forums.asp.net/t/1163303.aspx

And maybe someone should put this in the FAQ (if it isn't already there)..

Thank you Raymond.. your post has solved my problem 95%.. great!

Quick question, on Hover I have:

.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_inner {
/* background:no-repeat; */
font-weight:bold;

due to this, all tabs move or drift little bit (due to font weight change) on Mouse Over.
How can I avoid this?

Thanks & I mark this as answer!

Thank you NNM, for the post link. I totally agree with other member -- TabPanel/Container controls are so "non-intuitive" .. if changing style on tab control must be done through css then why can't MSFT write a single line or provide a sample in their AJAX demos!! I spent freaking hours in figuring this out ...

Believe it .. I am gonna have questions when I start actual coding with Tab Controls! ..

Sam

sdekha76 :

Try changing thepadding value. There's no fixed answer to padding value, since I think it depends on the font size.

edit: the tab styling may seem non intuitive at first, but once you play around with it a bit, you'll be able to customize it completely, even changing the background images. I really love this toolkit control.

Tab Control Problem

Hi

I m using Ajax Tab Control in my application it is working fine but with one problem. I have three tab pages on the tab control. Every tab page has a data grid and that cause the page to post back. The problem is when I do some post back on tab and then move to another tab and cause the page to post back the tab control select the previous tab on the current on which I am working.

Is there something that I m missing ??

http://forums.asp.net/p/1068120/1550723.aspx#1550723

hi

But the solution over there is not working for me. Any other idea/workaround??

Did you try the solution by Howeird? That worked for me.

Use updatepanels around your grids.. That should prevent full postbacks.. If I understood your problem right, that should solve it..

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

Tabcontainer - Setting Tab Visibilities

Hi

I have a tabcontainer with several tabs on ajaxaed page. I am trying to hide some tabs at postabacks according to selection made in a dropdown list. Everything works fine until some of the tabs receive focus, e.g. if I hit the button inside the panel (I am using update panel hence there is no postback) . In that case when I change dropdown list selection, tabcontainer display gets messy.

I tested it in Firefox and the error line is marked in bold bellow:
set_activeTabIndex : function(value) {
if (!this.get_isInitialized()) {
this._cachedActiveTabIndex = value;
} else {
if (value < -1 || value >= this.get_tabs().length) {
throw Error.argumentOutOfRange("value");

From that I can conclude that the tabcontainer is trying to set tab that last received focus as active tab. Because the tabs visibilities are changed at postbacks the script fails. Please correct me if I am wrong.

Any help with this problem will be greatly appreciated.

OK there is a solution - I was led to it by reading this thread:

http://forums.asp.net/t/1068120.aspx?PageIndex=1

The member with nickname howeird posted the one way to solve the problem:

In my case I change the client side function from:

<script type="text/javascript">
function ActiveTabChanged(sender, e) {
var activeTab = $get('<%=activeTab.ClientID%>');
activeTab.value = sender.get_activeTabIndex();
}
</script>

To:
<script type="text/javascript">
function ActiveTabChanged(sender, e) {
var activeTab = $get('<%=activeTab.ClientID%>');
activeTab.value = 0;
}
</script>

That will ensure that the tab with index No 0 is always set as active tab at postbacks.
NOTE: The client side function is only part of the solution read the rest of the poste for full implementation.

Thanx howeird

TabContainer server event

Hi

I try to use TabContainer control and his event OnActiveTabChanged.

I have a simple page such as

<

cc1:TabContainerID="TabContainer1"runat="server"OnActiveTabChanged="TabContainer1_ActiveTabChanged"><cc1:TabPanelID="Tab1"runat="server"><ContentTemplate>

...

</ContentTemplate></cc1:TabPanel>

</

cc1:TabContainer>

And function

protectedvoid TabContainer1_ActiveTabChanged(object sender,EventArgs e)

{

string test ="sdfds";

}

But when i click on Tab and change active tab server event not fired.

Where is a problem?

Thanks

According to the documentation, the event should fire during a postback to the server, not in response to the tab being clicked.