Click here to Skip to main content
13,192,426 members (51,526 online)
Click here to Skip to main content
Add your own
alternative version


33 bookmarked
Posted 2 Oct 2005

An EditorZone which collapses its EditorParts in ASP.NET 2.0

, 3 Oct 2005
Rate this:
Please Sign up or sign in to vote.
Displays how to develop a custom EditorZone which allows the EditorParts it contains to collapse to preserve screen real estate.

Sample Image - CollapsingEditorZone.gif


Time for another small article. I have been using the new WebPart framework for quite some time now, and I have developed a few that might interest you. This time, I will describe how to create an EditorZone which is able to collapse the EditorParts it contains using plus and minus icons used in many applications.

Normally, when you have an EditorZone and it contains some EditorParts, all of them will be displayed when you set the display mode to WebPartManager.EditDisplayMode. It is likely you'll have your EditorZone parked to the side of the screen in a narrow vertical bar, much in the same way as Microsoft SharePoint. Because of this, the EditorParts contained in the EditorZone will be rendered one above the other in a column like fashion. A problem with this setup is that the height of an individual EditorPart can get quite large; the BehaviorEditorPart is a good example of this. It takes up about sixty percent of my screen height, so when I want to display other EditorParts along with it, I'll have to scroll down. If you examine products such as SharePoint, you'll notice an EditorPart is collapsible, preserving valuable screen real estate. It turns out that ASP.NET can be easily extended to provide the same look and feel.

The code itself was not too difficult to write; it was quite easy to override the default rendering behavior of an EditorZone. Instead of rendering EditorParts itself, it defers this responsibility to an instance of the EditorPartChrome class. By overriding the creation of this instance, the rendering can be easily customized. Two classes perform the bulk of the workload. A class derived from EditorZone called CollapsibleEditorZone. This class performs two tasks, creating a custom EditorPartChrome instance and responding to postback events from the expand / collapse icon. An EditorPart is minimized and restored by setting its ChromeState. The second class is derived from EditorPartChrome and renders the EditorPart. Adding the icon is a simple task of doing some rendering using the HtmlTextWriter. The code is relatively the same as what is found in the base class.

Some interesting things about the code then. It uses two embedded resources for the icons. These are served using the WebResource.axd HTTP handler. This can easily be done using the WebResourceAttribute in the assemblyInfo.cs file and a call to the ClientScriptManager to tie the src attribute of the icon to the handler. The icons have a client-side handler for the click event which posts the page back to the CollapsibleEditorZone which takes care of minimizing EditorParts and restoring them. Just for fun, I've also created two switches with which you can control the behavior and style. The behavior is either Collapse or NoCollapse. This indicates whether you want to show the collapsing icons. For style, you can choose out of CollapseNone or CollapseAll, which indicates what to do to other EditorParts when you restore an EditorPart to full size.


  • 1 October 2005 - Initial version.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Wouter van Vugt
Web Developer Code Counsel
Netherlands Netherlands
Wouter van Vugt is a Microsoft MVP with Office Open XML technologies and an independent consultant focusing on creating Office Business Applications (OBAs) with SharePoint, the Office 2007 system and related .NET technologies. Wouter is a frequent contributor to developer community sites such as and MSDN and has published several white papers and articles as well a book available on line titled Open XML: the markup explained. Wouter is the founder of Code-Counsel, a Dutch company focusing on delivering cutting-edge technical content through a variety of channels. You can find out more about Wouter by reading his blog and visiting the Code-Counsel Web site.

You may also be interested in...

Comments and Discussions

QuestionHow use it Pin
Member 78560923-Dec-07 20:10
memberMember 78560923-Dec-07 20:10 
GeneralPlease excuse the failing image / download link Pin
Wouter van Vugt2-Oct-05 20:25
memberWouter van Vugt2-Oct-05 20:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171017.2 | Last Updated 3 Oct 2005
Article Copyright 2005 by Wouter van Vugt
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid