Click here to Skip to main content
11,924,280 members (64,564 online)
Click here to Skip to main content
Add your own
alternative version


41 bookmarked

DropDownList with OptionGroup

, 19 Jun 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
An ASP.NET DropDownList custom control with the HTML OptionGroup feature.


ASP.NET 2.0 lacks the OptionGroup functionality (<optgroup>) in the DropDownList control. This means that it is not possible to obtain a select control as shown below:

Using the code

To work around this limitation, I built a user render control, available for .NET Framework 2.0 or later, with this functionality. This control supports the following features (as do the System.Web.UI.DropDownList control built in the .NET framework):

  • EnableViewState property
  • AutoPostBack property
  • AppendDataBoundItems property
  • SelectedValue property
  • Selected property for child items
  • Raises the ValueChanged event
  • Supports DataBind

You can use the control at design-time as shown below:

<ddlb:optiongroupselect id="OptionGroupSelect1" runat="server" enableviewstate="true">
   <ddlb:OptionGroupItem ID="OptionGroupItem1" 
      runat="server" Value="1" Text="ONE" OptionGroup="Odd" />
   <ddlb:OptionGroupItem ID="OptionGroupItem2" 
      runat="server" Value="2" Text="TWO" OptionGroup="Even" />
   <ddlb:OptionGroupItem ID="OptionGroupItem3" 
      runat="server" Value="3" Text="TREE" OptionGroup="Odd" />
   <ddlb:OptionGroupItem ID="OptionGroupItem4" 
      runat="server" Value="4" Text="FOUR" OptionGroup="Even" />

It is not necessary that items that belong to the same OptionGroup be placed close.

Or, if you prefer to use the control in code:

protected void Page_Load(object sender, EventArgs e)
  if (!this.IsPostBack)
      this.OptionGroupSelect1.Items.Add(new OptionGroupItem("A", 
                              "Letter A", "Letters"));
      this.OptionGroupSelect1.Items.Add(new OptionGroupItem("B", 
                              "Letter B", "Letters"));
      this.OptionGroupSelect1.Items.Add(new OptionGroupItem("C", 
                              "Letter C", "Letters"));

Points of interest

The solution attached to this article is composed of two projects. The first one is a class library, where there are the sources for the control and its related classes, and the second one is a web application, where there are some pages to test the control behavior.

In the project library, we can find the following classes:

  • OptionGroupSelect is the control. It inherits from the DataBoundControl that, at the end, extends the WebControl class. I extend the DataBoundControl class because it is used as the base class for all ASP.NET 2.0 data-bound controls that display their data in list form. This base class gave me the functionality to perform the data binding operation for the render control.
  • OptionGroupItem represents the single “list item” with the relative properties: Text, Value, OptionGroup, and Selected. It inherits from the WebControl class and simply overrides the Render method.
  • OptionGroupSelectControlDesigner is used to perform the design-time control rendering.
  • OptionGroupItemBuilder is used to notify the parent control, the OptionGroupSelect, that an HTML element has been analyzed and added to the parent’s ControlCollection property. Essentially, it allows me to create the child items at design-time.

The main control (OptionGroupSelect) overrides the LoadViewState method to retrieve the view state value, used to maintain the control state. Consequently, the SaveViewState is overridden too.

Because the control implements the IPostBackDataHandler interface, the LoadPostData method is overridden to detect if the selected value is changed from any user selection. In that case, it returns true, so the ValueChanged event is triggered.

Within the Render method, I draw the select HTML control, adding the optgroup element, and for each child list item, call the relative RenderControl method.

If the child items define the OptionGroup property, I group them by this value, so items with the same OptionGroup are arranged close. Items without the OptionGroup value are treated normally.

As I said, the mail control extends the DataBoundControl class. This means that some methods have to be overridden to obtain the data-bound behavior. These methods are:

  • PerformSelect: This method is invoked due to the DataBind call. It extracts the data source and exposes it as an IEnumerable object. The interesting thing is that the data source object doesn’t have to be a DataSet. It also accepts DataTable, DataView, or List<OptionGroupItem>. Moreover, the method this.GetData() used inside the code extracts from the DataSet a DataSourceView object that points to the specified DataTable indicated by the DataMember property.
  • PerformDataBinding: This method executes the real work. For each item, an OptionGroupItem instance is created and added to the OptionGroupSelect child Controls collection.

