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
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
NoCollapse. This indicates whether you want to show the collapsing icons. For style, you can choose out of
CollapseAll, which indicates what to do to other
EditorParts when you restore an
EditorPart to full size.
- 1 October 2005 - Initial version.