ajax TabControl: properly

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 Smile

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.

Big Smile

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!

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.

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"... ;)

Monday, March 26, 2012

Tab Control Not working Properly in Update Panel.

Tab order prblem when using update panel

Saturday, March 24, 2012

Tab panel is not working properly in Firefox 1.5.0.10

TabContainer ActiveTab Lost

ajax TabControl

Blog Archive

About Me