Click here to Skip to main content
13,004,203 members (112,349 online)
Click here to Skip to main content
Add your own
alternative version


49 bookmarked
Posted 12 Oct 2005

Display a DropDownList in a CatalogZone

, 12 Oct 2005
Rate this:
Please Sign up or sign in to vote.
Shows how to customize the CatalogZone to display a DropDownList instead of checkboxes.

The DropDownCatalogZone when used


My last piece on a collapsible EditorZone got me really going. This time I’ll show how to create a CatalogZone which displays a dropdown combobox instead of a list of checkboxes.

There are two main components which need to interact to make this possible. A class derived from CatalogZone takes care of rendering the header and footer. This class is called DropDownCatalogZone. The header shows an informative title. The footer is used to display a dropdown combobox which can be used to select a WebPartZone to add the WebPart to. The footer also shows the ‘Add’ and ‘Close’ buttons used to add a WebPart from the catalog to the page and to close the zone again. For each CatalogPart which is displayed in the CatalogZone, a dropdown combobox is rendered by a class derived from CatalogPartChrome called DropDownCatalogPartChrome.

First let’s examine the DropDownCatalogPartChrome class. It contains one method used to render a CatalogPart. This method is displayed in figure 1. The implementation takes the following steps:

  1. Get the WebPart descriptions stored in the CatalogPart.
  2. Create a DropDownList.
  3. Attach the ID of the list to a preformatted ID in the CatalogZone. (I’ll explain the why later.)
  4. Add each WebPart description to the DropDownList.
  5. Render the list.
public override void RenderCatalogPart(HtmlTextWriter writer,
       CatalogPart catalogPart)
    WebPartDescriptionCollection partDescriptions =
    DropDownList list = new DropDownList();
    list.Width = new Unit(150, UnitType.Pixel);
    list.ID = ((DropDownCatalogZone)Zone).ModuleSelectorControlID;

    foreach (WebPartDescription description in partDescriptions)
        list.Items.Add(new ListItem(description.Title, description.ID));
    writer.Write("Select a module:");

The interesting bit about this code is the use of the CatalogZone to provide the ID for the DropDownList. This is necessary because the Chrome class doesn’t load postback data itself, the DropDownCatalogZone loads this data based on the ID. By using it on the DropDownList, the DropDownCatalogZone is able to load the WebPartDescription of the selected item in the list.

The DropDownCatalogZone contains the bulk of the code. It will need to perform the following tasks:

  1. Create an instance of DropDownCatalogPartChrome.
  2. Render the header and footer.
  3. Handle postback data sent by the DropDownCatalogPartChrome class.
  4. Handle postback data sent by the buttons shown in the footer.

The first step is easy enough. A simple override of the CreateCatalogPartChrome is sufficient. The rendering of the header is trivial as well, it only writes a title to the output stream.

The third and fourth steps are more of a challenge. The DropDownCatalogZone will need to override the LoadPostData and RaisePostBackEvent methods. The LoadPostData method is used to load the selected WebPart and the selected WebPartZone from the posted values.

protected override bool LoadPostData(string postDataKey, 
                        NameValueCollection postCollection)
    _selectedPart = postCollection[ModuleSelectorControlID];
    _selectedZone = postCollection[ZoneSelectorControlID];
    return false;

The selected WebPart is loaded using the same key as used by the DropDownCatalogPartChrome class to render the DropDownList. The DropDownList which is rendered in the footer uses the same mechanism as used by the DropDownCatalogPartChrome class, but it uses a different ID, the ZoneSelectorControlID.

The RaisePostBackEvent method only needs to verify whether the postback is performed by the ‘Add’ button, and take the necessary actions to actually add the WebPart to the WebPartZone.

