Expand/Collapse EditorParts (ASP.NET 2.0 Portal Framework)
If you've been experimenting with the ASP.NET 2.0 Portal Framework (like me!), you know there are 4 out-of-the-box EditorParts that you can place in the EditorZone (the EditorZone is the Zone where you can edit a WebPart's properties). The 4 standard EditorParts are:
- PropertyGridEditorPart
- AppearanceEditorPart
- BehaviorEditorPart
- LayoutEditorPart
The Problem
These EditorParts work great. However, if you place all 4 EditorParts in the EditorZone, they will show a very long list of editable properties. Not very user-friendly.
The Solution
By using stylesheet classes and a little client-side javascript, you can make the EditorParts expand and collapse when you click on their titles. You can even show a cool plus/minus icon next to the EditorPart's title (see screenshot).
How it's done: The Code
In the EditorZone tag, set the CssClass-attribute of the EditorParts you want default to be collapsed to 'EditorPartHidden' (this is a css class I'll show you later on). Also set the CssClass of the PartTitleStyle to 'EditorPartTitle' (so a client-side behavior can set on the EditorPart's title).
<asp:EditorZone runat="server" ID="EditorZone1">
<ZoneTemplate>
<asp:AppearanceEditorPart
CssClass="EditorPartHidden" ID="epart1"
runat="server" />
<asp:BehaviorEditorPart
CssClass="EditorPartHidden" ID="epart2" runat="server" />
<asp:LayoutEditorPart
CssClass="EditorPartHidden" ID="epart3"
runat="Server" />
</ZoneTemplate>
<PartTitleStyle CssClass="EditorPartTitle" />
</asp:EditorZone>
Next you can see the 'EditorPartHidden' and
'EditorPartTitle' css classes (put these in
your stylesheet). Note that the
'EditorPartTitle' class is using a
background image to show the 'plus' sign
next to the title (also needs a padding-left
to move the title a bit to the right,
otherwise the title will be placed on top of
the 'plus' sign).A behavior (toggle.htc) is set on the
EditorPartTitle to perform the
expand/collapse. Note: behaviors are IE
5.5+ only (or does FireFox supports this
also?).Note: I replaced the .htc (IE only
behavior) by cross-browser javascript.
.EditorPartHidden
{
display:
none;
}
.EditorPartTitle
{
behavior:
url(htc/toggle.htc);
//note: I replaced the .htc (IE only) by
cross-browser javascript
background-position:
left;
background-repeat:
no-repeat;
background-image:
url(/drnetjes/414355/images/plus.gif);
cursor:
pointer;
padding-left:
14px;
font-size:
x-small;
}
...and this is the javascript code for the expand/collapse behavior. It sets onclick events to all EditorPart titles, which toggles the image (plus/minus) and the EditorPart's content. Include this code on your .aspx page (or use Page.ClientScript.RegisterClientScriptBlock).
<script
type="text/javascript">
// Create expanding titles for
Legends with className
'EditorPartTitle'
function
CreateExpandingTitles() {
var
elements =
document.getElementsByTagName("LEGEND");
for
(i=0; i<elements.length; i++) {
if
(elements[i].className &&
elements[i].className ==
"EditorPartTitle")
elements[i].onclick =
new
Function("toggle(this);");
}
}
// Call function
CreateExpandingTitles on window
onload
if
(window.addEventListener)
window.addEventListener('load', CreateExpandingTitles,
false);
else
if
(window.attachEvent)
window.attachEvent('onload', CreateExpandingTitles);
function
toggle(titleElement) {
// Find nextSibling's firstChild
(i.e. DIV with class
'EditorPartStyleHidden')
// For IE this is
nextSibling.childNodes[0], but due to an
error in current
// version of FireFox (1.0.4) this
is nextSibling.childNodes[1]
var
firstChild =
(titleElement.nextSibling.childNodes[0].id)
? titleElement.nextSibling.childNodes[0]
:
titleElement.nextSibling.childNodes[1];
// Toggle image and show/hide
EditorPart display
if
(firstChild.style.display ==
"block") {
firstChild.style.display =
"none";
titleElement.style.backgroundImage =
"url(/drnetjes/414355/images/plus.gif)";
}
else
{
firstChild.style.display =
"block";
titleElement.style.backgroundImage =
"url(/drnetjes/414355/images/minus.gif)";
}
}
</script>