Hi
I have added some Ajax
technology to my site. The left bar is having quite a few panels so I decided
to make those panel Collapsible. Having worked with ATLAS before I knew how
easy it would be to do this work.
All I had to do was add the CollapsiblePanelExtender to these
panels. This extender targets any ASP.NET Panel control. The panel is also
post-back aware so in case of post back the panel remembers it state
I had to configure the CollapsiblePanelExtender to show correct
text and panel. And last but not the least put the scriptmanager in the master
page itself so that it is available to all the pages which are using the master
pages (All my pages use this master page so I do not have to add this script in
all pages). That was all I needed to do to change the panels to act like
Collapsible Panel. Below is the description of the use of collapsible panel.
For using collapsible panel just drag the panel in the Form.
If you don’t know how to put atlas control see this post
<atlasToolkit:CollapsiblePanelExtender
ID="colpanel" runat="server">
</atlasToolkit:CollapsiblePanelExtender>
Now you need to add a CollapsiblePanelProperties template in
the CollapsiblePanelExtender.
<atlasToolkit:CollapsiblePanelProperties
CollapseControlID="Panel1"
Collapsed="false"
TextLabelID="Label1"
CollapsedText="+
RSS and ATOM"
ExpandedText="-
RSS and ATOM"
ExpandControlID="Panel1"
ScrollContents="True"
TargetControlID="Panel2"
/>
- Here CollapseControlID and ExpandControlID
are the controls (panel) that will expand or collapse the panel on a
click, respectively. If these values are the same, the panel will
automatically toggle its state on each click.
- Collapsed specifies weather the panel will be initially
collapsed or expanded.
- TextLabelID is the ID of the label control where the status
text for the panel will be displayed.
- CollapsedText and ExpandedText is the
text to be displayed in the textLabelID when the
panel is collapsed or expanded respectively.
- TargetControlID is the control (Panel) that will be expanded
or collapsed on the click
- ScrollContents takes a Boolean property on whether to add
scrollbar in case the content is larger than the panel itself.
There are many other property available like CollapsedSize, ExpandedSize, CollapsedImage, ExpandedImage,
ExpandDirection etc which can be used to customize the panel.
The full tag for using collapsible panel in the Site is.
[NOTE:You can add more than one properties in the extender.]
<atlasToolkit:CollapsiblePanelExtender
ID="colpanel" runat="server">
<atlasToolkit:CollapsiblePanelProperties
CollapseControlID="Panel1"
Collapsed="false"
TextLabelID="Label1"
CollapsedText="+
RSS and ATOM"
ExpandedText="-
RSS and ATOM"
ExpandControlID="Panel1"
ScrollContents="True"
TargetControlID="Panel2"
/>
</atlasToolkit:CollapsiblePanelExtender>Hope this helps
Thanks
Vikram