LogoASPAlliance: Articles, reviews, and samples for .NET Developers
Working with CollapsiblePanel Ajax Control
by Nidal Arabi
Average Rating: 
Views (Total / Last 10 Days): 59235/ 65


If you wanted to have a formatted text sensitive area that you can format as you like, it will not be a simple hyperlink. In addition, that text sensitive area should be able to expand and collapse dynamically with nice visual effects. You are speaking about a CollapsiblePanel that I am going to explain in this article.

About the control

Enriching your web page with AJAX has never been easier. It is as simple as adding one control and specifying some properties. Please note that we are only dealing with an extender and we always need a panel to complete the extender. Want to know how to do this? Then proceed with ensuring you have the requirements.


In order to be able to work with ASP.NET AJAX Control Toolkit, the following should be available:

·         Microsoft Visual Studio 2005 (any version) or you can also use the free of cost Visual Web Developer Express 2005

·         Download ASP.NET 2.0 AJAX Extensions and install them on your computer after installing Visual studio 2005.

·         Download ASP.NET AJAX Control Toolkit and install it on your computer after installing Visual studio 2005 and AJAX Extensions. You can also download the Toolkit directly from CodePlex project site.

·         After the completion of installation, open Visual Studio 2005 or Visual Web Developer and add a tab in the Toolbox named AJAX Toolkit.

·         Right Click in this tab and choose add items. Browse to the sample directory of where you did extract the Toolkit, then to bin directory and choose the file named AjaxControlToolkit.dll.

·         This is all. You have installed AJAX Control Toolkit and you can start building your controls.

Creating Your CollapsiblePanel Sample Solution

Follow the easy steps below to create your solution.

1.    Start your Visual Studio 2005 IDE.

2.    Choose Create Web Site from the menu.

3.    In this sample application we will use the Visual Basic language for the sample application.

4.    Name the solution CollapsiblePanelSample.

5.    Choose ASP.NET AJAX Control Toolkit Web Site.

6.    Choose File System in the location box.

7.    Click ok to create the project.

8.    Visual Studio will create your project with a Default.aspx page and most likely a readme.txt. Go ahead and get rid of the latter file.

9.    Open Default.aspx page in design view.

10. You noticed that there is a control on the page already called script manager. (Well, AJAX is really a script based implementation of the language JavaScript). In short, ScriptManager Control manages client script for Microsoft ASP.NET AJAX pages. By default, the Script Manager control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial-page rendering and Web-service calls.

11. Now you have to fill your page with some text. In order to do so, take Listing 1 and copy and paste it many times inside the div tag within the default.aspx page when in source mode.

12. Create a new item in the solution of type Style Sheet and leave the default name.

13. Listing 1 contains the style sheet content that should be placed inside the file. You can copy and paste directly.

Listing 1- Style Sheet Content for our example

.collapsePanel {
      width: 640px;
      color: Yellow;
      background-color: Black;
      cursor: pointer; 
      vertical-align: middle;

14. Go to the source mode, and click and drop the style sheet file into the header section of the default web form in order to be able to reference it.

15. Now, drag two panels from the standard toolbox and drop them on the page.

16. Name the first panel PnlTitle and delete the height and width specs then create a CssClass tag with value collapsePanelHeader like in listing 2.

Listing 2- Title Panel and Content Panel Format

<asp:Panel ID="PnlTitle" runat="server" CssClass="collapsePanelHeader">
<asp:Panel ID="PnlContent" runat="server" CssClass="collapsePanel">

17. Name the second panel PnlContent and delete the height and width specs then create a CssClass tag with value collapsePanel like in the above listing.

18. In the title panel add an asp image standard control (it is necessary to use the image asp control in order to be able to control it afterwards). Make the image url point to an image that you create with a down arrow (call the image collapse_blue.jpg to be able to use it later). Also, create another image with an up arrow (call the image expand_blue.jpg to be able to use it later).

19. After the image control, add a text in bold that says: Who Am I?

20. Now drag a label and make the text tag Show Details (…)

21. Please fill the content panel with some information about yourself in any html format.

22. Place the cursor after the script manager html end tag. From the Toolbox drag a Collapsible Panel control and set the properties as specified in Listing 3.

Listing 3- Collapsible Panel Extender specs

<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" 
    runat="server" TargetControlID="PnlContent" ExpandControlID="PnlTitle" 
    CollapseControlID="PnlTitle" TextLabelID="Label1" 
    CollapsedText="Show Details (...)" ExpandedText="Hide Details (...)" 
    ImageControlID="Image1" ExpandedImage="images/collapse_blue.jpg" 
    Collapsed="True" SuppressPostBack="true">

23. Please note that some of these properties cannot be specified using the normal properties window. The target control ID specifies the control to collapse and extend (the content panel in our case).

24. The Expand Control ID specifies the control that is going to control the expansion (the title panel in our case).

25. The Collapse Control ID specifies the control that is going to collapse the panel (the title panel in our case).

26. Please note that you can specify two different controls to collapse and expand.

27. The Text Label ID specifies that label that is going change its text caption when the user collapses or expands the panel.

28. The same description applies the Image Control ID, but the image is going to change.

29. The Collapsed Text tag specifies the text that should appear when the panel is collapsed.

30. The Expanded Text tag specifies the text that should appear when the panel is extended.

31. The Expanded Image tag specifies the image to display when the panel is expanded.

32. The Collapsed Image tag specifies the image to display when the panel is collapsed.

33. The Collapsed tag specifies the state of the content panel when the page loads.

34. The Suppress Post Back tag specifies that when expanding the panel, there should be no posting to the server or not. In our case and since our content is fixed and not changing, we did set this property to true.


I hope you enjoyed working with CollapsiblePanel AJAX Control. Happy AJAXfying and see you in the next article.

©Copyright 1998-2021  |  Page Processed at 2021-11-26 11:04:36 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search