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):
Selected property for child items
- Raises the
You can use the control at design-time as shown below:
<ddlb:optiongroupselect id="OptionGroupSelect1" runat="server" enableviewstate="true">
runat="server" Value="1" Text="ONE" OptionGroup="Odd" />
runat="server" Value="2" Text="TWO" OptionGroup="Even" />
runat="server" Value="3" Text="TREE" OptionGroup="Odd" />
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)
"Letter A", "Letters"));
"Letter B", "Letters"));
"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:
Selected. It inherits from the
WebControl class and simply overrides the
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.
Render method, I draw the
select HTML control, adding the
optgroup element, and for each child list item, call the relative
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
List<OptionGroupItem>. Moreover, the method
this.GetData() used inside the code extracts from the
DataSourceView object that points to the specified
DataTable indicated by the
PerformDataBinding: This method executes the real work. For each item, an
OptionGroupItem instance is created and added to the
More details about custom data-binding can be found at MSDN.