Home
Applications
Keyboard Explorer
Mouse Trainer
Briefcase Plus
Atlas
Utilities
HTML Splitter
Junction Link Magic
Lockout Resetter
Stream Explorer
Host Administrator
Postcode
Set Date
Mail Checker
Password Revealer
Screensavers
Random Walk
Games
Hex
Dara
ASP.NET
MVC schedule controls
Schedule controls
SpamSafeLink control
Toggle Controls
Members administration
TogglePanel
Team Calendar
FolderContentsDataSource
Theme Switcher
Support

Rekenwonder Software

Toggle Panel control

Introduction
License
Installation
How to use
How it works
Points of interest

Introduction

This is a free control, TogglePanel, designed to show content that can be collapsed. The control has two templates, one for the content shown in the expanded state, and one for the content (or title) shown in the collapsed state.

screenshot

Use the ExpandedTemplate for the normal content and the CollapsedTemplate for the collapsed content.

This control is designed for ASP.NET 2.0.

Try the online demo

License

The control is free and open source under the LGPL license.

Installation

Installing the controls

You can install the controls in the standard way:

  • create a "bin" folder inside the application root of your website (if it's not already there)
  • copy the assembly file togglepanel.dll into the bin folder

You may want to add the control to the toolbox of your editor (Visual Studio or C# Builder). This will allow you to set its properties in the Property Pane. Follow the editor's procedure to add a control to the toolbox.

Using the controls

Adding the controls to your page

There are 2 ways to add the controls to your page:

  1. Drag the control from the toolbox onto the page (if it was installed on the toolbox).
  2. Add the code manually. Add this line to the top of your page:
    <%@ Register TagPrefix="rw" Namespace="rw" Assembly="TogglePanel" %>
    Then, add a tag like this where you want the panel to be displayed:
    <rw:TogglePanel id="TogglePanel1" runat="server" >
         <ExpandedTemplate>
         </ExpandedTemplate>
         <CollapsedTemplate>
         </CollapsedTemplate>
    </rw:TogglePanel>

Setting the control's properties

You should set both values for the ImageUrl: ImageUrlCollapsed for the collapsed state (usually a plus sign image), and ImageUrlExpanded for the expanded state (usually a minus sign image).

Optionally, you may set the Collapsed property to True if you want the control to be collapsed initially. 

Providing template content

The next step is to add the content of the templates.

There are two templates. You should provide content for both. Use the smart tag menu to edit both templates separately. You can add any text or controls to the templates.

Demo page

The control comes with a demo page. The page contains two instances of the control.

Try online

How it works

The control is derived from CompositeControl. The main code is in the CreateChildControls method.

In this method, an HtmlTable control is constructed with one row and two cells.
The first cell will contain the image, and in the second, two panels will be added.
At a given time, only one of these panels will be visible.

A hidden field is added to keep track of the state of the control on the client side as well as on the server side.

In order for the panels to be switched without a postback request, they are toggled on and off through JavaScript.

Here's the CreateChildControls method:

        Protected Overrides Sub CreateChildControls()
            Controls.Clear()
            ' Create a table for the child controls
            Table1 = New Table
            Controls.Add(Table1)
            ' Copy style attributes (BorderStyle, GridLines, etc.) to child
                table
            Table1.CopyBaseAttributes(Me)
            If ControlStyleCreated Then Table1.ApplyStyle(ControlStyle)

            Table1.Rows.Add(New TableRow)

            ' Add a cell for the clickable image
            Table1.Rows(0).Cells.Add(New TableCell)
            Table1.Rows(0).Cells(0).VerticalAlign = VerticalAlign.Top
            Table1.Rows(0).Cells.Add(New TableCell)

            Image1 = New Image()
            Table1.Rows(0).Cells(0).Controls.Add(Image1)
            ' Image should not keep state, because it can be changed on
                the client
            Image1.EnableViewState = False

            ' Create the first panel for the collapsed state
            PanelCollapsed = New Panel()
            Table1.Rows(0).Cells(1).Controls.Add(PanelCollapsed)
            ' panel should not keep state, because it can be changed on
                the client
            PanelCollapsed.EnableViewState = False
            Dim item1 As New TogglePanelItem()
            ' Instantiate item using the template 
            If (Not CollapsedTemplate Is Nothing) Then
                CollapsedTemplate.InstantiateIn(item1)   ' initialize item
                    from template
            Else
                Throw New HttpException("The CollapsedTemplate is missing")
            End If
            PanelCollapsed.Controls.Add(item1)

            ' Create the second panel for the expanded state
            PanelExpanded = New Panel()
            Table1.Rows(0).Cells(1).Controls.Add(PanelExpanded)
            PanelExpanded.EnableViewState = False
            Dim item2 As New TogglePanelItem()
            ' Instantiate item using the template 
            If (Not ExpandedTemplate Is Nothing) Then
                ExpandedTemplate.InstantiateIn(item2)   ' initialize item from
                    template
            Else
                Throw New HttpException("The ExpandedTemplate is missing")
            End If
            PanelExpanded.Controls.Add(item2)

            ' A hidden field is used to keep track of the state, 
            ' even if it changes on the client side
            Hidden1 = New HtmlInputHidden()
            Controls.Add(Hidden1)
            ' We store the "Collapsed" value in a hidden control (and not
                in ViewState), 
            ' so that it can be changed on the client side and still be
                posted back
            ' the value is 'col' for collapsed and empty for expanded
            Hidden1.Value = IIf(Collapsed, "col", "").ToString()

            'Create the client script for switching between panels
            Dim clientScript As String = _
            "var hidden1=document.getElementById('" & Hidden1.ClientID & "');" & _
            "var pe=document.getElementById('" & PanelExpanded.ClientID & "');" & _
            "var pc=document.getElementById('" & PanelCollapsed.ClientID & "');" & _
            "if(hidden1.value!='col') {" & _
            " pe.style.display='none';" & _
            " pc.style.display='block';" & _
            " this.src='" & ResolveUrl(ImageUrlCollapsed) & "';" & _
            " hidden1.value='col';}" & _
            "else{" & _
            " pe.style.display='block';" & _
            " pc.style.display='none';" & _
            " this.src='" & ResolveUrl(ImageUrlExpanded) & "';" & _
            " hidden1.value='';}"
            Image1.Attributes("onclick") = clientScript

            If (Not DesignMode And Page.IsPostBack) Then 
                ' find the postback name for the hidden field 
                ' TODO: is there no predefined function for this hack? 
                Dim HiddenClientName As String = Hidden1.ClientID.Replace("_", "$") 
                ' retrieve the state of the control from the request 
                Dim HiddenValue As String = Page.Request.Params.Get(HiddenClientName) 
                If (HiddenValue IsNot Nothing) Then 
                    Collapsed = (HiddenValue = "col") 
                End If 
            End If          
            UpdateLayout()

Future

Here are some ideas for improvement:

  • Allow different locations for the toggle image (currently only on the left side)

If anyone decides to extend this control, or has any comments, bug reports or questions, then it would be great to hear from you.

Points of interest

  • templated control in ASP.NET 2.0