Wednesday, December 3, 2008

Sharepoint (MOSS 2007): Ajax Control Toolkit CollapsiblePanel Extender not working within Update Panels.

Sharepoint (MOSS 2007): Ajax Control Toolkit CollapsiblePanel Extender not working within Update Panels.

The issue we were facing when using the Ajax Control Toolkit CollapsiblePanelExtender (.Net 3.5) within an update panel was that the 'Content Panel' targeted by the CollapsiblePanelExtender was not getting collapsed. The content in the collapsible panel was visible in both the expanded and the collapsed state of the CollapsiblePanelExtender.

Aspx Markup:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"

TargetControlID="ContentPanel"

ExpandControlID="TitlePanel"

CollapseControlID="TitlePanel"

Collapsed="True"

TextLabelID="LabelToggle"

ExpandedText="(Hide Details...)"

CollapsedText="(Show Details...)"

SuppressPostBack="false" />

<asp:Panel ID="TitlePanel" runat="server" CssClass="collapsePanelHeader">

<asp:Label ID="LabelToggle" runat="server">(Show Details...)</asp:Label>

</asp:Panel>

<asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel">

I am the Content Panel

</asp:Panel>

The ‘Content Panel’ does not collapse and is always visible. This seems to be happening only when the page is embedded in a Sharepoint site.

Quick Fix/Solution:
Inside the ‘Content Panel’ place everything inside a div and add the following style to the div style="height:0px;position:absolute;"

The ‘Content Panel’ should look like:

<asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel" style="height:0px;position:absolute;">

I am the Content Panel

</asp:Panel>

Everything works as expected now. Cheers…
Ashish Sharma

1 comment:

kmhsad said...

Hi Ashish Sharma,
I face with another problem after i have updated my collapsiblepanel code with yours. I have another control called "gridview1" under "ContentPanel". When i expend "ContentPanel" which is override the "gridview1". When i remove this "position:absolute;", it will not override it but "ContentPanel" is not collapsed.
Do you have any idea for this ? Any suggestion will be appreciated.
I create one usercontrol,is embedded custom user control loader web part, which has one AJAX Tab Control. Under this, one update panel "UpdatePanel". and "TitlePanel", "ContentPanel" and "gridview1" are under "UpdatePanel".

Thanks.