Wednesday, March 21, 2012

TabContainer Enabled or Visible

Hi,
I have a Tabcontainer using 3 TabPanels. "Identity", "Invoices","stats".

I need to display the Invoices and Stats panels only when the Identify is on Update mode (the other status could be Create).
So I set the value of Visible property for these panels to False.
I don't have the css design Panels but the HeaderTexts are displayed.

I tried with the Enabled property, I get the same problem.

And by the way, what is the difference between Enabled and Visible for the TabContainer Control ?

Thanks for your help

Stan

Do you have to use this

TabContainer1.Tabs(1).Enabled =False

is work fine...


Hi Stan,

Here is a sample. It controls the HeadText at the client side. It's very simple and should be extended in your usage!

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="TabTest.aspx.cs" Inherits="TabTest" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Label ID="Label1" runat="server" Text="Label" Width="141px"></asp:Label><br /> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Identity"> <ContentTemplate> 1111111<br/> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Invoices" Visible="false"> <ContentTemplate> 222222<br/> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="stats" Visible="false" Enabled="false"> <ContentTemplate> 333333<br/> </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> <script type="text/javascript" language="javascript">Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(sender, e){var tab1ID = "<%= this.TabContainer1.Tabs[1].ClientID%>";var tab2ID = "<%= this.TabContainer1.Tabs[2].ClientID%>";if(typeof(eval("document.all."+tab1ID))=="undefined"){ eval("document.all.__tab_"+tab1ID).innerHTML="";}if(typeof(eval("document.all."+tab2ID))=="undefined"){ eval("document.all.__tab_"+tab2ID).innerHTML="";}//alert(eval("document.all."+tab1ID))});</script> </form></body></html>

Difference between Enabled and Visible(We assume both of them are set to false):

1、Effect: Visible="false" HeadText is shown.

Enabled="false" HeadText isn't shown.

2、Client Code Visible ="false"

No

Enabled="false"

Sys.Application.add_init(function() { $create(AjaxControlToolkit.TabPanel, {"enabled":false,"headerTab":$get("__tab_TabContainer1_TabPanel3")}, null, {"owner":"TabContainer1"}, $get("TabContainer1_TabPanel3"));}); 3、Source code:if (!this._enabled) { this._hide();

}

_hide : function() {
this._tab.style.display = 'none';
if (this._get_active()) {
var next = this._owner.getNearestTab(false);
if (!!next) {
this._owner.set_activeTab(next);
}
}
this._deactivate();
}

For more details , please research this files: Tab.js, TabPanel.cs ,TabContainer.cs.

Hope it helps . If i misunderstood you, please let me know.

1 comment:

Unknown said...

Hi, we are using the tab TabContainer with 18 tab panel. And in each tabpanel we have another TabContainer with some user control. Now i wan to hind any one tab panel, i was trying to hide the panel with Visible="false" but it was not wokring. then we used the Enabled="false" and it is working fine.

Post a Comment