protected override void RaisePostBackEvent(string eventArgument)
    if (eventArgument == ((DropDownCatalogVerb)AddVerb).EventArgument &&
        AddVerb.Visible && AddVerb.Enabled)
        WebPartZoneBase zone = base.WebPartManager.Zones[_selectedZone];
        WebPartDescriptionCollection descriptions =
        WebPart webPart = SelectedCatalogPart.GetWebPart(
        WebPartManager.AddWebPart(webPart, zone, 0);

The rest of the code found in the DropDownCatalogZone class is plumbing to wire up the ‘Add’ and ‘Remove’ buttons and handle their state management.

Just a few little steps were required to change the default behavior of the CatalogZone, happy coding!


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


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 to use it in webpage .please explain me with example Pin
ntiin25-Aug-10 20:36
memberntiin25-Aug-10 20:36 
GeneralHide the DropDown Pin
halone20002-Jul-10 8:12
memberhalone20002-Jul-10 8:12 
QuestionUsing CheckBoxList Instead of DropDownList Pin
payam.ace11-May-09 23:28
memberpayam.ace11-May-09 23:28 
GeneralNice article but incomplete sample Pin
Member 17933028-Jun-08 5:45
memberMember 17933028-Jun-08 5:45 
GeneralCheckbox control instead of Dropdown - having problem Pin
Venkatesh Kumar21-May-08 9:13
memberVenkatesh Kumar21-May-08 9:13 
QuestionPlease Help Pin
hakeeem26-Feb-07 10:01
memberhakeeem26-Feb-07 10:01 
AnswerRe: Please Help [modified] Pin
bsevo30-Sep-07 9:07
memberbsevo30-Sep-07 9:07 
QuestionRe: Please Help Pin
Venkatesh Kumar20-May-08 11:44
memberVenkatesh Kumar20-May-08 11:44 
Questionhow to use Gridview in Catalogzone template for display Pin
sam_g123-Dec-06 19:33
membersam_g123-Dec-06 19:33 
QuestionSaveViewState Failed Pin
Luke XCS21-Sep-06 5:08
memberLuke XCS21-Sep-06 5:08 
AnswerRe: SaveViewState Failed Pin
Wouter van Vugt21-Sep-06 7:11
memberWouter van Vugt21-Sep-06 7:11 
GeneralRe: SaveViewState Failed [modified] Pin
Luke XCS21-Sep-06 7:37
memberLuke XCS21-Sep-06 7:37 
QuestionDisplay drag&drop webparts in a catalogzone Pin
shefali_sinha14-Sep-06 9:12
membershefali_sinha14-Sep-06 9:12 
AnswerRe: Display drag&drop webparts in a catalogzone Pin
Wouter van Vugt14-Sep-06 19:07
memberWouter van Vugt14-Sep-06 19:07 
GeneralRe: Display drag&drop webparts in a catalogzone Pin
shefali_sinha19-Sep-06 11:13
membershefali_sinha19-Sep-06 11:13 
GeneralRe: Display drag&drop webparts in a catalogzone Pin
Wouter van Vugt19-Sep-06 19:10
memberWouter van Vugt19-Sep-06 19:10 
GeneralRe: Display drag&drop webparts in a catalogzone Pin
shefali_sinha20-Sep-06 6:15
membershefali_sinha20-Sep-06 6:15 
GeneralRe: Display drag&drop webparts in a catalogzone Pin
Wouter van Vugt20-Sep-06 8:32
memberWouter van Vugt20-Sep-06 8:32 
GeneralRe: Display drag&drop webparts in a catalogzone Pin
shefali_sinha22-Sep-06 9:44
membershefali_sinha22-Sep-06 9:44 
GeneralRe: Display drag&drop webparts in a catalogzone Pin
WDI5-Nov-06 2:30
memberWDI5-Nov-06 2:30 
GeneralRe: Display drag&drop webparts in a catalogzone Pin
shefali_sinha6-Nov-06 1:47
membershefali_sinha6-Nov-06 1:47 
GeneralRe: Display drag&drop webparts in a catalogzone Pin
WDI4-Nov-06 20:40
memberWDI4-Nov-06 20:40 
GeneralRe: Display drag&drop webparts in a catalogzone Pin
shefali_sinha6-Nov-06 1:52
membershefali_sinha6-Nov-06 1:52 
GeneralRe: Display drag&drop webparts in a catalogzone Pin
redowl1-Feb-07 4:46
memberredowl1-Feb-07 4:46 
GeneralRe: Display drag&drop webparts in a catalogzone Pin
shefali_sinha4-Feb-07 16:08
membershefali_sinha4-Feb-07 16:08 

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
Web01 | 2.8.170627.1 | Last Updated 12 Oct 2005
Article Copyright 2005 by Wouter van Vugt
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid