Looking for a JavaEE Architect or Potential Tech Co-Founder?
Please don't hesitate to contact me.

Programmatically collapse CollapsiblePanelExtender

Recently I was having a problem to collapse/uncollapse a collapsiblepanelextender programmatically.

Normally the code should be:
  cpe.ClientState = "false";
  cpe.Collapse = false;

But this time the button that would trigger the event to un collapse the panel is inside an UpdatePanel, with a Trigger defined.

It's like this:
aspx code:
<asp:Panel ID="update_container" runat="server">
        <asp:UpdatePanel ID="updatePerson" runat="server">
            <ContentTemplate>
    Hello World
   </ContentTemplate>
            <Triggers>
                <asp:PostBackTrigger ControlID="btnSubmit" />
            </Triggers>
        </asp:UpdatePanel>
    </asp:Panel>
    <asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server"
        TargetControlID="updatePerson">
        <Animations>
            <OnUpdating>
                <Sequence> 
                    <Parallel duration="0">
                        <EnableAction AnimationTarget="btnSubmit" Enabled="false" />
                        <EnableAction AnimationTarget="effect_color" Enabled="false" />
                        <EnableAction AnimationTarget="effect_collapse" Enabled="false" />
                        <EnableAction AnimationTarget="effect_fade" Enabled="false" />
                    </Parallel>
                    <Parallel duration=".25" Fps="30">
                        <Condition ConditionScript="effect_fade">
          <FadeOut AnimationTarget="update_container" minimumOpacity=".2" />
      </Condition>
     </Parallel>
                </Sequence>
      </OnUpdating>
      <OnUpdated>
                <Sequence>
                    <Parallel duration=".25" Fps="30">
                        <FadeIn AnimationTarget="update_container" minimumOpacity=".2" />
                    </Parallel>
                    <Parallel duration="0">
                        <EnableAction AnimationTarget="effect_fade" Enabled="true" />
                        <EnableAction AnimationTarget="effect_collapse" Enabled="true" />
                        <EnableAction AnimationTarget="effect_color" Enabled="true" />
                        <EnableAction AnimationTarget="btnSubmit" Enabled="true" />
                    </Parallel>       
                </Sequence>
            </OnUpdated>                  
        </Animations>
    </asp:UpdatePanelAnimationExtender>
 <asp:Panel ID="pnlTwo" runat="server">
  This panel should un collapse.
 </asp:Panel>
    <asp:CollapsiblePanelExtender ID="cpeMemberInfo" runat="server" TargetControlID="pnlTwo"
        ExpandedText="Personal Information" CollapsedText="Personal Information" Collapsed="True"
        AutoExpand="True" Enabled="True">
    </asp:CollapsiblePanelExtender> 

.cs code:
protected void BtnSubmitClick(object sender, EventArgs e)
        {
            if (IsValid)
            {
                Thread.Sleep(1000);

                cpeMemberInfo.ClientState = "false";
                cpeMemberInfo.Collapsed = false;
                cpeMemberInfo.AutoExpand = true;
            }
        }

But it doesn't work, the reason is because updatepanel is updating asynchronously: AsyncPostBackTrigger.

So we need to update the UpdatePanel's Trigger to:
<asp:PostBackTrigger ControlID="btnSubmit" />

That change would usually do the trick.
Programmatically collapse CollapsiblePanelExtender Programmatically collapse CollapsiblePanelExtender Reviewed by Edward Legaspi on Tuesday, November 30, 2010 Rating: 5

No comments:

Powered by Blogger.