Tab Container doubts

Hi,

I have two questions regarding the Tab Container Control:

1) How can I get the current Tab in the code behind ?

2) if I have five tabpanels, with one grid view on each one and I want to use the updatepanel.

should I create one updatepanel and place all the tabpanels on it, or create one updatepanel for each tabpanel ?

Thanks !

I haven't tried your Tab / Update Panel combinations, but getting the current TabIndex in your server code is easy.

Dim TabNoAsInteger

TabNo = TabContainer1.ActiveTabIndex

Remember Active.TabIndex is Zero based so if you have 4 tabes and the last one is selected, the active index will be "3"

Hi,

Personally, I'd place different UpdatePanel for each tab. Haven't done this ever too, you may have a try and know if it works.

The Tab / Update panel combination worked smothly by using a diferent updatepanel for each tabpanel, like Raymond suggested.

If you want, you can use an update progress like this:

<asp:UpdateProgressID="UpdateProgress1"runat="server"AssociatedUpdatePanelID="Tabs$Panel1$upd1">

Thanks Joe and Raymond,

Skynyrd

TabContainer - UpdatePanel Trigger

Hi,

I have a TabContainer with two TabPanel's. In one TabPanel is a Button with a Click Event. My UpdatePanel is out of the TabContainer and has a Trigger with Event of the Button (inside my TabPanel)...But it doesn't work... Can't find the Button...

 <cc1:TabContainer ID="TabContainer1" runat="server"> <cc1:TabPanel ID="TabPanel1" runat="server"> <HeaderTemplate>Tab Eins</HeaderTemplate> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel2" runat="server"> <HeaderTemplate>Tab Zwei</HeaderTemplate> <ContentTemplate> </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server" Text="Hallo!"/> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers> </asp:UpdatePanel>

 Why I can't use the Event of the Button inside the TabPanel? 

Hi,

I try to find out solution, but what i find in tabcontainer the name of control get changed thats why at the time of rendering it is not find by updatepanel

I found a workaround for time being

<Triggers>
<asp:AsyncPostBackTrigger ControlID="TabContainer1$TabPanel1$Button1" EventName="Click" />
</Triggers>

I will try to get the correct solution if possible.

Hi,

OK, the same solution I found at the moment... But now I have a TreeView in the TabPanel and the Event is SelectedNodeChanged and when I try this:

<asp:AsyncPostBackTrigger ControlID="TabContainer1$TabPanel1$TreeView1" EventName="TreeView1_SelectedNodeChanged" />

It doesn't work...

Any Idea

Edit: Here we go:

<asp:AsyncPostBackTrigger ControlID="TabContainer1$TabPanel2$TreeView1" EventName="SelectedNodeChanged" />

works fine!

Hi,

Please use the following code snippet to register it:

ScriptManager1.RegisterAsyncPostBackControl(TabPanel1.FindControl("Button1"));

Hi,

I also have this problem,I have added trigger as you write but control out TabPanel not only loaded when click button but also loaded when I click any control in TabPanel.

Can you create a simple example about this?

Oh,it's my mistake.Your code is right.

TabContainer - Two Components with the same id error

Hi. I've loaded the most recent AJAX Controls Toolkit and am using a TabContainer and TabPanels. I try to run a report from Oracle by clicking on an image button elsewhere on the screen, which should (and does) cause the report to be generated. It then is to switch TabPanels and show the report. At that point, I get:

Microsoft JScript runtime error: Sys.InvalidOperationException: Two components with the same id 'TabContainer1_TabPanel1' can't be added to the application.

I've researched on the forums and found a few proposed fixes to this issue. Unfortunately, none of them seem to work. Has anyone seen this with the TabContainer, and is there a fix? If I set debug=false in the web.config it goes away, but I realize that isn't truly a solution.

Regards,

Mark

Hi Mark,

I am having similar problem. My case was, I have a user control that contains MultipleSelectorExtender from ajax control toolkit. On my page, I need to hide and show this user control on a specific event. The first time I set the Visible property of this user control that contains the MultipleSelectorExtender, I am not getting any error. The next time that I attempted to set the visible property of the usercontrol to true, I got the error message "Sys.InvalidOperationException: Two componnents with same id '<multipleselectorextender's Id>' can't be added to the application."

It seems that the component was recreated again when the container wast set to visible.

Have you found solution to your problem? If so, kindly post it here.

tia,

/randz

TabContainer ActiveTab Lost

I'm using a TabContainer with 6 TabPanels. When posting back with a button, the active tab is remembered properly. However, on an autopostback from a dropdownlist, the ActiveTab does not get remembered - it does not reflect the currently selected tab (unless of course, you didn't change tabs).

Can anyone confirm this behavior? I'd love to narrow down the cause of this to make sure it's not something I'm doing. Here's the relevant markup:

 <asp:dropdownlist id="ddlSubList" runat="server" Font-Size="10px" Height="20px" Visible="False" AutoPostBack="True" DataSource="<%# GetSubcontractors()%>" DataTextField="SubcontractorName" DataValueField="SubcontractorID" />
 <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Height="600px" Width="860px" CssClass="ajax__tab_viper">
 <ajaxToolkit:TabPanel ID="tabGeneralInfo" runat="server" HeaderText="General Info">
 <ContentTemplate>
 <pdg:GeneralInfo id="uclGeneralInfo" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabContacts" runat="server" HeaderText="Contacts">
 <ContentTemplate>
 <pdg:Contacts id="uclContacts" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabTrades" runat="server" HeaderText="Trades">
 <ContentTemplate>
 <pdg:Trades id="uclTrades" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabOpTerritory" runat="server" HeaderText="Op Territory">
 <ContentTemplate>
 <pdg:OpTerritory id="uclOpTerritory" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabLicenses" runat="server" HeaderText="Licenses">
 <ContentTemplate>
 <pdg:Licenses id="uclLicenses" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabOwnerQuals" runat="server" HeaderText="Owner Quals.">
 <ContentTemplate>
 <pdg:OwnerQuals id="uclOwnerQuals" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabManReps" runat="server" HeaderText="Manufacturer Rep">
 <ContentTemplate>
 <pdg:ManReps id="uclManReps" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabComments" runat="server" HeaderText="Comments">
 <ContentTemplate>
 <pdg:Comments id="uclComments" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabESProjects" runat="server" HeaderText="Subcontracts">
 <ContentTemplate>
 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
 <ContentTemplate>
 <pdg:ESProjects id="uclESProjects" runat="server" style="" />
 </ContentTemplate>
 </asp:UpdatePanel>
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 </ajaxToolkit:TabContainer>

I am also looking for a solution for this problem. I have not yet been able to find anything to point me in the right direction. Have you had any luck?
No luck yet. I'm fairly sure at this point that it's a bug with the control, but I don't have time to dig into the control's source right now. Anyone else feel like doing the honors?
I'm facing the same problem.
Yep, I'm having this problem as well. It happens with any control that fires an autopostback.

Hi, I'm having a similar problem with a linkbutton within a tab. A linkbutton doesn't have an autopostback attribute so I'm guessing that the tab control only works properly with Buttons.

A simple piece of test code can be found on this post:http://forums.asp.net/thread/1578119.aspx

Andrew

The problem seems to be that the AutoPostBack behavior of DropDownList (for example) adds some JavaScript that calls __doPostBack directly and this bypasses ASP.NET AJAX's Sys.WebForms.PageRequestManager._doPostBack method which is intended to intercept submits and perform additional processing. It's this additional processing which needs to happen in order for the active tab to be maintained and the lack of it explains the problems in this thread. (Note: You can break things similarly by setting UseSubmitBehavior=false on an asp:Button that currently works.)

Curiously, ASP.NET AJAX intercepts window.__doPostBack, but not the global __doPostBack that ASP.NET adds to every page. It's seeming to me that this difference is the root of the issue here, so I'll ask some folks on the ASP.NET AJAX team to have a look when they get a chance.

