Using server controls in ASP.NET is pretty slick. Having a robust programming model to interact with your HTML elements surely makes life nice. While ASP.NET ships with all of the most common server controls that you might need, it is always fun to add to your toolbox. This
ComboBox control mimics the functionality of ComboBoxes from the WinForms world - letting the user select from a pre-defined list of choices or type in a new value.
This is not the first or only implementation of
ComboBox functionality on the internet, or even on Code Project. This article provided one solution, but it was based on Microsoft behaviors, making it IE-specific, and it used custom images to simulate the dropdown arrow.
This article provided a solution that visually looked like a real
<SELECT> box, but it relied on behaviors as well - but I wanted a complete cross-browser support and didn't want to deal with the extra .htc file.
I also stumbled across this implementation from MetaBuilders. It was cross-browser compatible and degraded gracefully, but it still didn't look like a normal HTML element and it had an annoying 'flash' as it re-drew in the browser when it was loaded.
Finally, I found a very slick implementation from Opinionated Geek that seemed to be what I was looking for. It looked just like a real
<SELECT> box and seemed to degrade gracefully in older browsers. However, it was a commercial product and I wanted something I could tweak myself. I thought to myself - "Guess I will just have to write my own.". So I did.
When developing this control, I had several design goals in my mind:
- Must be cross-browser compatible with all current-generation browsers.
- Must degrade gracefully (and still provide basic functionality) in older browsers.
- Must be self-contained so that it could just be dropped on the page and 'work'.
- Must support all of the properties of the standard
DropDownList control, including all visual styles, data binding, and working with
- Must not have any layout display limitations. (I.e. absolute positioning, side-by-side positioning, etc.)
Hopefully, when you download and try the attached code, you will find that all of these criteria have been met. The sample web page illustrates several scenarios in which the
ComboBox control can be used. That said, I have not tried every single possible crazy scenario that could exist. If you find something that this control cannot do or suggestions for improvement, post your comments here and I will update the code.
Update - AutoFill
Several people asked me if this control supported the 'auto-fill' technique like that found at Google Suggest. I have added support for a simple version of this technique. By setting the
EnableAutoFill property to
true, the control will automatically fill in with the pre-defined values as the user types. (Unlike Google Suggest, however, the option list is not dynamically generated with each keystroke). Let me know how you like it.
Update - Design-time support and more
My bad on this one - I neglected to add the design-time attributes to the class files that I uploaded. This has been rectified, so now the control has full design-time support. Also, I fixed the issue that made the AutoFill case-sensitive. Please download the code again to get both of these fixes.
Update - .SelectedItem and .SelectedValue properties
Based on the suggestion and code sample from Pinndulum (see posts below), I have uploaded a new version of the control that better utilizes the
.SelectedValue properties of the control. Now the text value and the value of the selected
ListItem are both available programmatically. Thanks Pinndulum!
Update - SelectedIndexChanged not firing - fixed
When the control was set to
onchange. Although that is technically the correct behavior, having the
SelectedIndexChanged event was more important, so I commented out the offending line. (Thanks to CGRothrock for finding this bug).
Update - Added support for 'GridLayout'
When the control was placed on pages that were using the GridLayout format, the control was not rendering in the correct spot. The bug was due to the fact that the designer-applied positioning was lost at render time. (Thanks to TWheelhouse for finding this bug and suggesting the fix).
- Initial version released.
- New version with Auto-Fill support released.
- New version with design-time support released.
- New version with Pinndulum's suggested changes for
- New version that removes the restriction that the
.Width property must be set to a value expressed in pixels.
- Fixed two bugs: one dealing with the
SelectedIndexChanged event not firing and the other dealing with the
ItemCommand event not firing (thanks to CGRothrock and Farooq Azam for finding these).
- Fixed a bug that made the control incompatible with 'GridLayout'. (Thanks to TWheelhouse for finding this bug and suggesting the fix.)
- Fixed a bug that caused some funny rendering in Firefox (a bug that was introduced when the
.SelectedValue fix was made a few days ago). Now both items should be fixed.
- New version separates the
ComboBox control code out into a stand-alone project and includes a pre-compiled Release version of the control. Also fixed a bug where the
ExternalResourcePath property was not visible in the designer.
- Fixed a bug with the
MaxLength property when set via the designer (thanks to RSBCTrumpet for finding this bug).