Hi - with the tab panel control, do I need to have an 'update' button on each tab to save any details updated on that tab, or will one Update button, outside the TAB container, be able to 'see' all of the controls on each page? Or do you need to do a findcontrol to get to your controls on each of the tabs?
Thanks, Mark
Mtait,
You should be able to access the controls directly off the tabs. So an update button outside of the TabContainer should be just fine.
Regards.
In my form aspx page, I have three panels, top of the page I have three input buttons controls how I display my panels, first button display panel1(hides panel2 and 3) , second button displays panel2(hides panel1 and panel3), third panel display panel3(hides panel1 and 2).
Only thing is, panel2 has one small subpanel and datagrid in it that for datagrid, I put a modelpopupextender , because I wanted when user clicks linkbutton inside the datagrid, I make modelpopup pops. That means it I have update panel inside the Panel2 already.
I have tried some javascript functions for displaying/hiding my panels when buttons are clicked, but I needed also for panel2 when user saves datagrid, page refreshes and needs to comes back to show panel2 again,it was keep showing panel1, I put some javascript for that would remember last button clicked, so could come back that one, but that gives me some problem, so maybe I should try Ajaxs Tab , but I get confused how would I set up that, because I already have updatepanel inside the panel2 for modelpopup, so how would I can put tab control for whole form? Would it effect Tab and modelpop up together ?
Any suggestions?
Hi,
I agree your idea of trying to use TabContainer control. With it, you don't need to worry about keep its state between postbacks.
For more information about how to use it, I'd suggest downloading the sample web sitehere and try the tabs page.
Just a word of warning - I am not very familiar with Ajax.
I have a few textboxes and a button within an update panel. When the button is clicked some data is retrieved (using Ajax) and some of the textboxes are filled with that data. I would like to remove the button click step, and instead have that data retrieved when the user leaves the first textbox. So, the user is in a name textbox. They type "Billy Bob," and then tab out to the next textbox (or click out of it to another textbox), at which time Ajax does it's asynchronous stuff to retrieve the data from the server for that name. Is this possible to do?
Thanks in advance!
You could try the TextChanged event of the first TextBox, remember to set theAutoPostBack value to true in the TextBox to generate a postback when you tab out of the TextBox.hello guys,
yes, this will work, if you're using an updatepanel. anyway, it might not "feel right" to the user since the contents that are inside the panel will be refreshed (which meaans that he migh be writing something on another textbox and then when he looks at it, everything has been "replaced" by the contents sent from the server...
Thank you both for your help. I was able to get it to work by using the textbox as the trigger.
Luis, I understand what you're saying about the workflow not feeling right. There are other underlying problems within this page (I didn't originally design it though!) and what it does that made me look at doing this as an option to fix some of those problems. But the more I look at it, the more I think that it just doesn't "feel right." =)
I probably won't implement this solution in the end. Thanks for the help!
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.
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" />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?
<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>
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
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 }
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 }
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"... ;)
Hello :
I have a TabContainer in an Update Panel. When ever an event fires in an update Panel such as Button onclick , the TabContainer dissappears.
I also tried to move update Panel inside the TabPanel . I tested this at 2 different Places. One is on a Page and the other sits in a panel that is displayed by Modal Popup. When the event fires , the one in the Page is still visble and I have a JS error . The one that sits in the ModalPopup dissappears with same JS error.
Here is the error , I am seeing
this.get_element() has no properties
_app_onload(Object _disposableObjects=[9] _components=Object,Object _components=[9] _isPartialLoad=true)ScriptResource.ax... (line 217)
(no name)()ScriptResource.ax... (line 50)
_handler(Object _disposableObjects=[9] _components=Object,Object _components=[9] _isPartialLoad=true)ScriptResource.ax... (line 2503)
Sys$_Application$raiseLoad()ScriptResource.ax... (line 3754)
Sys$WebForms$PageRequestManager$_pageLoaded(false)ScriptResource.ax... (line 1191)
Sys$WebForms$PageRequestManager$_scriptsLoadComplete()ScriptResource.ax... (line 1229)
(no name)()ScriptResource.ax... (line 50)
Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3297)
Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3290)
Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3290)
Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3290)
Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3290)
Sys$_ScriptLoader$loadScripts(0,function(),null,null)ScriptResource.ax... (line 3198)
Sys$WebForms$PageRequestManager$_onFormSubmitCompleted(Object _webRequest=Object _xmlHttpRequest=XMLHttpRequest,Object)ScriptResource.ax... (line 1177)
(no name)()ScriptResource.ax... (line 50)
_handler(Object _webRequest=Object _xmlHttpRequest=XMLHttpRequest,Object)ScriptResource.ax... (line 2503)
Sys$Net$WebRequest$completed(Object)ScriptResource.ax... (line 4458)
_onReadyStateChange()ScriptResource.ax... (line 4009)
this.get_element().style.visibility = 'visible';
Can any please let me know how this problem can be resolved.
Thanks,
Rajesh
After little struggle , I found that TabstripContainer when in update Panel disappears.
For Ex i have this secnario :
<Page>
<updatepanel>
<usercontrol>
<TabStripContainer></TabstripContainer>
</usercontrol>
</updatepanel>
</Page>
The TabstripContainer in UserControl dissappears when an even fires in UserControl.
So i need to arrange the above as follows
<page>
<usercontrol>
<TabStripContainer>
<TabPanel>
<updatepanel
</updatePanel>
</TabPanel>
</TabstripContainer>
</usercontrol>
</page>
Hopefully this issue will be resolved. cause update panel is being used alot for partial rendering.
I have the same problem with TabContainer disappearing after a click on a button outside of it when both the TabContainer and the button are contained in an UpdatePanel.
Are there any solutions for this problem yet?
I must have the button in same UpdatePanel as TabContainer, but visually below the container.
Thank you very much! This fixes the bug! Sorry for not searching forums thoroughly enough.
So I understand that we need to modify Tabs.js dispose method
to dispose : function() {
Sys.Application.remove_load(this._app_onload$delegate); // this is missing
AjaxControlToolkit.TabContainer.callBaseMethod(this, "dispose");
}
But how are you explicitly using the TabContainer to use this Javascript. I am using AjaxControlKit.dll with no source code.
So what I did is I copied Tab.js into my project and modified the dispose method. And for the tabcontainer , I pasted the path to this Tab.js in
ScriptPath property7.But then I am getting a Type 'AjaxControlToolkit.TabPanel' does not have a public property named 'System.Web.UI.Control'.
What am i doing wrong here.