AJAX Toolkit - Collapsible Panel Extender

I’ve been working with a client web application over the past few weeks, and have been integrating extensive reporting capabilities into the application. Each report has a unique set of controls used to gather parameters from the user. After struggling with how to implement several reports in a single page without the page looking like user control vomit, I decided to use a handy AJAX tool – the collapsible panel extender. It allows me to hide and show controls seamlessly based on the report a user selects.

Here’s how to use the AJAX collapsible panel extender:

Install the AJAX toolkit – you’ll usually want to put this in the Bin folder in your project. (http://www.codeplex.com/AjaxControlToolkit/Release/ProjectReleases.aspx?ReleaseId=16488) The rest of the details on setting up your project to use AJAX can be found at http://www.asp.net/ajax/ajaxcontroltoolkit/samples/

Below your @Page directive, add:

<%@ Register Assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1"%>

If you’re working with a master page, you will create a content region in your aspx page. Be sure to add a script manager to the top of the page if you don’t have one included in the master:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

Within the content region, I also create a <div> tag to hold my collapsible panel and its contents. Then within the div tag we add the collapsible panel extender using the tag prefix that’s been defined in our @register directive above:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<div>

<cc1:CollapsiblePanelExtender

ID="cpeMyPanelExtender”

runat="server"

TargetControlID="cntPanel"   

ExpandControlID="ttlPanel"

CollapseControlID="ttlPanel" 

Collapsed="True"

ImageControlID="imgTitlePanel" ExpandedImage="~/images/CollapsiblePanel/collapse_blue.jpg" CollapsedImage="~/images/CollapsiblePanel/expand_blue.jpg"

                        SuppressPostBack="true” />

The TargetControlId Property specifies what will be exposed when the panel is expanded. The ExpandControlID and the CollapseControlId specify which control will dictate when the contents are exposed and hidden. In this case, we’re using a title panel. When the title of the report is selected, the contents will be exposed. To collapse the panel, the user can simply click the title again. The ImageControlId allows the user to click an image to expand and collapse the panel. In this example I’m using an image that changes depending on whether the panel is expanded or collapsed.

Next we need to create the title and content panels that we’re referencing in the collapsible panel properties (cntPanel, ttlPanel).

<asp:Panel ID="ttlPanel" runat="server">

<asp:Image ID="imgTitlePanel" runat="server" ImageAlign="Right"

ImageUrl="~/images/CollapsiblePanel/expand_blue.jpg" />

</asp:Panel>    

<asp:Panel ID="cntPanel" runat="server" Height="0px" style="overflow: hidden;">&nbsp;

<div align="center">

<PLACE COLLAPSIBLE PANEL CONTENTS HERE>

</div>

</asp:Panel>

</div>

The height property for the content panel is set to 0px and style to overflow: hidden to prevent any screen flickering from occuring in the panel when the page renders.