Working with ATLAS Control Toolkit - Part 1
page 5 of 9
by Mohammad Azam
Average Rating: 
Views (Total / Last 10 Days): 42866/ 95

Collapsible Panel

The Collapsible Panel control allows you to show and hide the contents of the page.  In the demo below I will create a GridView inside the Collapsible Panel which will appear and disappear based on the user’s selection.

Registering ATLAS Script

The first thing that you need to do is register the ATLAS script using the ScriptManager control.  This can be done by a single line of code, as shown below.

Listing 2 – Registering ATLAS with the ScriptManager Control

<atlas:ScriptManager ID="MyScriptManager"runat="server" />

After registering the ATLAS scripts, the next task is to create and populate the GridView control.

Populating the GridView Control

There are several ways to populate the GridView control.

Listing 3 – Populating the GridView Control

private void BindData()
  SqlConnection myConnection = newSqlConnection(ConnectionString);
  SqlDataAdapter ad = new SqlDataAdapter("SELECT* FROM Categories",myConnection);
  DataSet ds = new DataSet();
  MyGridView.DataSource = ds;

Below is the HTML code generated for the GridView.

Listing 4 – HTML Generated by the GridView control

<asp:GridView ID="MyGridView"runat="server" CellPadding="4"ForeColor="#333333" GridLines="None" >
  <FooterStyle BackColor="#990000"Font-Bold="True" ForeColor="White" />
  <RowStyle BackColor="#FFFBD6"ForeColor="#333333" />
  <SelectedRowStyleBackColor="#FFCC66" Font-Bold="True"ForeColor="Navy" />
  <PagerStyle BackColor="#FFCC66"ForeColor="#333333" HorizontalAlign="Center" />
  <HeaderStyle BackColor="#990000"Font-Bold="True" ForeColor="White" />
  <AlternatingRowStyleBackColor="White" />

At this point the GridView is populated with data and now we are ready to use the Collapsible Panel control.  Before you start using the Collapsible Panel you must understand how it works.

How Collapsible Panel Works?

The Collapsible Panel consists of two panel controls, the outer panel and the inner panel.  The outer panel contains buttons which will make the inner panel visible and invisible.  The inner panel contains the data or the control which displays the data (which in this case is the GridView control).

Creating the Outer Panel Control

Let us first make the outer panel control which will contain the inner panel and then make a button to trigger the visible and invisible task.

Listing 5 – Outer Panel Control

<asp:Panel ID="panelCategories"runat="server">
<asp:LinkButton ID="linkButton1"runat="server" ForeColor="#804000">
<asp:Label ID="Label1"runat="server">Show Details..</asp:Label>
<asp:Panel ID="collapsedPanel"Height="0" runat="server">
[This area will contain the data or the controlwhich displays the data]


In the code above I have created the outer panel, "panelCategories," which contains a LinkButton control and the Label control.  The panelCategories also contains another panel, collapsedPanel. The inner panel, collapsedPanel, is used to display the data.  Let us add the GridView to the inner panel.

Adding GridView to the Inner Panel

Listing 6 – Inner Panel Control with GridView

<asp:Panel ID="panelCategories"runat="server">
<asp:LinkButton ID="linkButton1"runat="server">
<asp:Label ID="Label1"runat="server">Show Details..</asp:Label>
<asp:Panel ID="collapsedPanel"Height="0" runat="server">
<asp:GridView ID="MyGridView"runat="server" CellPadding="4"ForeColor="#333333" GridLines="None" >
<FooterStyle BackColor="#990000"Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6"ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66"Font-Bold="True" ForeColor="Navy" />
<PagerStyle BackColor="#FFCC66"ForeColor="#333333" HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000"Font-Bold="True" ForeColor="White" />
<AlternatingRowStyleBackColor="White" />


In the code above I have added the GridView control inside the inner panel.

Adding the CollapsiblePanelExtender Control

The final item that you need to add is the CollapsiblePanelExtender Control.  This control is responsible for showing and hiding the data in the panels.  To add this, drag and drop the CollapsiblePanel control from the toolbox onto the designer and set the following properties.

Listing 7 – Adding CollapsiblePanelExtender Control

<cc1:CollapsiblePanelExtenderID="cPanel" runat="server">
<cc1:CollapsiblePanelProperties SuppressPostBack="true" CollapsedText="Show Details.."
CollapsedSize="0"AutoExpand="false" ExpandedText="Hide Details.."


Let us take a look at some of the properties that we have set.

ExpandControlID: The ID of the control which will expand the panel.

CollapseControlID: The ID of the control which will collapse the panel.  If CollapseControlID is the same as the ExpandControlID then the panel will automatically toggle its state on each click.

ExpandDirection: The direction in which the panel will expand.

ExpandedText: The text to be shown when the panel is expanded.

TargetControlID: The ID of the panel which will be collapsed.

TextLabelID: The ID of the Label where the ExpandedText and CollapsedText messages are displayed.

SurpressPostBack: When set to true, the postback happens on the client side.

When all the necessary properties are set, we are ready to run the application.

View Entire Article

User Comments

Title: rrr   
Name: r
Date: 2012-05-30 9:48:58 AM
Title: atlas   
Name: ashwin
Date: 2008-05-13 2:50:56 AM
excellent information on atlas control
Title: dragpanel   
Name: antonio
Date: 2008-02-25 2:01:13 PM
i dont know write in English. but i will try.

i have a problem with dragpanel.
first. i have a proyect, that have windows or panel, that made with ajax. and its can not move. y i wanne move. and i dont know how i do it?.
Title: i need to maintain the state of collapsed or expanded state on post back   
Name: Praveen
Date: 2007-09-24 7:18:58 AM
Plz let me know how to maintain the state of the collpsible panel extender on postbacks so that it could be user friendly. One way is through web service n other is to store client state but im not getting with both
Title: Nice one..   
Name: Ruja Vaidya
Date: 2006-11-20 5:54:41 AM
Gr88 job..

Title: hi azam...nicely explained   
Name: Naga
Date: 2006-09-25 8:18:08 AM
Nicely explained the concept.
gr8 job..
Title: sample code   
Name: Salman
Date: 2006-09-20 6:47:30 AM
can we create webpart like or
we have create the webpart but their pick and drop is not easy for newbie,
Can we make it easy for user to pick and drop the webpart easily on other place
Title: RE: Thanks   
Name: AzamSharp
Date: 2006-09-02 10:10:53 PM

I am glad that you liked the article.
Title: Excellent   
Name: Eren Cetin
Date: 2006-09-02 5:09:52 PM
Everything is excellent.. Thank you Mohammad.. "Allah" bless you..
Title: Thankyou for example on Collapsible panel   
Name: kishore
Date: 2006-07-31 4:35:47 PM
one minor suggestion, when I copied the code as it is from this site it didnt worked, as there is no space between the showed Errors.

...CollapsedSize="0"AutoExpand="false" ...

Here there is no space between "0" and AutoExpand, as I am new it took me some time to understand this error.

Title: good   
Name: good
Date: 2006-07-18 6:23:43 AM
Title: Collapsible Panel   
Name: kapil Sharma
Date: 2006-06-16 4:24:45 PM
i m very thankful 2 u 4 the detailed and sample of the really help me in making the project

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

©Copyright 1998-2024  |  Page Processed at 2024-02-25 8:33:00 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search