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
background-position: left;
background-repeat: no-repeat;
background-image: url(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(images/plus.gif)";
} else {
firstChild.style.display = "block";
titleElement.style.backgroundImage = "url(images/minus.gif)";
}
}
</script>