Tab Content Disappears by Clicking on Active Tab

I am puzzled as to why the dynamically loaded content of an Active Tab disappears when I click on the Active Tab. But if I click on another Tab and go back to the previous tab the content appears.

<%@dotnet.itags.org.PageLanguage="C#"MasterPageFile="~/MasterPages/DeafaultMasterPage.master"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"Title="Default Page" %>
<asp:ContentID="Content2"ContentPlaceHolderID="cphBody"Runat="Server">
<scripttype="text/javascript"language="javascript">
function ActiveTabChanged(sender, e)
{
__doPostBack('<%= tcDefault.ClientID %>', sender.get_activeTab().get_headerText());
}
</script>
<ajaxToolkit:TabContainerID="tcDefault"runat="server"OnClientActiveTabChanged="ActiveTabChanged"
OnActiveTabChanged="ActiveTabChangedServer">
<ajaxToolkit:TabPanelID="tab1"runat="server"HeaderText="Info"EnableViewState="true">
<ContentTemplate>Dynamic content, load UserControl
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanelID="tab2"runat="server"HeaderText="tab 2"EnableViewState="true"/></ajaxToolkit:TabContainer>

Code Behind

protected void Page_Load(object sender, EventArgs e) { ScriptManager sm = ScriptManager.GetCurrent(this.Page); sm.RegisterAsyncPostBackControl(tcDefault); }  

