Working with CollapsiblePanel Ajax Control
 
Published: 23 Oct 2007
Abstract
This article examines how to use the ASP.NET AJAX Control named CollapsiblePanel with the help of a project.
by Nidal Arabi
Feedback
Average Rating: 
Views (Total / Last 10 Days): 90324/ 117

Introduction

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.

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;
      height:0px;
      background-color:white;
      overflow:hidden;
}
 
.collapsePanelHeader{   
      width:640px;            
      height:20px;
      color: Yellow;
      background-color: Black;
      font-weight:bold;
      float:none;
      padding:5px; 
      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" 
    CollapsedImage="images/expand_blue.jpg"
    Collapsed="True" SuppressPostBack="true">
</ajaxToolkit:CollapsiblePanelExtender>

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.

Downloads

Summary

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



User Comments

Title: df   
Name: dfg
Date: 2012-12-06 6:40:59 AM
Comment:
fdg
Title: Great Article   
Name: Soan
Date: 2012-09-12 8:38:20 AM
Comment:
Not sure if there is a sample image/screen shot of the collapsible panel at the top of article or not. I am not able to see any image (may be it is blocked).
Two things that i have in mind:
1. Can we change the text that is displayed on the header (like Expand/Collapse) dynamically from code behind?
2. I want to remove the scroll bars (horizontal). They are shown when collapsible panel is expanded even when i have set the scroll attribute to False.

Any suggestions?
Title: Software Engg   
Name: Ajaz Ali
Date: 2011-04-11 2:25:20 AM
Comment:
Its Great ..Thanx dude
Title: check this link   
Name: Ajay pal
Date: 2010-12-20 6:24:22 AM
Comment:
Hi, this is nice article
check this link related to this topic

http://www.mindstick.com/Articles/d357451a-b6eb-4ce1-9368-064c143e5232/?Ajax Toolkit CollapsiblePanelExtender Control in ASP.Net
Title: Sr Software Engineer   
Name: Syed Shahzad Ali
Date: 2010-08-12 4:12:54 AM
Comment:
Thanks for writting such knowledgable article.
Thanks once again.

Syed Shahzad Ali
Sr.Software Engineer
Express News
Pakistan-Karachi
Title: Fresher   
Name: Rajesh
Date: 2010-06-21 6:19:28 AM
Comment:
It's Very useful....thanks
Title: web developer   
Name: Grady Christie
Date: 2010-05-21 4:03:04 PM
Comment:
This is an excellent article. Got me up to speed in no time. Thanks for submitting.
Title: (Fresher) developer   
Name: Laxmi
Date: 2010-04-14 2:56:10 AM
Comment:
Thanks, its very helpful...
Title: web developer   
Name: mallesh
Date: 2010-03-24 3:32:58 AM
Comment:
usefull one for me its clear
Title: Programmer Analyst / Lockheed Martin   
Name: Josh Yates
Date: 2010-02-18 8:22:04 AM
Comment:
Very good. Thanks for taking the time to post this helpful tip.
Title: Sr Software Developer   
Name: Tom Maldonado
Date: 2010-01-21 5:01:57 PM
Comment:
Thanks for this article and download
Title: Thanks   
Name: VS
Date: 2010-01-21 11:24:27 AM
Comment:
Thanks... a really useful quick start guide.
Title: Thanx   
Name: KA
Date: 2009-12-28 3:41:41 PM
Comment:
Very usefull.
Title: Text   
Name: 9849363030
Date: 2009-12-23 2:34:38 AM
Comment:
Thank you very much.
Title: Thanks   
Name: JJ Viz
Date: 2009-10-23 5:34:15 PM
Comment:
Just what I was looking for !!! Thank you.
Title: Thanks   
Name: Daniel Zhe
Date: 2009-10-05 9:19:11 PM
Comment:
Thank you very much for share you knowledge.

That was very useful.
Title: Thanks   
Name: Dietmar
Date: 2009-09-08 6:52:00 AM
Comment:
Hi!
Thank you very much. It is very useful.
Title: AJAX   
Name: Shankar
Date: 2009-07-03 3:21:47 AM
Comment:
This is very excellent articles basically whoever going to explore with AJAX and .Net
Title: ghg   
Name: Gaurav
Date: 2009-06-29 7:16:55 AM
Comment:
Very good
Title: Absoulutely fine   
Name: Manoj(MCA)
Date: 2009-06-11 3:45:31 AM
Comment:
Hey,
Thank you very much.it is really very useful.and you have described it with a easy pattern so it provides us easily understandable. thank u thank u veru much
Title: thanks   
Name: harsh(MCA)
Date: 2009-05-20 4:54:26 PM
Comment:
thanks 4 it.its really very useful.
Title: This is a very very good article   
Name: Athula
Date: 2008-11-15 7:43:34 AM
Comment:
Hi
Thank you very much for posting sucu a valuable article. I was searching for 2 days for step by step guide how to start woeking with simple AJAX program and this is the best one and I manage to run in the first try. Thanks again and great work. Please keep on posting.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-09-20 12:33:16 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search