Click here to Skip to main content
Click here to Skip to main content
Go to top

Reusable Collapsible Panel for Web

, 29 Jun 2003
Rate this:
Please Sign up or sign in to vote.
A reusable collapsible panel user control for web applications

Introduction

This is a reusable Collapsible Panel user-control for web applications.

Background

Often we encounter web pages that run very long and it becomes difficult for the user to navigate down, dragging his mouse along all the way. So, when we want to display all the stuff on the same page and still keep it easy for the user, we could group pieces of related information into a collapsible panel. This is what got me working on this user-control.

This control is very easy to use. The control exposes some public properties to set the data, look 'n' feel and events for the panel. By setting these properties, the collapsible panel can be used to group information very nicely. Also, we could extend it to add any control to the panel.

Using the code

The user control is divided into 3 regions - header, body and footer.

  • The header region contains the clickable image (for expand/collapse functionality) and the title for the panel.
  • The body contains the controls that would encapsulate the information to be displayed in the panel.
  • The footer has the buttons for navigation.

The user control exposes methods to add titles, controls and buttons to the panel. It also exposes properties to set the look 'n' feel of the panel. To use the panel in your web page, you need to instantiate it and set the required properties as shown below.

ucMyColPanel1.TableWidth = Unit.Pixel(500);

ucMyColPanel1.AddTitle();
ucMyColPanel1.HeaderClass = "alertHeader";
ucMyColPanel1.HeaderTitleText = "Descriptions";

ucMyColPanel1.AddDataGrid();
ucMyColPanel1.DGItemClass = "dgItem";
ucMyColPanel1.DGHeaderClass = "dgHeader";
ucMyColPanel1.DGAlternatingItemClass = "dgAlternatingItem";
ucMyColPanel1.DGGridLines = GridLines.None;
ucMyColPanel1.DGWidth = Unit.Percentage(70);
ucMyColPanel1.DGCellPadding = 2;
ucMyColPanel1.DGCellSpacing = 1;
ucMyColPanel1.DGDataSource = m_oDescriptionDS;
ucMyColPanel1.DataBindGrid();

ucMyColPanel1.AddButton();
ucMyColPanel1.myButton.FooterButtonText = "Add Description";
ucMyColPanel1.myButton.FooterButtonClass = "flatFormElement";
ucMyColPanel1.myButton.ClickEvent += new System.EventHandler(this.btn1_click);

ucMyColPanel1.AddFooterSpacer();

ucMyColPanel1.AddButton();
ucMyColPanel1.myButton.FooterButtonText = "Cancel";
ucMyColPanel1.myButton.FooterButtonClass = "flatFormElement";
ucMyColPanel1.myButton.ClickEvent += new System.EventHandler(this.btn2_click);

To get the project working you will need to place the images and includes folders in your wwwroot directory or in your home directory (if it is different from wwwroot). Also place the usercontrols folder inside the project "MyCollapsiblePanel" folder. Set "TestMyColPanel.aspx" as the start-up page. Now you are ready to run and debug the code!

Points of Interest

The best part of this exercise was that I learnt how to effectively expose a control's event without exposing the control itself!

I was faced with the problem of attaching event handlers to different buttons that could be added to the collapsible panel. I started off with declaring an event in my usercontrol which would be fired when a (any) button is clicked. The event was a public event to which the user could attach event handlers from outside. For testing, I did a page redirection in the event handlers. But all button clicks seemed to take me to the same page, irrespective of which button was clicked. What was happening was that the event handler was not getting chained to the specific instance of the button!!!

To solve the issue, I created an inner class in my user control called MyButton which would encapsulate a Button and an event. I made the event public so that I could set its handlers from outside. When I needed to add a button to my user control, I would instantiate the MyButton class and add the button (member of MyButton class) to the user control. The click event of the button would then cause the firing of this event (which is specific to this button). This way, I was able to expose my control's event without exposing the control.

I am showing the MyButton class here:

public class MyButton
{
    protected Button btnAction;
    public event EventHandler ClickEvent;

    public MyButton()
    {
        btnAction = new Button();
        btnAction.Click += new System.EventHandler(this.ClickHandler);
    }

    public void AddMyButton(TableCell tcBody)
    {
        tcBody.Controls.Add(btnAction);
    }

    public string FooterButtonText
    {
        set
        {
            btnAction.Text = value;
        }
    }

    public string FooterButtonClass
    {
        set
        {
            btnAction.CssClass = value;
        }
    }

    private void ClickHandler(object sender, EventArgs e)
    {
        if(ClickEvent != null)
            ClickEvent(sender, e);
    }
}

Well, that's my little collapsible panel for the time being till I come up with some enhancements!

License

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

Share

About the Author

cyberdego
Web Developer
India India
I am working as a s/w engineer. I am interested in programming, reading, singing, cooking and lotsa other stuff.

Comments and Discussions

 
QuestionInformation PinmemberMiss Shafiq25-Jan-09 18:51 
Questionso complicate??? Pinmemberspiderman_anhvu17-Feb-08 21:10 
GeneralVS 2005 Version Pinmembernaninanaja30-Aug-07 20:59 
Questionwhen i run the code i got one error PinmemberM Someswar4-Jun-07 0:22 
GeneralHELP: Floating User Control or Panel W/ User Control! PinmemberChuck Lane23-Jul-04 9:16 
GeneralTweaking Suggestion Pinmembersaurbh13-Apr-04 4:00 
GeneralError running project Pinmembergordingin11-Feb-04 3:37 
GeneralRe: Error running project Pinmembergordingin11-Feb-04 4:04 
Generala little revision Pinmemberqiuyl20-Nov-03 7:46 
Generalpippo Pinmemberlugii16-Sep-03 4:13 
GeneralMore Versatile with User Control Input PinmemberYosefDov18-Jul-03 1:28 
GeneralRe: More Versatile with User Control Input Pinmemberqiuyl20-Nov-03 7:47 
GeneralWorking with VB.NET PinmemberThomas Fung15-Jul-03 14:03 
QuestionWhy adding a lblTitle ? PinmemberErnest Bariq2-Jul-03 14:00 
Generaljs is written twice PinmemberErnest Bariq2-Jul-03 13:57 
GeneralInitial image plus or minus Pinmembergrchristin2-Jul-03 4:08 
GeneralSmall bug Pinmembermes@ser29-Jun-03 21:14 
GeneralRe: Small bug PinmemberGreatSage30-Jun-03 10:17 
GeneralNot a bug! Pinmembercyberdego1-Jul-03 7:39 
GeneralRe: Not a bug! PinmemberLeonJ3-Jul-03 2:34 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 30 Jun 2003
Article Copyright 2003 by cyberdego
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid