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();
ad.Fill(ds);
MyGridView.DataSource = ds;
MyGridView.DataBind();
}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" />
</asp:GridView>
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:LinkButton>
<asp:Panel ID="collapsedPanel"Height="0" runat="server">
[This area will contain the data or the controlwhich displays the data]
</asp:Panel>
</asp:Panel>
Analysis
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:LinkButton>
<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" />
</asp:GridView>
</asp:Panel>
</asp:Panel>
Analysis
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.."
ExpandControlID="linkButton1"CollapseControlID="linkButton1"
ExpandDirection="Vertical"Collapsed="true"
CollapsedSize="0"AutoExpand="false" ExpandedText="Hide Details.."
TargetControlID="collapsedPanel"TextLabelID="Label1"/>
</cc1:CollapsiblePanelExtender>
Analysis
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.
