Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

DropDownList with support for the optgroup element

2.33/5 (11 votes)
24 Mar 2008CPOL4 min read 1   1.2K  
ASP.NET lacks for support of option groups since its first release. My goal is to fill out this hole in the .NET framework.

Introduction

I've recently noticed that many programmers miss the functionality of option groups in the .NET Framework selection controls. After a while, I decided to write my own control, that works similar to the System.Web.UI.DropDownList control available in the.NET framework. My control is available for .NET framework 2.0 or later.

Background, W3 recommendation

When working with the DropDownGroupableList control, please keep in mind the restrictions related to option groups and option items defined by the W3 Consortium. See this article. A good website programmer is not defined only through the effectiveness of his program code :-)

Data source types

Data can be delivered in four different ways:

  • Inline items definition
  • Note: this enables you to specify option groups as well as option items.

  • Manual filling in the Items collection in your code.
  • Note: Notice the AddItem and AddGroup methods exposed by the Items collection.

  • DataSource property containing valid IEnumerable data.
  • Declarative data source provided by the control referenced by the DataSourceID property.

Provided data, declarative or manual through the DataSource property, may be handled the normal way, or hierarchically - read the following paragraph.

Hierarchical data source support

If the provided data source implements IHierarchicalEnumerable, then DropDownGroupableList works a little differently according to data processing. It is based on the theory that option groups, together with items, represent some kind of two-level hierarchy.

You can control hierarchical data processing by these settings:

  • IgnoreFirstBoundParent - this instructs a list control that it should ignore the first bound parent and bind its children instead. This means that the first parent is the root of the data that is really bound. This can be helpful when binding site maps that have one root node that plays no role inside site navigation. The default value is false.
  • BindEmptyParentAsListItem - this setting controls how to process empty parents. There are generally two ways you can handle empty parents: create an option group with no child options (then it cannot be selected), or create an option item you can select. The default value is true.
  • DataGroupTextField, DataGroupTextFormatString, and DataGroupIDField - similar to the well-known properties from DropDownList, but refers to option group attributes.

Common properties

If you are familiar with the System.Web.UI.WebControls.DropDownList control (and you should be when reading this article), you probably know its functionality and behavior. Here are listed some important and commonly used capabilities that my control has in common with the standard DropDownList:

  • AppendDataBoundItems - value that specifies if the Items collection is cleared before binding data.
  • AutoPostBack - sends form back to the server after the selected item is changed.
  • CausesValidation, ValidationGroup - properties that work together to ensure the control's validity
  • DataTextField, DataValueField - names of bound object properties that contain the Text property value or the Value property value, respectively.
  • SelectedItemChanged - occurs when the selected item changes; note this event is not related to option groups since they cannot be selected.

Differences from the standard DropDownList

SelectedValue

When you set the value of the property SelectedValue to a value that corresponds to more than one item (e.g., you inserted more items with the same value), then an exception is thrown.

ListItem.Enabled

The Enabled property of the System.Web.UI.WebControls.ListItem class influences its visibility on the page. I decided to change this behavior, so setting this value to false makes it disabled via the disabled HTML attribute, but it is still being rendered.

Items collection

This collection definition works with the abstract OptionItemBase class that is implemented by the OptionListItem and OptionGroupItem classes. This enables my list control to contain option items as well as option groups at the top level. The OptionGroupItem class then may contain only OptionListItem class instances, no inner groups are allowed since it is not part of the W3 recommendation.

Samples

The attached zip file contains the following sample pages:

  • DynamicDataSource.aspx - demonstrates dynamic filling in from code-behind.
  • InlineDataDefinition.aspx - demonstrates inline Items definition.
  • HierarchicalDataSource.aspx - shows capabilities of hierarchical data source functionality.

Conclusion

It took me some noticeable time to create and debug this component, so I hope it will be helpful for all ASP.NET programmers. Feel free to use it :-)

License

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