Click here to Skip to main content
11,718,016 members (84,237 online)
Click here to Skip to main content

Reusable Collapsible Panel for Web

, 29 Jun 2003 152.6K 2.8K 87
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.

You may also be interested in...

Comments and Discussions

 
QuestionInformation Pin
Miss Shafiq25-Jan-09 18:51
memberMiss Shafiq25-Jan-09 18:51 
Questionso complicate??? Pin
spiderman_anhvu17-Feb-08 21:10
memberspiderman_anhvu17-Feb-08 21:10 
GeneralVS 2005 Version Pin
naninanaja30-Aug-07 20:59
membernaninanaja30-Aug-07 20:59 
Questionwhen i run the code i got one error Pin
M Someswar4-Jun-07 0:22
memberM Someswar4-Jun-07 0:22 
GeneralHELP: Floating User Control or Panel W/ User Control! Pin
Chuck Lane23-Jul-04 9:16
memberChuck Lane23-Jul-04 9:16 
GeneralTweaking Suggestion Pin
saurbh13-Apr-04 4:00
membersaurbh13-Apr-04 4:00 
GeneralError running project Pin
gordingin11-Feb-04 3:37
membergordingin11-Feb-04 3:37 
GeneralRe: Error running project Pin
gordingin11-Feb-04 4:04
membergordingin11-Feb-04 4:04 
Generala little revision Pin
qiuyl20-Nov-03 7:46
memberqiuyl20-Nov-03 7:46 
Generalpippo Pin
lugii16-Sep-03 4:13
memberlugii16-Sep-03 4:13 
GeneralMore Versatile with User Control Input Pin
YosefDov18-Jul-03 1:28
memberYosefDov18-Jul-03 1:28 
GeneralRe: More Versatile with User Control Input Pin
qiuyl20-Nov-03 7:47
memberqiuyl20-Nov-03 7:47 
GeneralWorking with VB.NET Pin
Thomas Fung15-Jul-03 14:03
memberThomas Fung15-Jul-03 14:03 
QuestionWhy adding a lblTitle ? Pin
Ernest Bariq2-Jul-03 14:00
memberErnest Bariq2-Jul-03 14:00 
Generaljs is written twice Pin
Ernest Bariq2-Jul-03 13:57
memberErnest Bariq2-Jul-03 13:57 
GeneralInitial image plus or minus Pin
grchristin2-Jul-03 4:08
membergrchristin2-Jul-03 4:08 
GeneralSmall bug Pin
mes@ser29-Jun-03 21:14
membermes@ser29-Jun-03 21:14 
GeneralRe: Small bug Pin
GreatSage30-Jun-03 10:17
memberGreatSage30-Jun-03 10:17 
GeneralNot a bug! Pin
cyberdego1-Jul-03 7:39
membercyberdego1-Jul-03 7:39 
GeneralRe: Not a bug! Pin
LeonJ3-Jul-03 2:34
memberLeonJ3-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 | Terms of Use | Mobile
Web01 | 2.8.150901.1 | Last Updated 30 Jun 2003
Article Copyright 2003 by cyberdego
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid