Introduction
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.
Alternatives
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.
Highlights
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 Validator controls.
- 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 .SelectedItem and .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 AutoPostBack, the SelectedIndexChanged event was not being fired. This was due to some JavaScript that resets the selectedIndex property 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).
Update - Added support for external JavaScript plus bug fixes
After several suggestions, I have finally added support for an external JavaScript file. If you set the ExternalResourcePath property to the location of a valid .js file, the control will use that instead of emitting the JavaScript inline. Also, I think the Firefox rendering/selectedIndex problem finally has an acceptable solution. Thanks to all who helped with ideas and fixes for this update.
Credits
My thanks goes to the authors of the other articles mentioned in this article for providing me the idea to create this control. Special credit must be given to the developers at Opinionated Geek for providing such a slick implementation that I had something to aspire to. Reviewing some of their JavaScript also provided valuable advice on how to get that pesky 1-pixel spacing issue resolved in IE browsers. =)
History
- 05.27.2005
- Initial version released.
- 06.02.2005
- New version with Auto-Fill support released.
- New version with design-time support released.
- 06.03.2005
- New version with Pinndulum's suggested changes for
.SelectedItem and .SelectedValue properties.
- New version that removes the restriction that the
.Width property must be set to a value expressed in pixels.
- 06.06.2005
- 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).
- 06.07.2005
- Fixed a bug that made the control incompatible with 'GridLayout'. (Thanks to TWheelhouse for finding this bug and suggesting the fix.)
- 06.09.2005
- 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.
- 06.10.2005
- New version supports an option for linking to an external JavaScript instead of emitting it inline. Also enhances the Firefox rendering/selectedIndex issue (thanks to Bryan Pino for the suggested fixes).
- 06.13.2005
- 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.
- 06.17.2005
- Fixed a bug with the
MaxLength property when set via the designer (thanks to RSBCTrumpet for finding this bug).
