AJAX TabContiners and UpdatePanels

Hi,

I have a page where I have an AJAX TabContainer stored within an UpdatePanel. When I view the page in either IE or FireFox the TabContainer's TabPanels aren't rendering correctly in that there is no clickable panel header or outline of the TabContainer. The controls I have placed in the tab panel appear okay however.

When I move the TabContainer out of the UpdatePanel everything is okay, however I need it to be in the UpdatePanel.

Has anyone else encountered this problem and if so is there a solution or should I just forget about using the TabContainer?

Thanks in advance.

Can you post the markup that you are using to do this.

I've used the same layout you mentioned before with no problem. I've used an updatepanel containing a tab container with tabs with no problem.

Hi

I have adapted the code in the attached blog by Shawn Burke which does demonstrate that a Tabcontainer in an update panel works and works well. Thanks to Shawn.

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

However, I do have another problem with the Tabcontainer and update panel using the methodology described in the blog. I can get the tabcontainer to work with formview but when I try a reportviewer with parameters I get Javascript errors. I created a test page without the javascript (parameters in onload event) and the reportviewer works fine.

The errors are:

'this.m_clientController' is null or not an object

and

'ClientControllerctl00_ContentPlaceHolder1_TabContainer1_...' is null or not an object

Appreciate any help with this.

Thankyou

Michael

Hi,

Here's my markup:

<asp:UpdatePanel id="updMaster" runat="server">
<ContentTemplate>
<div id="meEdit">
<asp:Panel ID="pnlME" runat="server" CssClass="ME">
<div class="meContainer" style="width:750px;">
<asp:UpdatePanel id="upMain" runat="server" >
<ContentTemplate>
<div class="meSelection" style="float:left; width: 100%; margin-left: 0px; margin-top: 0px; padding: 3px;">

<ajaxToolkit:TabContainer ID="tcVehicles" runat="server">

<ajaxToolkit:TabPanel ID="tpD" runat="server" >
<ContentTemplate>
<asp:Label ID="lblDV" runat="server"></asp:Label>
<br />
<asp:DropDownList ID="ddlDV" runat="server" />
<br />
</ContentTemplate>
</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanel ID="tpA" runat="server">
<ContentTemplate>
<asp:Label ID="lblAnalogueVehicles" runat="server"></asp:Label>
<br />
<asp:DropDownList ID="ddlAnalogueVehicles" runat="server" />
<br />
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel id="updMaster" runat="server">

Depending on the content of a session variable I will either show either both the tab panels or only one of them but the code that does this is executed after Page_Load.

Thanks for your help.

Hmm, I've dumped my markup into a separate project and it's fine.

Looking at what I've got in place I think the problem may be due to my hiding the panel which contains the tab container at page_load and then showing it from a button click.