Click here to Skip to main content
Click here to Skip to main content
Go to top

ComboBox Control for ASP.NET

, 5 May 2006
Rate this:
Please Sign up or sign in to vote.
Provides ComboBox functionality for your ASP.NET web pages, just like the ComboBox so common in WinForms. Now with auto-fill support as well.

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).

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

brian dunnington
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
QuestionHow do I programmaticly get access to the DataFieldText (ie the selected item, not the returned value) Pinmembermichaelfurr25-Jun-14 3:40 
GeneralMy vote of 5 PinmemberD-Kishore4-Sep-12 19:01 
GeneralDoesn't render correctly in IE8 [modified] PinmemberRudi Ramey15-Oct-10 10:10 
QuestionImpressive work - Q: Binding XMLDataSource to Combobox? [modified] PinmemberTechpro15-Jun-10 4:44 
AnswerRe: Impressive work - Q: Binding XMLDataSource to Combobox? PinmemberTechpro15-Jun-10 5:25 
GeneralThank you very much Pinmembercynobody2-Apr-10 4:48 
QuestionDouble space is showing up as single space Pinmemberfarahpr26-Feb-10 9:42 
QuestionHow to disable input in combobox,just like a Dropdownlist? Pinmemberasatucap1-Sep-09 22:26 
Generalthanks! Pinmemberspandal29-Mar-09 17:28 
GeneralProblem entering the text Pinmembermayureshp2-Dec-08 1:24 
QuestionHow to multi-line on combobox? Pinmembervac250724-Nov-08 22:06 
GeneralAdding items with Javascript Pinmemberrick216419-Nov-08 6:22 
GeneralTable border Pinmembergecka7-Jul-08 21:21 
Generalhi This control support master pages Pinmemberkirthigha8-Feb-08 3:59 
QuestionTrying to access the control from the code behind. Pinmemberpskemp25-Jun-07 8:02 
Generalset textbox value in codebehind Pinmemberdixbear20-Jun-07 11:47 
QuestionAdding item using javascript Pinmembercmb00130-Mar-07 9:20 
QuestionIs dataset supported like datasource? Pinmemberandresfelipeclaros12-Mar-07 11:42 
Generalasp.net 2.0 PinmemberSfinger2-Mar-07 0:24 
GeneralRe: asp.net 2.0 Pinmemberxdyangyan27-Mar-07 5:19 
GeneralHow to Fix the Height and width problem Pinmembernji782-Nov-07 8:52 
GeneralRe: How to Fix the Height and width problem Pinmemberrwoehr6-Feb-08 8:05 
GeneralRe: asp.net 2.0 [modified] PinmemberMember 121696919-Jun-08 22:32 
QuestionHow do I get the new value the user typed in? PinmemberForogar14-Dec-06 9:29 
QuestionStackOverflowException on postback [modified] Pinmembernbrianc4-Dec-06 16:40 

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
Web03 | 2.8.140926.1 | Last Updated 5 May 2006
Article Copyright 2005 by brian dunnington
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid