Click here to Skip to main content
15,894,180 members
Articles / Web Development / ASP.NET
Article

ASP.NET DropDownList with OptionGroup support

Rate me:
Please Sign up or sign in to vote.
4.81/5 (39 votes)
12 Sep 20061 min read 486.9K   8.7K   108   100
An implementation of a DropDownList Control Adapter which provides OptionGroup support.

Introduction

ASP.NET 2.0, for all its bells and whistles, lacks the odd bit of functionality for reasons completely unknown. One such notable omission is that of OptionGroup (<optgroup>) support in the DropDownList control. For those unfamiliar with the <optgroup> element, it is part of the XHTML standard, and has the effect of categorising items in a <select>, as the following image shows.

Option Groups

When I first began to look for a solution to implement this in ASP.NET, I found very few articles on the topic that offered any viable solution. Another CodeProject member came up with a nice clean solution, but it looked like a lot of code and I was convinced there was an easier way. After reading some comments, it became apparent a Control Adapter was the way to go. Control Adapters are new in ASP.NET 2.0, and allow the developer to override the rendering behaviour of any control, very powerful stuff! Furthermore, Control Adapters are used in conjunction with a browser file, so specific browsers may be targeted, if required. Armed with that knowledge, the solution became simple. The attached download contains the requisite files to implement this solution in your own projects, but for posterity, I paste it here also.

C#
public class DropDownListAdapter : 
       System.Web.UI.WebControls.Adapters.WebControlAdapter {
    protected override void RenderContents(HtmlTextWriter writer) {
        DropDownList list = this.Control as DropDownList;
        string currentOptionGroup;
        List<string> renderedOptionGroups = new List<string>();
        foreach(ListItem item in list.Items) {
            if(item.Attributes["OptionGroup"] == null) {
                RenderListItem(item, writer);
            } else {
                currentOptionGroup = item.Attributes["OptionGroup"];
                if(renderedOptionGroups.Contains(currentOptionGroup)) {
                    RenderListItem(item, writer);
                } else {
                    if(renderedOptionGroups.Count > 0) {
                        RenderOptionGroupEndTag(writer);
                    }
                    RenderOptionGroupBeginTag(currentOptionGroup, 
                                              writer);
                    renderedOptionGroups.Add(currentOptionGroup);
                    RenderListItem(item, writer);
                }
            }
        }
        if(renderedOptionGroups.Count > 0) {
            RenderOptionGroupEndTag(writer);
        }
    }
    private void RenderOptionGroupBeginTag(string name, 
                 HtmlTextWriter writer) {
        writer.WriteBeginTag("optgroup");
        writer.WriteAttribute("label", name);
        writer.Write(HtmlTextWriter.TagRightChar);
        writer.WriteLine();
    }
    private void RenderOptionGroupEndTag(HtmlTextWriter writer) {
        writer.WriteEndTag("optgroup");
        writer.WriteLine();
    }
    private void RenderListItem(ListItem item, 
                 HtmlTextWriter writer) {
        writer.WriteBeginTag("option");
        writer.WriteAttribute("value", item.Value, true);
        if(item.Selected) {
            writer.WriteAttribute("selected", "selected", false);
        }
        foreach(string key in item.Attributes.Keys) {
            writer.WriteAttribute(key, item.Attributes[key]);
        }
        writer.Write(HtmlTextWriter.TagRightChar);
        HttpUtility.HtmlEncode(item.Text, writer);
        writer.WriteEndTag("option");
        writer.WriteLine();
    }
}

License

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


Written By
Web Developer
United Kingdom United Kingdom
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralRe: optgroup structure disappears after PostBack Pin
xsoftdev18-Jul-07 12:23
xsoftdev18-Jul-07 12:23 
AnswerRe: optgroup structure disappears after PostBack Pin
JunioraTm18-Apr-10 10:39
JunioraTm18-Apr-10 10:39 
GeneralRe: optgroup structure disappears after PostBack Pin
brenjt6-Oct-11 12:05
brenjt6-Oct-11 12:05 
GeneralRe: optgroup structure disappears after PostBack Pin
Jan Bentzen1-Sep-08 23:12
Jan Bentzen1-Sep-08 23:12 
AnswerRe: optgroup structure disappears after PostBack [modified] Pin
t0per8-Mar-07 4:50
t0per8-Mar-07 4:50 
GeneralRe: optgroup structure disappears after PostBack Pin
rony_mansy18-Nov-07 6:10
rony_mansy18-Nov-07 6:10 
QuestionTypo in App_Code folder name ? Pin
oudoulj13-Sep-06 4:35
oudoulj13-Sep-06 4:35 
AnswerRe: Typo in App_Code folder name ? [modified] Pin
lotuspro13-Sep-06 4:51
lotuspro13-Sep-06 4:51 
Apologies, this is a slight oversight on my part. I am using Web Application Projects for VS2005. If you are unfamiliar with Web Application Projects, it is really just a patch for VS2005 to make it use the old VS2003 build model for websites. You can download the patch here: http://www.asp.net/sandbox/[^]. The reason I have no App_Code is because the old build model does not support it, so I use a 'Code' folder instead.

The most likely reason the sample is not working for you is because of the namespace declaration in the DropDownListAdapter.cs file. Just remove it and in addition, change the adapterType declaration in the BrowserFile from:

adapterType="CraigBlog.Net.Code.Adapters.DropDownListAdapter"

to:

adapterType="DropDownListAdapter"

It should then work fine. If not, create the files yourself and copy only the contents of the sample files over.

I hope that helps.


-- modified at 10:56 Wednesday 13th September, 2006
GeneralRe: Typo in App_Code folder name ? Pin
oudoulj13-Sep-06 5:18
oudoulj13-Sep-06 5:18 
GeneralRe: Typo in App_Code folder name ? Pin
Gary Stafford19-Sep-06 14:38
Gary Stafford19-Sep-06 14:38 
GeneralRe: Typo in App_Code folder name ? Pin
lotuspro19-Sep-06 22:08
lotuspro19-Sep-06 22:08 
GeneralA useful control Pin
HellfireHD7-Sep-06 11:32
HellfireHD7-Sep-06 11:32 
AnswerRe: A useful control Pin
lotuspro7-Sep-06 21:53
lotuspro7-Sep-06 21:53 
GeneralRe: A useful control Pin
vik2011-Sep-06 20:41
vik2011-Sep-06 20:41 
GeneralGroupList Pin
bestcomy7-Sep-06 4:36
bestcomy7-Sep-06 4:36 

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.