After further investigation, I believe that the explanation above was based on a mistaken observation. Specifically, ASP.NET AJAX successfully intercepts __doPostBack, so that's not the problem.

What I'm thinking now is that the problem is a result of the difference between whether or not the form's onsubmit is triggered or not. For a typical Button it IS, but for an AutoPostBack (or Button with UseSubmitBehavior=false) it's NOT. Sys.WebForms.PageRequestManager._doPostBack is getting called and it's calling through to the global __doPostBack as it should. But since this is not an async postback the _doPostBack implementation is returning BEFORE calling Sys.WebForms.PageRequestManager._onFormSubmit which is where the necessary call to the form's onsubmit happens. It's in the form's onsubmit that the saveClientState method in Tabs.js gets called and saves the active tab index, so if that doesn't get called, then the active tab index doesn't get saved.

I've just openedwork item 8255 to track this problem - thanks very much for bringing it up! Watch there for updates.

PS - As a temporary workaround, it may be possible to wrap the entire TabContainer in an UpdatePanel.

Hi David,

The workaround does work (I've tried it for linkbuttons, dropdownlists and button columns in a datagrid). First workaround I've tried that also enhances the user experience

Thanks very much for looking at this.

Andrew

Thanks for the response, David! Workaround seems to work for now. I'll keep an eye on this.

A note for people like me who can not use the updater panel and are suffering from this bug. My tab container is on a user control that is loaded on a very complex control, and adding updater panels is not an option at this point. I 'hacked fixed' the situation by setting the active tab myself.

Add a hidden field to the user control or page where the tab control resides:

<asp:HiddenField ID="activeTab" runat="server" />

then add a client event for when the active tab changes:

<ajaxToolkit:TabContainer OnClientActiveTabChanged="ActiveTabChanged" runat="server" ID="tabContainer"

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

and then add the following code to the page_load of the user control/page:

  
if (!string.IsNullOrEmpty(activeTab.Value)) tabContainer.ActiveTabIndex =int.Parse(activeTab.Value);
 

Workaround UpdatePanel works for me too.

thanks howard, hidden field method works great!

Hi folks!

I might be having the same problem, but I'm not sure that is the same issue, so I'll describe it here shortly. I want to use a TabContainer w FormViews to display different benefit configurations per products.

In an UpdatePanel, I have a tabContainer containing formviews in each tabs representing our different products and the benefit configuration for that client.

Each formview is using the sameObjectDataSource as its data source; when you click on a tab, a filter is set on the data source such as to display only the correct product information.

///
/// Those functions take care of raising the Server event upon changing the active tab.
///
1 <script type="text/javascript" language="javascript" >
2 ///
3 /// Fonction nécessaire pour attraper l'évènement c?té-client, puis le faire correspondre
4 /// à l'évènement serveur...
5 ///
6 function UserTabChanged(sender, e)
7 {
8 <%= Page.ClientScript.GetPostBackEventReference(tcConfPers, "")%>
9 }
10
11 function ConcesTabChanged(sender, e)
12 {
13 <%= Page.ClientScript.GetPostBackEventReference(tcConfConces, "")%>
14 }

///
/// Here is the declaration of the UpdatePanel, TabContainer, Tabs, and formviews, plus the ObjectDataSource
/// (You may disregard "SectionnableDiv " as it is only a custom panel, with an additional property...)
15 </script>
16 <asp:UpdateProgress ID="ConfPersUpdateProgress" runat="server" AssociatedUpdatePanelID="upnlConfPers" >
17 <ProgressTemplate>
18 <asp:Image ID="imgConfPersUpdateProgress" runat="server" ImageUrl="~/Dependancies/Multimedia/Images/bigrotation2.gif" />
19 </ProgressTemplate>
20 </asp:UpdateProgress>
21
22 <asp:UpdatePanel ID="upnlConfPers" runat="server" RenderMode="Inline" UpdateMode="Conditional">
23 <ContentTemplate>
24
25 <libPC:SectionnableDiv ID="divBenefPerso" AccessCode="sConfPerso" runat="server" Visible="true">
26 <libAJAX:TabContainer CssClass="ajax__tab_portal" ID="tcConfPers" runat="server" OnClientActiveTabChanged="UserTabChanged" OnActiveTabChanged="tcConfPers_OnActiveTabChanged">
27 <libAJAX:TabPanel ID="tbConfPersAWC" runat="server" HeaderText="AWChar">
28 <ContentTemplate>
29 <libPC:PortalBenefConfigView AccessCode="sConfAWC" TypeProd="AWCar" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersAWC" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
30 <HeaderTemplate>
31 <asp:Label runat="server">Configuration de profits de garanties supplémentaires pour voitures</asp:Label>
32 </HeaderTemplate>
33 </libPC:PortalBenefConfigView>
34 </ContentTemplate>
35 </libAJAX:TabPanel>
36 <libAJAX:TabPanel ID="tbConfPersAWRV" runat="server" HeaderText="AWVR">
37 <ContentTemplate>
38 <libPC:PortalBenefConfigView AccessCode="sConfAWRV" TypeProd="AWRV" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersAWRV" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
39 <HeaderTemplate>
40 <asp:Label runat="server">Configuration de profits de garanties supplémentaires pour véhicules récréatifs</asp:Label>
41 </HeaderTemplate>
42 </libPC:PortalBenefConfigView>
43 </ContentTemplate>
44 </libAJAX:TabPanel>
45 <libAJAX:TabPanel ID="tbConfPersAWLV" runat="server" HeaderText="AWVL">
46 <ContentTemplate>
47 <libPC:PortalBenefConfigView AccessCode="sConfAWLV" TypeProd="AWLV" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersAWLV" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
48 <HeaderTemplate>
49 <asp:Label runat="server">Configuration de profits de garanties supplémentaires pour véhicules de loisir</asp:Label>
50 </HeaderTemplate>
51 </libPC:PortalBenefConfigView>
52 </ContentTemplate>
53 </libAJAX:TabPanel>
54 <libAJAX:TabPanel ID="tbConfPersRWC" runat="server" HeaderText="RWChar">
55 <ContentTemplate>
56 <libPC:PortalBenefConfigView AccessCode="sConfRWC" TypeProd="RWCar" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersRWC" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
57 <HeaderTemplate>
58 <asp:Label runat="server">Configuration de profits de garanties de remplacement pour voitures</asp:Label>
59 </HeaderTemplate>
60 </libPC:PortalBenefConfigView>
61 </ContentTemplate>
62 </libAJAX:TabPanel>
63 <libAJAX:TabPanel ID="tbConfPersRWLV" runat="server" HeaderText="RWVL">
64 <ContentTemplate>
65 <libPC:PortalBenefConfigView AccessCode="sConfRWLV" TypeProd="RWLV" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersRWLV" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
66 <HeaderTemplate>
67 <asp:Label runat="server">Configuration de profits de garanties de remplacement pour véhicules de loisir</asp:Label>
68 </HeaderTemplate>
69 </libPC:PortalBenefConfigView>
70 </ContentTemplate>
71 </libAJAX:TabPanel>
72 <libAJAX:TabPanel ID="tbConfPersILC" runat="server" HeaderText="AssCréd">
73 <ContentTemplate>
74 <libPC:PortalBenefConfigView AccessCode="sConfCIC" TypeProd="ILCar" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersCIC" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
75 <HeaderTemplate>
76 <asp:Label runat="server">Configuration de profits d'assurance-crédit pour voitures</asp:Label>
77 </HeaderTemplate>
78 </libPC:PortalBenefConfigView>
79 </ContentTemplate>
80 </libAJAX:TabPanel>
81 </libAJAX:TabContainer>
82
83 </libPC:SectionnableDiv>
84
85 <asp:ObjectDataSource ID="odsBenefConfigs" runat="server"
86 TypeName="GroupePPP.Portal.AuthorizationDAL.CommissionInfoDAL"
87 SelectMethod="GetEntityList"
88 UpdateMethod="Save"
89 OnSelecting="odsBenefConfigs_Selecting">
90 <UpdateParameters>
91 <asp:Parameter Name="user" Type="Object" />
92 <asp:Parameter Name="da" Type="Object" />
93 </UpdateParameters>
94 <SelectParameters>
95 <asp:Parameter Name="IDConces" Type="Int32" />
96 <asp:Parameter Name="IDUser" Type="Int32" />
97 <asp:Parameter Name="da" Type="Object" />
98 </SelectParameters>
99 </asp:ObjectDataSource>
100
101 </ContentTemplate>
102 </asp:UpdatePanel>

Problem is: When I first change the active tab, the page is doing a full post-back, instead of a partial one, and there is no change of tabs, or filter applied on the ods, but on all subsequent changes of tab, only a partial postback is made(which is good.)
On every change(after the first one), the filter is set appropriately (the contained ObjectDataSource is filtered and the formview displays the correct product information.) But when I go to edit mode (in any one of the formviews), the partial post-back is made, but the ODS seems to lose its state (I'm now in the correct tab, but the filter went away, and the data displayed is the first record in the underlying datatable.) If I then go to another tab and come back to the one I wanted to edit, the other is in read-only mode, and the one I asked for is still in edit mode, on the correct record.

I might have given too many details, but as I'm new to AJAX, I tried to include all relevant information... Please do not hesitate to ask for clarifications.

Thank you all for your time!

Hi folks!

I might be having the same problem, but I'm not sure that is the same issue, so I'll describe it here shortly. I want to use a TabContainer w FormViews to display different benefit configurations per products.

In an UpdatePanel, I have a tabContainer containing formviews in each tabs representing our different products and the benefit configuration for that client.

Each formview is using the sameObjectDataSource as its data source; when you click on a tab, a filter is set on the data source such as to display only the correct product information.

///
/// Those functions take care of raising the Server event upon changing the active tab.
///
1 <script type="text/javascript" language="javascript" >
2 ///
3 /// Fonction nécessaire pour attraper l'évènement c?té-client, puis le faire correspondre
4 /// à l'évènement serveur...
5 ///
6 function UserTabChanged(sender, e)
7 {
8 <%= Page.ClientScript.GetPostBackEventReference(tcConfPers, "")%>
9 }
10
11 function ConcesTabChanged(sender, e)
12 {
13 <%= Page.ClientScript.GetPostBackEventReference(tcConfConces, "")%>
14 }

///
/// Here is the declaration of the UpdatePanel, TabContainer, Tabs, and formviews, plus the ObjectDataSource
/// (You may disregard "SectionnableDiv " as it is only a custom panel, with an additional property...)
15 </script>
16 <asp:UpdateProgress ID="ConfPersUpdateProgress" runat="server" AssociatedUpdatePanelID="upnlConfPers" >
17 <ProgressTemplate>
18 <asp:Image ID="imgConfPersUpdateProgress" runat="server" ImageUrl="~/Dependancies/Multimedia/Images/bigrotation2.gif" />
19 </ProgressTemplate>
20 </asp:UpdateProgress>
21
22 <asp:UpdatePanel ID="upnlConfPers" runat="server" RenderMode="Inline" UpdateMode="Conditional">
23 <ContentTemplate>
24
25 <libPC:SectionnableDiv ID="divBenefPerso" AccessCode="sConfPerso" runat="server" Visible="true">
26 <libAJAX:TabContainer CssClass="ajax__tab_portal" ID="tcConfPers" runat="server" OnClientActiveTabChanged="UserTabChanged" OnActiveTabChanged="tcConfPers_OnActiveTabChanged">
27 <libAJAX:TabPanel ID="tbConfPersAWC" runat="server" HeaderText="AWChar">
28 <ContentTemplate>
29 <libPC:PortalBenefConfigView AccessCode="sConfAWC" TypeProd="AWCar" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersAWC" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
30 <HeaderTemplate>
31 <asp:Label runat="server">Configuration de profits de garanties supplémentaires pour voitures</asp:Label>
32 </HeaderTemplate>
33 </libPC:PortalBenefConfigView>
34 </ContentTemplate>
35 </libAJAX:TabPanel>
36 <libAJAX:TabPanel ID="tbConfPersAWRV" runat="server" HeaderText="AWVR">
37 <ContentTemplate>
38 <libPC:PortalBenefConfigView AccessCode="sConfAWRV" TypeProd="AWRV" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersAWRV" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
39 <HeaderTemplate>
40 <asp:Label runat="server">Configuration de profits de garanties supplémentaires pour véhicules récréatifs</asp:Label>
41 </HeaderTemplate>
42 </libPC:PortalBenefConfigView>
43 </ContentTemplate>
44 </libAJAX:TabPanel>
45 <libAJAX:TabPanel ID="tbConfPersAWLV" runat="server" HeaderText="AWVL">
46 <ContentTemplate>
47 <libPC:PortalBenefConfigView AccessCode="sConfAWLV" TypeProd="AWLV" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersAWLV" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
48 <HeaderTemplate>
49 <asp:Label runat="server">Configuration de profits de garanties supplémentaires pour véhicules de loisir</asp:Label>
50 </HeaderTemplate>
51 </libPC:PortalBenefConfigView>
52 </ContentTemplate>
53 </libAJAX:TabPanel>
54 <libAJAX:TabPanel ID="tbConfPersRWC" runat="server" HeaderText="RWChar">
55 <ContentTemplate>
56 <libPC:PortalBenefConfigView AccessCode="sConfRWC" TypeProd="RWCar" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersRWC" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
57 <HeaderTemplate>
58 <asp:Label runat="server">Configuration de profits de garanties de remplacement pour voitures</asp:Label>
59 </HeaderTemplate>
60 </libPC:PortalBenefConfigView>
61 </ContentTemplate>
62 </libAJAX:TabPanel>
63 <libAJAX:TabPanel ID="tbConfPersRWLV" runat="server" HeaderText="RWVL">
64 <ContentTemplate>
65 <libPC:PortalBenefConfigView AccessCode="sConfRWLV" TypeProd="RWLV" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersRWLV" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
66 <HeaderTemplate>
67 <asp:Label runat="server">Configuration de profits de garanties de remplacement pour véhicules de loisir</asp:Label>
68 </HeaderTemplate>
69 </libPC:PortalBenefConfigView>
70 </ContentTemplate>
71 </libAJAX:TabPanel>
72 <libAJAX:TabPanel ID="tbConfPersILC" runat="server" HeaderText="AssCréd">
73 <ContentTemplate>
74 <libPC:PortalBenefConfigView AccessCode="sConfCIC" TypeProd="ILCar" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersCIC" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
75 <HeaderTemplate>
76 <asp:Label runat="server">Configuration de profits d'assurance-crédit pour voitures</asp:Label>
77 </HeaderTemplate>
78 </libPC:PortalBenefConfigView>
79 </ContentTemplate>
80 </libAJAX:TabPanel>
81 </libAJAX:TabContainer>
82
83 </libPC:SectionnableDiv>
84
85 <asp:ObjectDataSource ID="odsBenefConfigs" runat="server"
86 TypeName="GroupePPP.Portal.AuthorizationDAL.CommissionInfoDAL"
87 SelectMethod="GetEntityList"
88 UpdateMethod="Save"
89 OnSelecting="odsBenefConfigs_Selecting">
90 <UpdateParameters>
91 <asp:Parameter Name="user" Type="Object" />
92 <asp:Parameter Name="da" Type="Object" />
93 </UpdateParameters>
94 <SelectParameters>
95 <asp:Parameter Name="IDConces" Type="Int32" />
96 <asp:Parameter Name="IDUser" Type="Int32" />
97 <asp:Parameter Name="da" Type="Object" />
98 </SelectParameters>
99 </asp:ObjectDataSource>
100
101 </ContentTemplate>
102 </asp:UpdatePanel>

Problem is: When I first change the active tab, the page is doing a full post-back, instead of a partial one, and there is no change of tabs, or filter applied on the ods, but on all subsequent changes of tab, only a partial postback is made(which is good.)
On every change(after the first one), the filter is set appropriately (the contained ObjectDataSource is filtered and the formview displays the correct product information.) But when I go to edit mode (in any one of the formviews), the partial post-back is made, but the ODS seems to lose its state (I'm now in the correct tab, but the filter went away, and the data displayed is the first record in the underlying datatable.) If I then go to another tab and come back to the one I wanted to edit, the other is in read-only mode, and the one I asked for is still in edit mode, on the correct record.

I might have given too many details, but as I'm new to AJAX, I tried to include all relevant information... Please do not hesitate to ask for clarifications.

Thank you all for your time!

P.S.: Sorry for the double-post; the forum parser had a hard-time wih the accentuated "e", in "Quebec"... ;)

TabContainer and TabPanel

I'm trying to build a fairly customized TabContainer... which contains TabPanels that can be closed or opened by the user (except the first TabPanel which is always available), also with different styles, colors, etc. How can the TabContainer be customized ? And does it support client-side closing/hiding TabPanels ?

Check out the sample:http://www.asp.net/AJAX/Control-Toolkit/Live/Tabs/Tabs.aspx

Check out the section namedTabs Theming for how to style the control.

-Damien

Thanks for the answer... but

What about allowing the user to close/open tabs without using code-behind functions?

I don't believe there is way to hide them client side. You can set theEnabled property though client side according to that link I sent you.

TabPanel Properties
"Enabled - Whether to display the Tab for the TabPanel by default. This can be changed on the client."

-Damien

TabContainer AutoPostBack. Load the tabPanels only when needed

Greetings!I have a TabContainer with various tab.

Each tabPanel contains a Gridview that contains different data. This way, each time the page loades or makes a postback ALL the gridviews perform the data access.

In order to increase performance at the first page_load, I want that the methods that load the Gridviews excecute only when the tab is activates. The solution that I tried was to capture the ActiveTabChange event. The problem is that the TabContainer doesn't have any AutoPostBack-like property.

Any ideas=

Hello,

There's a function on the TabContainer called OnActiveTabChanged

If you READ (yes READ) my post, you will see that I know that there is that event, and I also say that it doesn't solve by its own my problem. Yes I do capture that event and code the data access there. But when the user clicks on a tab, this event doesn't fire up, because this events activates on postback (for example, if anyone clicks a button).

Pleas avoid answering if you don't read the entire post.

Anyone with REALLY helpful ideas?

Oops, sorry. I guess I must have skipped that line of yours. Cheer.

TabContainer doesnt persist tab selection between postbacks

Hi,

I'm using a couple of TabContainers on my web form. The main TabContainer hosts seven TabPanels, each of which hosts a different FormView control.

According to the Tab documentation, "the most recent tab should remain selected after a postback." However, whenever I change the mode on a FormView (e.g. changing to Edit a record), a postback occurs and a the first tab is selected again.

I tried setting the TabContainer's EnableViewState="True", but that didn't help.

What do I need to do to keep the same tab selected between postbacks?

Thanks,

Mark

Anyone else seeing this problem? Any idea how to keep the tab selected between postbacks?

Thanks,

Mark

Hi Mark,

According to my test, the active index is persisted between postbacks.

If it doesn't for you, please try the following workaround.

1. Add a hidden field on the form

2. On the client side active index changed event, save current index into the hidden field

3. On postback, set the activeIndex of the tabContainer to the value in hidden field( on Server Side )

Or set it via javascript in client side pageLoad event.

Hope this helps.

Thank you Raymond. Sorry for the late reply; I have been distracted with other tasks. I'll try this when I get back to working on the UI.

Mark

TabContainer hidden on postback!

i have a page that is derived from a master page. The page contains a tabContainer with three TabPanels. Each of the TabPanels contains an updatePanel.

One of the updatePanels contains a TabContainer with two Tabpanels that contain CascadingDropdowns. Everything works fine till i perform a postback

from within the update panel. Upon return the inner most tabContainer is hidden -- i can see it in ViewSource, but it is set to hidden and display of none.

There are no exceptions in the code. The Page Load event completes perfectly, the event handler for the button that causes the postback executes

perfectly. everything works, except that the tabContainer is "gone"...

If i remove the UpdatePanel that contains the tabContainer then everything works. Putting back the UpdatePanel causes the inner TabContainer to

disappear on postback even though everything works in the code behind. I tried to explicitly set the TabContainer to enabled and visible in Page Load

event to no avail. I do not know if the fact that the page is derived from a master page makes a difference.

summary of hierarchy

MasterPage

-- ClientPage

-- TabContainer

-- TabPanel

-- UpdatePanel -->this seems to cause the problem on postback.

-- TabContainer --> disappears on postback

-- TabPanel --> this works, has no TabContainers

-- TabPanel -->this works, has no Tabcontainers

Help??!!!

i found the solution to all the problems i've been having with tabs disappearing upon deployment.

Turns out the microsoftajax.js was different. Reinstalling Ajax extensions fixed it. The problem i

have with this is that this was the released v1.0 that was installed. The machine had no atlas, no

previews, no nothing before Ajax 1 was installed on it few weeks ago. Downloading and re-installing

fixed it, but clearly installed a different set of files... The hint that finally got me to this path was

issues with sys.debug that were not related to caching the js files in the browser nor in IIS.

I downloaded the latest controltoolkit.dll, however, I am still having the same problem with firefox as you had above.

Any suggestions?

Thanks

Hi,

If anyone is still having this issue....

Firefox had a bug. I just downloaded the latest release of Firefox from this link: (I guess it is not officially released?)

ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2007-03-09-19-firefox2.0.0.3

In the new Firefox, the tabContainer seems to work fine.

Thanks

TabContainer flicker on tab mouse over

Hi,

I am using the AJAX Control Toolkit and have a TabContainer with two TabPanels on an aspx/VB page.

My problem is when I mouse over the tabs the page flickers.

Putting the TabContainer in an UpdatePanel makes no difference.

From what I have gathered this is due to the reloading of the tab images used by the 'ajax__tab_xp' CSS that is applied by default to the TabContainer.

Can anyone suggest a way to prevent the flicker (other than changing the cache settings in IIS)?

Apologies if this is a double up post (I looked and couldn't find any that answered the problem).

Thanks in advance,
David

I have this problem too! I noticed, however, that the 'demo' Ajax Toolkit site doesn't have this problem. there must be a way to prevent this, looks terrible.

Hi abgibbs,

I have not found a proper fix to this problem but this post http://forums.asp.net/t/1115791.aspx helped me to bang together a temporary hack fix.

I basically rewrote the entire Tabs CSS file so that it was no longer using background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>)to populate the background images of each TabPanel.

I made my own background images and imported them into my projects Images folder and now havebackground:url("./Images/TabIcon.gif")repeat-x ; in my StyleSheet.

It doesn't look nearly as good as the real deal but at least it no longer has that horrific flicker.

Hope this helps,
David

I don't see any problem on my tabpanels when hovering over the tabs ...

I've been using the tabcontainer a lot...

And there's obviously something weird about it: if you move your mouse over the headers, very often the content of the active tabpanel will "jump". If you have some text inside you will see it suddenly wrap differently for a second, for example.

I haven't found a way around it, but haven't really tried until now...

But moving your mouse over the headers has an effect on the size of the active TabPanel.

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.