Wednesday, March 21, 2012

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,

No comments:

Post a Comment