More details about custom data-binding can be found at MSDN.


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


About the Author

Christian Del Bianco
Software Developer
Italy Italy
Skype: christian.delbianco

You may also be interested in...

Comments and Discussions

QuestionHow to get group title ? Pin
NehalSS7-Mar-15 2:46
memberNehalSS7-Mar-15 2:46 
GeneralMy vote of 1 Pin
Hemant.Dehgam6-Jan-11 2:31
memberHemant.Dehgam6-Jan-11 2:31 
Code Not work Properly
GeneralMy vote of 5 Pin
TKSummer28-Oct-10 0:32
memberTKSummer28-Oct-10 0:32 
QuestionSelected Option Group? Pin
gbetsos12-Nov-09 1:14
membergbetsos12-Nov-09 1:14 
GeneralBinding to custom object collection Pin
Member 285787421-Jul-08 14:32
memberMember 285787421-Jul-08 14:32 
GeneralRe: Binding to custom object collection Pin
Christian Del Bianco21-Jul-08 22:32
memberChristian Del Bianco21-Jul-08 22:32 
GeneralRe: Binding to custom object collection Pin
Member 285787422-Jul-08 7:05
memberMember 285787422-Jul-08 7:05 
GeneralRe: Binding to custom object collection Pin
Member 285787422-Jul-08 7:24
memberMember 285787422-Jul-08 7:24 
GeneralRe: Binding to custom object collection Pin
Christian Del Bianco24-Sep-08 1:37
memberChristian Del Bianco24-Sep-08 1:37 
Generalnice one... Pin
Abhijit Jana21-Jun-08 0:01
memberAbhijit Jana21-Jun-08 0:01 
Generalvery nice article. Pin
Rajib Ahmed19-Jun-08 18:04
memberRajib Ahmed19-Jun-08 18:04 
NewsTrouble when work with RequiredFieldValidator Pin
Member 416044118-Jun-08 23:09
memberMember 416044118-Jun-08 23:09 
GeneralRe: Trouble when work with RequiredFieldValidator Pin
Christian Del Bianco19-Jun-08 4:05
memberChristian Del Bianco19-Jun-08 4:05 
GeneralRe: Trouble when work with RequiredFieldValidator Pin
Member 416044119-Jun-08 16:45
memberMember 416044119-Jun-08 16:45 
GeneralRe: Trouble when work with RequiredFieldValidator Pin
Christian Del Bianco7-Jul-08 22:46
memberChristian Del Bianco7-Jul-08 22:46 
GeneralRe: Trouble when work with RequiredFieldValidator Pin
Member 41604418-Jul-08 0:17
memberMember 41604418-Jul-08 0:17 
GeneralBetter Solution (?) Pin
ChicagoNovice10-Jun-08 4:59
memberChicagoNovice10-Jun-08 4:59 
GeneralHi companion Pin
Anil Srivastava8-Jun-08 21:04
memberAnil Srivastava8-Jun-08 21:04 
GeneralRe: Hi companion Pin
Christian Del Bianco16-Jun-08 2:00
memberChristian Del Bianco16-Jun-08 2:00 
QuestionIt is possible to allow the option group item to be selected ? Pin
SmugB3-Jun-08 1:11
memberSmugB3-Jun-08 1:11 
AnswerRe: It is possible to allow the option group item to be selected ? Pin
Christian Del Bianco3-Jun-08 22:46
memberChristian Del Bianco3-Jun-08 22:46 
GeneralOnValueChanged event not working Pin
si130-May-08 6:05
membersi130-May-08 6:05 
GeneralRe: OnValueChanged event not working Pin
Christian Del Bianco4-Jun-08 3:25
memberChristian Del Bianco4-Jun-08 3:25 
GeneralRe: OnValueChanged event not working Pin
josehr11-Jul-08 10:26
memberjosehr11-Jul-08 10:26 
QuestionRe: OnValueChanged event not working Pin
surajkikiran29-Jun-09 2:41
membersurajkikiran29-Jun-09 2:41 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.151125.3 | Last Updated 19 Jun 2008
Article Copyright 2008 by Christian Del Bianco
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid