CollapsiblePanelExtender won't expand from code behind

Question

User2019633211 posted

Hi All-

I have a CollapsiblePanelExtender inside a nested repeater in an update panel like so:

UpdatePanel > ParentRepeater > ParentCollapsiblePanelExtender > ChildRepeater > ChildCollapsiblePanelExtender

The the collapsed state setting of the Child CPE is set to True.  When a certain condition is met in the code behind, I need to change that to False, so the the Child CPE is expanded.  I've tried the below code in just about every lifecycle event of the page and the controls.  

 For Each item In SearchResultsParentRepeater.Items

               
                Dim chldRptr As System.Web.UI.WebControls.Repeater = DirectCast(item.FindControl("SearchResultsChildRepeater"), System.Web.UI.WebControls.Repeater)

                For Each item2 In chldRptr.Items

                    'Get the Collapsible Panel Extender inside of the Repeater
                    Dim cpe As AjaxControlToolkit.CollapsiblePanelExtender = DirectCast(item2.FindControl("ChildCollapsiblePanelExtender"), AjaxControlToolkit.CollapsiblePanelExtender)

                    cpe.Collapsed = False
                    cpe.ClientState = "false"


                Next

            Next

  No matter what I try, the page renders the Child CPE collapsed however the collapse/expand image shows it as expanded.  When clicking to collapse/expand the first time, that image changes to the expand image.  Then it works fine after that.

In other words, it seems that the Child CPE collapsed property and client state were succesfully changed to False in the code behind, but it only worked on the collapse/expand image, not expanding the panel itself, almost as if the the ClientState is not being changed.

Does anyone know why this is happening?

Answer 1

User555306248 posted

Refer this - http://weblogs.asp.net/ashicmahtab/act-collapsiblepanelextender-how-to-collapse-expand-programmatically

Answer 2

User2019633211 posted

Thanks for your reply but I'm already setting both the collapsed property and the clientstate properties to false.  It seems to only have effect on the collapse/expand image which shows the panel should be open, but it's not, it's collapsed.  

Do you have any other suggestions?

Answer 3

User-417640953 posted

Hi BlogDog,

Thank you post the issue to asp.net forum.

There is a simple demo about collapsing or expanding CollapsiblePanelExtender in code behind.

<div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <asp:Panel ID="pnlTier" runat="server">
            <asp:ImageButton ID="Image1" Width="40" Height="40" runat="server" ImageUrl="~/Images/aaa.jpg" OnClientClick="return false;" AlternateText="(Show Details...)"/>
        </asp:Panel>
        
        <asp:CollapsiblePanelExtender ID="cpeDesc" runat="Server"
                                                TargetControlID="pnlBroker"
                                                ExpandControlID="pnlTier"
                                                CollapseControlID="pnlTier"
                                                Collapsed="true"
                                                ExpandedImage="~/Images/aaa.jpg"
                                                CollapsedImage="~/Images/eg_planets.jpg"
                                                ImageControlID="Image1"
                                                 /> 
        <asp:Panel ID="pnlBroker" runat="server" >

            Hello!
        </asp:Panel>
    </div>

code behind:

  protected void Page_Load(object sender, EventArgs e)
        {
            cpeDesc.Collapsed = false;
            cpeDesc.ClientState = "false";
        }

Similar issue with solutions, please check it below.

http://forums.asp.net/p/1439439/3270815.aspx

Hope this helps, thanks.

Best Regards!

Answer 4

User2019633211 posted

After stripping it down, I finally figured it out, it was the CSS.   As referenced at about the 3 min mark in this video by Joe Stagner,  the target panel's css class needs: 

height: 0px;
overflow: hidden;

Although he mentions it for another reason, it also worked for this situation so it appears the CPE control prefers that as the default and then adjusts behavior from there.

Thank you both for your help.

Answer 5

User-2139961791 posted

Thanks alot Blogdog!!!! You saved my day!!!!!