Click here to Skip to main content
Click here to Skip to main content

DropDownList with OptionGroup

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

Introduction

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" />
</ddlb:optiongroupselect>

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.

License

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
Email: christian.delbianco@gmail.com
Skype: christian.delbianco

Comments and Discussions

 
GeneralMy vote of 1 PinmemberHemant.Dehgam6-Jan-11 1:31 
Code Not work Properly
GeneralMy vote of 5 PinmemberTKSummer27-Oct-10 23:32 
QuestionSelected Option Group? Pinmembergbetsos12-Nov-09 0:14 
GeneralBinding to custom object collection PinmemberMember 285787421-Jul-08 13:32 
GeneralRe: Binding to custom object collection PinmemberChristian Del Bianco21-Jul-08 21:32 
GeneralRe: Binding to custom object collection PinmemberMember 285787422-Jul-08 6:05 
GeneralRe: Binding to custom object collection PinmemberMember 285787422-Jul-08 6:24 
GeneralRe: Binding to custom object collection PinmemberChristian Del Bianco24-Sep-08 0:37 
Generalnice one... PinmemberAbhijit Jana20-Jun-08 23:01 
Generalvery nice article. PinmemberRajib Ahmed19-Jun-08 17:04 
NewsTrouble when work with RequiredFieldValidator PinmemberMember 416044118-Jun-08 22:09 
GeneralRe: Trouble when work with RequiredFieldValidator PinmemberChristian Del Bianco19-Jun-08 3:05 
GeneralRe: Trouble when work with RequiredFieldValidator PinmemberMember 416044119-Jun-08 15:45 
GeneralRe: Trouble when work with RequiredFieldValidator PinmemberChristian Del Bianco7-Jul-08 21:46 
GeneralRe: Trouble when work with RequiredFieldValidator PinmemberMember 41604417-Jul-08 23:17 
GeneralBetter Solution (?) PinmemberChicagoNovice10-Jun-08 3:59 
GeneralHi companion PinmemberAnil Srivastava8-Jun-08 20:04 
GeneralRe: Hi companion PinmemberChristian Del Bianco16-Jun-08 1:00 
QuestionIt is possible to allow the option group item to be selected ? PinmemberSmugB3-Jun-08 0:11 
AnswerRe: It is possible to allow the option group item to be selected ? PinmemberChristian Del Bianco3-Jun-08 21:46 
GeneralOnValueChanged event not working Pinmembersi130-May-08 5:05 
GeneralRe: OnValueChanged event not working PinmemberChristian Del Bianco4-Jun-08 2:25 
GeneralRe: OnValueChanged event not working Pinmemberjosehr11-Jul-08 9:26 
QuestionRe: OnValueChanged event not working Pinmembersurajkikiran29-Jun-09 1:41 
GeneralCan't seem to open the test website project Pinmemberdefwebserver27-May-08 5:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web02 | 2.8.140721.1 | Last Updated 19 Jun 2008
Article Copyright 2008 by Christian Del Bianco
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid