Click here to Skip to main content
15,120,883 members
Articles / Web Development / ASP.NET
Posted 25 Nov 2005


93 bookmarked

ASP.NET Collapsible Draggable Panel Server Control

Rate me:
Please Sign up or sign in to vote.
4.54/5 (16 votes)
25 Nov 20053 min read
ASP.NET Collapsible Draggable Panel Server Control.

Collapsible panel


This article describes a simple collapsible panel control for ASP.NET. This is a server side control, therefore you can add it to the Visual Studio toolbox and re-use it in your projects.

The collapsible panel extends the WebControl and it provides:

  • A designer where users can place other controls inside (using the default ReadWriteControlDesigner).
  • The collapsible panel can be nested.
  • The panel is draggable (all the JavaScript code related to dragging is provided by Tim Taylor, visit him!).

Some other properties also allow it to be used as a simple yet useful control in your project.

Code Description for the Collapsible Panel

The collapsible panel at run time is none other than a table with two rows inside a <div>. The first row has the panel header and the image. The second row is the row that contains the other controls added by the user. A client side script will hide the second row upon clicking either the image or the header.

[User content goes here]

The CreateContainerControls() method creates the outermost table. It gives a uniqueID for the second row of the table (where the user content goes) so it can be accessed by JavaScript to collapse/expand. Because the control can be nested it is required to implement the INamingContainer interface which will make sure that we get unique namespaces when addressing nested controls. This method initially sets the second row's display style to PanelState.Collapsed or PanelState.Expanded as the initial state.

CreateHeaderControls() and CreateTitle() methods create the title and the image. Depending on the properties set, the onClick JavaScript is added to the image and/or the title using Attributes.Add("onClick",GetOnClickScript()).

Render() and RenderChildren() methods render the controls HTML and any user added controls/HTML to the browser.

The IPostBackDataHandler interface has been implemented to capture the postback data and to raise the control's PanelStateChanged event.

The overridden OnPreRender(EventArgs e) method checks and registers the client side JavaScript which does the actual expand/collapse.

For users to be able to design the panel visually, the control implements the ReadWriteControlDesigner. The designer which is being used by the control is defined by applying the attribute [Designer("System.Web.UI.Design.ReadWriteControlDesigner, System.Design")] to the class definition. However, by using this designer users won't be able to see the header part of the panel at design time. If you implement a designer using ControlDesigner, then it is possible to show the complete panel on the designer, but it doesn't allow you to add controls visually. Considering the options, I opt for ReadWriteControlDesigner because it lets users to visually layout the controls inside the panel. May be there is a way to use ReadWriteControlDesigner while rendering your custom HTML to the designer surface (so you can show the title/image as well). If anybody comes across how to do this, let me know.

To render HTML at runtime, I use the classes from the framework like Table, TableRow etc... However, if you use a StringBuilder and create the HTML tags it would be much faster. For readability, I leave it as it is.

If the Draggable property is set, the control emits the startup JavaScript which is defined as a constant in C_DRAGGABLE_REGISTRATION. For this to work you have to include four JavaScript files in the header of the page (check the demo project). You may want to embed JavaScripts as resources and then emit them at runtime (home work).

The properties are pretty much self-explanatory. Hope, this will be of some use. If any bugs are found, let me know. Better yet, correct them and let me know :) Any comments are much appreciated.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Sri Lanka Sri Lanka
No Biography provided

Comments and Discussions

Generalpanelstate change not working Pin
abhijeetgk5-Jun-08 2:11
Memberabhijeetgk5-Jun-08 2:11 
GeneralImage disappears when clicked Pin
Ceyeber26-Nov-07 14:00
MemberCeyeber26-Nov-07 14:00 
GeneralRe: Image disappears when clicked Pin
Ceyeber26-Nov-07 14:28
MemberCeyeber26-Nov-07 14:28 
Questionquestion Pin
nano2423-Jun-07 2:42
Membernano2423-Jun-07 2:42 
GeneralCollapsible not working Pin
Karthik Radhakrishna16-Jan-07 20:35
MemberKarthik Radhakrishna16-Jan-07 20:35 
GeneralLoses state on postback Pin
adrien_t13-Dec-06 6:34
Memberadrien_t13-Dec-06 6:34 
GeneralRe: Loses state on postback Pin
Jozef A. Habdank12-Feb-09 1:35
MemberJozef A. Habdank12-Feb-09 1:35 
Question.Net 2.0 Support Pin
Lou Flees19-Oct-06 5:29
MemberLou Flees19-Oct-06 5:29 
AnswerRe: .Net 2.0 Support Pin
granadaCoder27-Feb-07 13:28
MembergranadaCoder27-Feb-07 13:28 
QuestionProblems with the Expand - Collapse Image [modified] Pin
Checho767-Jul-06 18:56
MemberChecho767-Jul-06 18:56 
Generalproblems when dragging the panel over an image Pin
JohannesE30-May-06 5:10
MemberJohannesE30-May-06 5:10 
QuestionPanel drag is not working Pin
jayaveer_b318-Apr-06 22:22
Memberjayaveer_b318-Apr-06 22:22 
GeneralCatch Text box Pin
nitin_ion11-Jan-06 20:42
Membernitin_ion11-Jan-06 20:42 
GeneralSmart Scrolling Pin
Arnold Terrence Smith27-Dec-05 13:08
MemberArnold Terrence Smith27-Dec-05 13:08 
GeneralRe: Smart Scrolling Pin
moditha27-Dec-05 16:45
Membermoditha27-Dec-05 16:45 
GeneralRe: Smart Scrolling Pin
Arnold Terrence Smith28-Dec-05 5:41
MemberArnold Terrence Smith28-Dec-05 5:41 
GeneralRe: Smart Scrolling Pin
wujm7-Feb-06 15:02
Memberwujm7-Feb-06 15:02 
QuestionMozilla support? Pin
duwke8-Dec-05 7:35
Memberduwke8-Dec-05 7:35 
AnswerRe: Mozilla support? Pin
duwke8-Dec-05 8:13
Memberduwke8-Dec-05 8:13 
GeneralRe: Mozilla support? Pin
moditha8-Dec-05 16:35
Membermoditha8-Dec-05 16:35 
AnswerRe: Mozilla support? Pin
jlogin13-Feb-06 12:45
Memberjlogin13-Feb-06 12:45 
NewsExcellent !! Pin
Tittle Joseph28-Nov-05 23:46
MemberTittle Joseph28-Nov-05 23:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.