Monday, January 28, 2008

How-To Auto Collapse Microsoft AJAX Collapsible Panel

Here's a quick tip on how to automatically collapse a Collapsible Panel through code. This is useful in a situation such as having a Collapsible Panel that contains a few controls used in data entry and once the user has entered the data and clicked on a button to submit their data you want the panel to collapse automatically.

You would think that just performing a (control name) CollapsiblePanelExtender1.collapse = True would collapse the panel; however, this will not work by itself. This is due to the fact that there is a short delay between the first rendering of the page and the running of the Javascript to modify it. To have the panel collapse you will need to add one more line, so your code will look like this.

CollapsiblePanelExtender1.Collapsed = True;
CollapsiblePanelExtender1.ClientState = "true";
You can also prevent the PopControlExtender from briefly showing controls it contains by placing the controls within a Panel Control and setting the Panel Control's visibility style to hidden. This will stop the annoying flickering that happens when the page is first rendered.


Isaac said...

Awesome. Thanks a million!

Anonymous said...

Wow, thanks for that, just what I was looking for.

deap said...

Great, that what was I needed only the other way around, I needed to auto rxpand... However, could you please explain solving the flicker experience that I too get. I dont quite get how you mean.

Lance Spence said...

You would just need to add the following to your panel control:

asp:panel ID="Panel1" runat="server" Height="100px" Width="200px"
style="visibility: hidden"

Anonymous said...

You are not a developer.


lolz thx

Anonymous said...

Thank you!

Lance Spence said...

I'm glad you found it helpful.

Buck said...

Does anyone have the code to 'open' the panel with a button click? C#.

Also, when I close the panels there is a full page flash/refresh. Anyway to make a clean closing motion instead?