An EditorZone which collapses its EditorParts in ASP.NET 2.0

• Download source files - 5.27 KB

Introduction

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.

History

• 1 October 2005 - Initial version.