protected void ActiveTabChangedServer(object sender, EventArgs e) {// Initialize Tab TabContainer tc = (TabContainer)CommonUtility.FindControlRecursive(this,"tcDefault");if (tcDefault.ActiveTab == tab1) { LoadControl1(tc); }if (tcDefault.ActiveTab == tab2) {//Do something in code LoadControl2(tc); } }

I noticed if I did the following;

protected void Page_Load(object sender, EventArgs e) { ReCreateTab(); }

The content in the tab sticks, but then the content is displayed twice. I know it has something to do with the ViewState, but not sure how to debug and what to read, I am new at this .Net and Ajax.

Any help would be appreciate.

Hi,

This is a FAQ regarding dynamic controls in asp.net. Please refer to this:

1. Why do I have to recreate dynamic controls every time? /Why dynamic controls are disappeared on PostBack?

Whenever a request comes, a new instance of the page that isbeing requested is created to serve the request even it's a PostBack. Allcontrols on the page are reinitialized, and there state can be restored fromthe ViewState in a later phase.

The dynamic controls have to be recreated again and added tothe control hierarchy. Otherwise, they won't exist in the page.

Please be careful with when to create dynamic controls. Inorder to keep their state, they have to be created before the LoadViewStatephase. Page_Init as well as Page_Load methods are options available.

For more information about this topic, please refer to thisarticle:

Creating Dynamic Data Entry User Interfaces[http://msdn2.microsoft.com/en-us/library/aa479330.aspx ]

Hope this helps.

Tab control .click() method problem

Hi there,

I have a problem with my tab control. due to the nature of the content of the third tab (a google map) i need to load that tab first (map doesn't centre properly if it is not the active tab - but that is a subject for another post...). However that is not the tab i want active when the page is renders it is actually the first tab with the summary info on that I want users to see first.

So a little bit of javascript the body OnLoad event fires off the tab panel header tab's .click() method. All fine and dandy in IE but FireFox and Opera don't want to play. I assume I am calling the method on the wrong control but it looked right from digging around in the .axd files. The offending line is below:

<

bodyonload="showFirstTab();">

<

scriptlanguage="javascript"type="text/javascript">function showFirstTab()

{

if (document.all("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab"))

{

document.getElementById(

"__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab").click();}

}

</script> Does anyone know the correct syntax, another way to achieve the same result or alternatively how to fix my Google map!

Also a good reference on the events (and order they fire) and methods would be really helpful.

Cheers,

Lucy

I believe the suspect line in your code that is causing problems is:

if (document.all("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab"))

Basically IE supports this, but FireFox (and some other common browsers don't). What you should do is something more like:

var ele=document.getElementById("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab");
if(ele)
ele.click();

Thanks for the reply. I had already discarded that line of code as bogus but even removing the if statement the .click() method does not work. The error returned is

the source line is:
document.getElementById("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab").click();

Error:
document.getElementById("__tab_ctl00_UserContent_AttractionTabContainer_SummaryInfoTab").click is not a function

Any thoughts?

Cheers,
Lucy

Alright, here is what I figured out. Basically, I was able to get it working in the SampleWebSite. But to do it I created a button:

<

inputtype="button"onclick="DoIt();"/>

And then script:

<script>
function

DoIt() {
document.getElementById('__tab_ctl00_SampleContent_Tabs_Panel3').click();
}
</script>

This actually worked. But when I tried to do it onload, it failed. It seems you can't do that (maybe the controls aren't loaded?). I then and the onload call setTimeout(XXXX, 100) and had it call the click event in the 100ms timeout, this worked. So now I'm REALLY convinced it's a timing issue. Hope this gives you some traction.

Hi guys,

In the first post, Lucy sad about a problem with GMAP and TabPanel (map doesn't centre properly if it is not the active tab).

Are there any solution for this issue?

Thanks for helps!

Wilder Lopes
WebDeveloper
Rio de Janeiro/Brazil

Hi guys,I'm afraid the solution was lateral thinking! i.e. ditch the AJAX toolkit tab container and write my own. This is simply some HTML tags to control layout,image buttons (with javascript for mouse events - ignore the intellisense errors the page will compile fine) to do the post backs and a multiview to control the content shown. This works great - no problems with google maps now! Another bonus is that that pages load far faster now since only the data for the relevant tab is rendered on request as opposed to all of them. The down side is that there is a server request every time the user clicks on a tab as opposed to a quick javascrip show / hide on the browser. For me with data rich pages (especially that Google map!) this works out fine.Sorry no solution using the tab container itself.Cheers,Lucy
Sorry forgot to add link to see it in action:See www.ideasforthekids.co.uk for this in action. Do a search and the tabs are on the attraction page (tab graphics are being improved as we speak). http://www.ideasforthekids.co.uk/attraction.aspx?attID=7d21af2f-7c88-4e9a-82c7-85b6b5797d53

Tab Control (Doubts)

Hi Everybody...

I have a two questions:

1 - How do it does a Tab Control of the a Tab Container (Ajax Control Toolkit) to load the content, when it will only called (clicked) ? Because i have some data-sources in my page, and this leaves the slow page! (Sample: The tab Related or Preview, this forum!)

2 - How do I do a window pop-up (with drag and drop), equal the window of Contact (Send Email) this forum ??? to do the window not to leave the area of the navigator outside.

Thank all!

Felipe Oriani:

up

If you look at the thread titled "TabContainer and ActiveTabChanged" it'll tell you how to go about this

Tab control wont see script manager on page

I have a master page setup. I have no Ajax controls in the masterpage at all, I am doing this purely in the content page. I am using Ajax 1.0 and the toolkit. I did install the CTP just in case it was looking for something there but it didn't help.

I am using a existing project that had no ajax setup originally. I edited the webconfig file and added all the relavent sections except the bit about IIS 7 which I am not using and the webservices which I am also not using.

I add a script manager and an update panel. The update panel is working perfectly. I then add a tab container and a tab panel from the toolkit and the tab panel gives me an error saying a script manager is required on the page. I tried moving the scriptmanager to the masterpage itself based on a few posts I saw here but it didn't make any difference.

Here is the source code. I removed most of the excess code so you could see the control placement without too much confusion.

<%

@dotnet.itags.org.PageLanguage="VB"MasterPageFile="~/Master1.master"AutoEventWireup="false"CodeFile="InvComputerRpt.aspx.vb"Inherits="Inventory_InvComputerRpt"title="IT Report" %>
<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>
<%@dotnet.itags.org.RegisterAssembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"Namespace="System.Web.UI"TagPrefix="asp" %>

<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">
<asp:ScriptManagerid="ScriptManager1"runat="server"></asp:ScriptManager>

<cc1:TabContainerID="TabContainer1"runat="server"></cc1:TabContainer>
<cc1:TabPanelID="TabPanel1"runat="server"></cc1:TabPanel><asp:MultiViewID="MultiView1"runat="server"ActiveViewIndex="0">
<asp:ViewID="View1"runat="server"><asp:UpdatePanelid="UpdatePanel1"runat="server">
<contenttemplate>
<asp:CheckBoxListid="CheckBoxList1"runat="server"></asp:CheckBoxList>
<asp:DropDownListid="ddlDept"</asp:DropDownList>
<asp:DropDownListid="ddlCat"runat="server"</asp:DropDownList>
<asp:GridViewid="GridView1"runat="server"></asp:GridView>
</contenttemplate>
</asp:UpdatePanel>

</asp:View>
</asp:MultiView>
</asp:Content>

Here's a version of your sample that runs fine in the SampleWebSite that comes with the Toolkit (note that TabPanel belongs inside TabContainer):

<%@. Page Language="C#" MasterPageFile="~/DefaultMaster.master" Title="Untitled Page" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><asp:Content ID="Content1" ContentPlaceHolderID="SampleContent" runat="Server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:TabContainer ID="TabContainer1" runat="server"> <cc1:TabPanel ID="TabPanel1" runat="server"> </cc1:TabPanel> </cc1:TabContainer> <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> <asp:View ID="View1" runat="server"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:CheckBoxList ID="CheckBoxList1" runat="server"> </asp:CheckBoxList> <asp:DropDownList ID="ddlDept" runat="server"> </asp:DropDownList> <asp:DropDownList ID="ddlCat" runat="server"> </asp:DropDownList> <asp:GridView ID="GridView1" runat="server"> </asp:GridView> </ContentTemplate> </asp:UpdatePanel> </asp:View> </asp:MultiView></asp:Content>

Hi David,

Thankyou, moving it between the container tags helped. I should have mentioned I was using Web Developer Express. I don't know if the behaviour is different in VS2005 but part of the problem was the designer not showing anything either so I didn't think it was working. Now I twigged that I am editing the source code to set my page up.

Regards

Victoria

Tab Panel displays content of other tab panel

I have a tab container with 4 tabs in it. One that is hidden from certain users. We will refer to this as tab panel 3. When you browse to the page as one of these users the tab control is displayed properly, without tab panel 3. You can select the other tab panels and their content is correct. In tab panel 4 there is a button that causes a post back. When you click on this button the content displayed in tab panel 4 is now the content from tab panel 2 and the content from tab panel 4. If you then select tab panel 1 you see the same behavior, it's content is that of tab panel 2 and tab panel 1. If you select tab panel 2 it seems to reset the tab panels and they all display with the proper content.

any ideas?

ok, the way that the one tab was hidden from certain users was that I left off the headertext for that tab. effetively keeping anyone from getting to it. For some reason this was causing the unexpected behavior.

Correct me from wrong, I guess we're trying to make a tab invisible conditionally using visible property. If yes, instead of using visible property, try to use Enable property to do so. Good luck.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

I saw this same behavior when I was dynamically adding tabpanels. 



I fixed this by wrapping the tabpanel content in updatepanels.

TabContainer and DynamicServicePath

I am using a TabContainer and I would like to display the content of an aspx file inside each TabPanel of the TabContainer. I tried this code :

<ajaxToolkit:TabContainerrunat="server"ID="Tabs"Height="600px"Width="600px">

<ajaxToolkit:TabPanelrunat="server"ID="Panel1"HeaderText="Product Groups"DynamicServicePath="~/ConfProductGroup.aspx"Visible="true">

<ContentTemplate>

</ContentTemplate>

</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanelrunat="server"ID="Panel3"HeaderText="Products"DynamicServicePath="~/ConfProduct.aspx"Visible="true"/>

</ajaxToolkit:TabContainer>

But the tabcontainer doesn't display the content of aspx pages (ConfProduct.aspx , ConfProductGroup.aspx) when I click on a TabPanel.

Hi Suzi,

If you want to contain an entire asp.net page inside a TabPanel, you will probably need to fetch it prgramatically.

This video will show you how to do it.

http://asp.net/learn/videos/view.aspx?tabid=63&id=120

Joe

Thank you Joe for your advice. I am trying to test with this solution.

I am trying a sample example as you advice me. I have a Master page and an aspx page named Ajaxtab.aspx. I have no error when I test the Ajaxtab.aspx without a Master Page File. But if I add a master page file. I have an unknown error . Below, you will find my code. Thank you.

ajaxtab.aspx :

<%@.PageLanguage="C#"AutoEventWireup="true"MasterPageFile="~/Site.master"CodeFile="Ajaxtab.aspx.cs"Inherits="Tests_Ajaxtab"Title="MediterrumWorks : Ajaxtab" %>

<%@.MasterType

virtualpath="~/Site.master" %>

<%@.Register

Assembly="AjaxControlToolkit"

Namespace="AjaxControlToolkit"

TagPrefix="ajaxToolkit" %>

<asp:Content

ID="MainContent"

ContentPlaceHolderID="MainContent"

Runat="Server">

<divid="ResultId0"style="background-color:Aqua;"/>

</asp:Content>

and my master page :

<%@.MasterLanguage="C#"AutoEventWireup="true"CodeFile="Site.master.cs"Inherits="Site" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headid="Head1"runat="server">

<title>Mediterrum Works</title>

<linkrel="stylesheet"type="text/css"href="ajax__calendar.css"/>

</head>

<body>

<scripttype="text/javascript"language="Javascript">

function showHideLogo(){

var topbanner=window.document.getElementById('topbanner');

var arrow_top=window.document.getElementById('arrow_top');

if(topbanner.style.display=="none"){

topbanner.style.display="block";

document.images["arrow_top"].src="images/top_arrow_hide.gif";

document.images["arrow_top"].style.height="7px";

}else{

topbanner.style.display="none";

document.images["arrow_top"].src="images/top_arrow.gif";document.images["arrow_top"].style.height="7px";

}

}

function updateTime()

{

var label = document.getElementById('<%= CurrentTime.ClientID %>');

if (label) {

var time = (new Date()).localeFormat(" d/MM/yyyy ");var time = time +" " + (new Date()).localeFormat(" HH:mm ");

label.innerHTML = time;

}

}

updateTime();

window.setInterval(updateTime, 1000);

// Select a collection of CheckBoxList clicking on a CheckBoxList

function SelectAllCheckboxes(spanChk, chbxID)

{

var theBox= (spanChk.type=="checkbox") ? spanChk : spanChk.children.item[0];

xState=theBox.checked;

elm=theBox.form.elements;

for(i=0;i<elm.length;i++)if(elm[i].type=="checkbox" && elm[i].id!=theBox.id)

{

var checkbox = elm[i];

// If a search parameter was passed in

if(chbxID)

{

// Check only thos checkboxes with an ID containing that parameter

if(checkbox.id.search(chbxID) != -1)

{

if(elm[i].checked!=xState)

elm[i].click();

}

}

// No search parameter, just check all checkboxes on the form

else

{

if(elm[i].checked!=xState)

elm[i].click();

}

}

}

</script>

<divid="container">

<formid="navtop"

runat="server"

style="margin: 0px">

<asp:ScriptManagerID="ScriptManager1"runat="server">

<Scripts>

<asp:ScriptReferencePath="WebRequest.js"/>

</Scripts>

</asp:ScriptManager>

<asp:HiddenFieldID="aspHFvisible"Value="true"runat="server"/>

<divid="topbanner">

<tablecellpadding="0"cellspacing="0"border="0"width="100%">

<tr>

<td>

<img

src="images/TerrumWorks.gif"

alt="Semantic Solutions"

style="margin: 0px"/>

</td>

<td>

</td>

<tdstyle="text-align: left">

<imgsrc="images/userOnline.gif"height="16px"width="16px"alt=""/>

<asp:LoginName

ID="LoginName2"

runat="server"/>

</td>

<tdstyle="text-align: right">

<asp:LoginStatus

ID="LoginStatus2"

runat="server"

LogoutAction="RedirectToLoginPage"/>

</td>

</tr>

</table>

</div>

<divid="div-menu">

<tablecellpadding="0"cellspacing="1"border="0"width="100%">

<tr>

<td>

<asp:UpdatePanelID="aspUpdPanGeneralMenu"runat="server">

<ContentTemplate>

<asp:Menu

DataSourceID="SiteMapDataSource1"

ID="Menu1"

runat="server"

CssClass="navmenu"

Orientation="Horizontal"

StaticTopSeparatorImageUrl="~/images/ToolSep.gif"OnMenuItemClick="Menu1_MenuItemClick">

<StaticMenuItemStyle

CssClass="menuitem"/>

<StaticSelectedStyle

CssClass="menuselected"/>

<StaticHoverStyle

CssClass="menuitemhover"/>

<DynamicHoverStyle

BorderWidth="1px"

CssClass="menuitemhover"/>

<DynamicMenuItemStyle

CssClass="menuitem"/>

</asp:Menu>

<asp:SiteMapDataSource

ID="SiteMapDataSource1"

runat="server"

ShowStartingNode="False"/>

</ContentTemplate>

</asp:UpdatePanel>

</td>

</tr>

</table>

</div>

<divid="toolbar"style="clear: both">

<tablewidth="100%"cellpadding="0"cellspacing="1">

<tr>

<tdalign="left"width="15%"style="border:solid 0px black">

<asp:UpdateProgressID="aspUpdProg"runat="server">

<ProgressTemplate>

<table><tr><td>

<imgalt="Please Wait"height="13px"src="images/progressbar_long.gif"/>

</td>

<td>

<asp:Labelrunat="server"Text="Loading ..."/>

</td>

</tr></table>

</ProgressTemplate>

</asp:UpdateProgress>

</td>

<tdalign="left"width="35%"style="border:solid 0px black">

<asp:contentplaceholder

id="ContentPlaceHolderToolbar"

runat="server">

<asp:UpdatePanelID="aspUpdToolBarMessage"UpdateMode="Conditional"runat="server">

<ContentTemplate>

<asp:Image

ID="imgErrorMessage"

runat="server"

ImageUrl="~/images/red-error.gif"

Visible="True"Height="12px"/>

<asp:Label

ID="lblErrorMessage"

runat="server"

Visible="True"

CssClass="ErrorMessage"/>

<asp:Image

ID="imgLblMessage"

runat="server"

ImageUrl="~/images/info.gif"

Visible="True"/>

<asp:Label

CssClass="Message"

ID="aspLblMessage"

runat="server"/>

</ContentTemplate>

</asp:UpdatePanel>

</asp:contentplaceholder>

</td>

<tdalign="center"width="25%"style="border:solid 0px black">

<imgid="arrow_top"onclick="showHideLogo()"alt=""height="7px"src="images/top_arrow_hide.gif"/>

</td>

<tdalign="right"class="rightTable"width="25%"style="border:solid 0px black">

<spanid="CurrentTime"runat="server"class="toolbartime"/> |

<asp:Label

ID="AppVersion"

runat="server"

CssClass="toolbarversion"/>

</td>

</tr>

</table>

</div>

<divid="content">

<!-- Starting region layout for Sample Window -->

<asp:contentplaceholder

id="MainContent"

runat="server">

</asp:contentplaceholder>

<!-- Ending region layout for Sample Window -->

</div>

</form>

<divid="footer">

<tablewidth="100%"border="0">

<tr>

<td>

<address>

<asp:Literal

ID="footeraddress"

runat="server"

Text="<%$ Resources:Resource, FooterCopyright %>">

</asp:Literal></address>

</td>

<tdalign="right"valign="bottom">

</td>

</tr>

</table>

</div>

</div>

</body>

</html>

Hi,

I can't see where in your page is implementing incremental page.

Can you watch the video again and implement a similar feature?

If it still fails, can you provide a simpler page with less elements but include the problem you have?

Additional tip, you can useiFrame to include another form in current page.

TabContainer + UpdatePanel + UpdateProgress + OnClientActiveTabChanged - No progress gif..

Hey all,

I'm using a combinaison of TabContainer + UpdatePanel + UpdateProgress + OnClientActiveTabChanged to dynamically load the content of each TabPanel on user selection.

Everything works fine except the UpdateProgress which does nothing!

I have written a ActiveTabChanged(sender, e) function do actually do a post back for the OnClientActiveTabChanged method. like this :

function ActiveTabChanged(sender, e) {__doPostBack('<%= TabContainer1.ClientID %>', sender.get_activeTab().get_headerText()); }

My problem at the moment is that it does not fire the UpdateProgress control.

I tried to add an hidden asp:button within each TabPanel and fire their event in javascript but as I realised, it only work for the Activated tab, since the Tab controls are not loaded until they are active...... which is after the OnClientActiveTabChanged....

Anyone have any idea of how this can be achieve ?

Many thanks

Rich

I was wondering if anyone knows where the poster above learned what properties/values were exposed by the "sender" parameter sent into the active tab changed event we can specify on the clientside. I did try the sender.get_activeTab().get_headerText() above and it does indeed work. I'm wondering what else is exposed via this parameter and if it is documented somewhere?

Thanks

TabContainer and OnActiveTabChanged

Hi,
I read a lot of posts about the OnActiveTabChanged event but I would like to know what would be the best way to load dynamically the content of the selected Tab.
Here's my needs.
I have a tabcontainer with 3 tabs and I want to load the content on fly when the user selects a tab (of course without reload the entire page).
If someone could post the right code, that will be great.

Thanks in advance.
Stan

I think the best way to do this is to:

1) Put an UpdatePanel around the TabContainer

2) Hook the ActiveTabChanged event

3) When it fires for a given tab, add the content in the postback

Note there is a known issue with the TabContainer in an update panel - it's a cosmetic issue where you can see it redraw on postback.

OK I sat down and did a sample of this that loads each panel when the user selects it.

http://blogs.msdn.com/sburke/archive/2007/06/13/how-to-make-tab-control-panels-load-on-demand.aspx

tabcontainer by code

i have a ajax tabcontainer

i add tabpanel by code but ,

for example if i have 5 tabs and one is updated content i wanna blink or change the color of tabheader that has been update

Note: that 1 or more tabs can be updated so x tabs must change the color of header or blink

Regards

zulurl

protected void Page_Init(object sender, EventArgs e)
{

AjaxControlToolkit.TabPanel tab = new AjaxControlToolkit.TabPanel();
tab.HeaderText = "test_new_tab";

TabContainer1.Tabs.Add(tab);

tab.Controls.Add(LoadControl("WebUserControl.ascx"));

AjaxControlToolkit.TabPanel tab2 = new AjaxControlToolkit.TabPanel();
tab2.HeaderText = "test_new_tab2" + System.DateTime.Now;

TabContainer1.Tabs.Add(tab2);

tab.OnClientClick = "js";
tab.BackColor = System.Drawing.Color.Red;

{

}

}
with another way how do i refer document.getelementbyid(->the tab added...??
TabID.ClientID

TabContainer designer

Hi,

Is there any way to design TabPanel content from VS2005 designer (not from source view)?

I don't know if it is possible to add TextBoxes, Buttons... to TabPanels from designer - currently I do that manually in source view which significantly slows my coding.

i.e. Is there any way to design AJAX TabContainer like I can design TabControl in windows apps (drag&drop other controls into tab panels)?.

TabDesigner support is not available. Seeissue 7483.

TabContainer in Accordion/CollapseExtender/UpdatePanel

I have a TabContainer within an accordion pane, which is inside an accordion (obviously), which is inside a (content) panel. I have a header panel, and the content and header panel are tied together using the CollapsePanelExtender. The idea is that the accordion will the hidden/shown when the user clicks on the header panel - as one would expect, as it's done with the CollapsePanelExtender. The problem is that the TabContainer does not "roll up" when the CollapsePanel is set to shrink. I have also added javascript code to hide the content panel, and set the content panel height to 0, but the TabContainer still shows up. The other accordion panes and all the other controls are hidden, only the TabContainer stays.

Has anyone else come across something like this? I am using AjaxControlToolkit v.1.0.10920.0.

Thanks,

Chris P

Hi,

I have tested it with the following code:

<%@. Page Language="C#" %>

<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="Server" />
<div class="demoarea">
<div class="demoheading">
CollapsiblePanel Demonstration</div>
<asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px">
<div style="padding: 5px; cursor: pointer; vertical-align: middle;">
<div style="float: left;">
What is ASP.NET AJAX?</div>
<div style="float: left; margin-left: 20px;">
<asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label>
</div>
</div>
</asp:Panel>
<asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0">
<ajaxToolkit:Accordion ID="Accordion1" runat="server">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Content>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
<ContentTemplate>
DYTGDFH
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</asp:Panel>
</div>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="Panel1"
ExpandControlID="Panel2" CollapseControlID="Panel2" Collapsed="True" TextLabelID="Label1"
CollapsedSize="0" ExpandedSize="300" AutoCollapse="False" AutoExpand="False"
ScrollContents="True" CollapsedText="Show Details..." ExpandedText="Hide Details"
ExpandDirection="Vertical" />
</div>
</form>
</body>
</html>

Works fine,no such problem. But I am using AjaxControlToolkit v.1.0.10301.0.

You can update to AjaxControlToolkit v.1.0.10301.0.

Best Regards,

TabContainer in Master Page, TabPanel in Content Page...does it work?

I just started a new project, and before I go wasting my time and energy on this concept, let me find out for certain. If in my Master Page, I declare a TabContainer, and between those opening and closing tags I put the declaration of the ContentPlaceholder, then in each Content page, the entireity of the content is inside a TabPanel...will that work? Can I do it that way at all, even if there have to be some workarounds? And if there are, what are those workarounds?

Appreciate any help anybody can offer!

Hi Ando,

Yes , you can do it like this .

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>
Tab1</HeaderTemplate>
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
<HeaderTemplate>
Tab2</HeaderTemplate>
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</form>

ContentTemplate works like a container(Div);

I hope this help.

Best regards,

Jonathan

Does this example only work on a certain AJAX.NET release (I'm current using release 10920)? It'll certainly be handy if this method worked :)

I've tried the above but I'm getting the following Exception:

System.Web.HttpException was unhandled by user code
Message="TabContainer cannot have children of type 'System.Web.UI.WebControls.ContentPlaceHolder'."
Source="AjaxControlToolkit"
ErrorCode=-2147467259
StackTrace:
at AjaxControlToolkit.TabContainer.AddParsedSubObject(Object obj) in d:\E\AjaxTk-AjaxControlToolkit\Release\AjaxControlToolkit\Tabs\TabContainer.cs:line 311
at System.Web.UI.Control.System.Web.UI.IParserAccessor.AddParsedSubObject(Object obj)
at ASP.presentation_masterpage_master.__BuildControlTabContainer1() in d:\Data\Visual Studio 2005\WebSites\PTOK\Presentation\MasterPage.master:line 16
at ASP.presentation_masterpage_master.__BuildControlform1() in d:\Data\Visual Studio 2005\WebSites\PTOK\Presentation\MasterPage.master:line 11
at ASP.presentation_masterpage_master.__BuildControlTree(presentation_masterpage_master __ctrl) in d:\Data\Visual Studio 2005\WebSites\PTOK\Presentation\MasterPage.master:line 1
at ASP.presentation_masterpage_master.FrameworkInitialize() in d:\Data\Visual Studio 2005\WebSites\PTOK\Presentation\MasterPage.master.cs:line 912306
at System.Web.UI.UserControl.InitializeAsUserControlInternal()
at System.Web.UI.UserControl.InitializeAsUserControl(Page page)
at System.Web.UI.MasterPage.CreateMaster(TemplateControl owner, HttpContext context, VirtualPath masterPageFile, IDictionary contentTemplateCollection)
at System.Web.UI.Page.get_Master()
at System.Web.UI.Page.ApplyMasterPage()
at System.Web.UI.Page.PerformPreInit()
at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

Hi SpaceToaster,

I have tested on V10920 and it works pretty well. Please make sure that you have put the sample code inside the Master.page and make the content page as simple as possible. For example,

<%@. Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %>

<script runat="server">

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<%=DateTime.Now.ToString()%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
2131
</asp:Content>

I hope this help.

Best regards,

Jonathan

Hi Jonathan,

I don't see how the code you posted above is the same as the original example you have shown.

The exception was thrown after I've placed a ContentPlaceHolder inside a TabContainer.

Thanks,

Hi Spacetoaster,

My first reply provide Master Page code and the second reply provide the Content Page code. So combine them will get a test sample.

Would you please test it on your machine? I have tested it on IE7 and Firefox2. Please make sure the TabContainer which contains aContentPlaceHolder is located inside the Master Page. If this doesn't work, please feel free to let me know with a simple repro which certainly can reproduce your issue.

Hope this help.

Best regards,

Jonathan

Hello Jonathan ;

I m using the same style as you replied in post 2 of this thread. I can add my one .aspx page in first Contentplaceholder1 but cant add second .aspx page in the second Contentplaceholder2 which is in second tab?

FYI: I have two pageload events in these two different pages? Do i have remove one ??

Hi Saqib_dotnet,

saqib_dotnet:

FYI: I have two pageload events in these two different pages? Do i have remove one ??

Yes, or one pageLoad function will be ignored.

Best regards,

Jonathan

So i have two different aspx file.

Tab1.aspx and Tab2.aspx files.

I will keep Page_Load Tab1.aspx and remove from the other, then how the other page will be processed with the first page? I mean what will invoke the Tab2.aspx functions?

REgards

Hi Saqib_dotnet,

UserControls located in the same page works as these functions & controls are put in the same page. So you can call the function directly.

saqib_dotnet:

I will keep Page_Load Tab1.aspx and remove from the other, then how the other page will be processed with the first page? I mean what will invoke the Tab2.aspx functions?

Please make sure that the right function name is pageLoad but not PageLoad or Page_Load. I suggest that you can change the pageLoad function to a common js fucntion (modify name) and remain them in the original place. Then , add pageLoad function to the end of the page, now we can call the other functions on pageLoad.

Best regards,

Jonathan

Hi Saqib_dotnet,

If you mean server side method, all Page_Loads will be executed. If it is a client side function(javascript function), you should usepageLoad function.

Best regards,

Jonathan

I thought we are talking about the Page_Load event handler function ?

Is there any other function pageLoad?

Hi Saqib_dotnet,

That's based on your implementation. I think you should add breakkpoints and find out the exact root cause.

Best regards,

Jonathan

First of all i never went so far where I worked with JS functions. All i m using is ScriptManager and it looks like, it is handling everything.

Now my question is: I created master page with two tabs like described above. Then added two different aspx pages to the ContentPlaceHolders respectively. Both pages are in two different files and both have server side Page_Load functions.

Now when i run theApplication, only my defult page get populated in first Tab but not the other page which should be populated in second Tab.

Where the problem is?

Also, I m trying to load the second tab when user clicks it? What should I do for this as well.

Regards