 |
Web Development »
Custom Controls »
General
Intermediate
ComboBox Control for ASP.NETBy brian dunningtonProvides ComboBox functionality for your ASP.NET web pages, just like the ComboBox so common in WinForms. Now with auto-fill support as well. |
C#.NET1.1, Win2K, WinXP, ASP.NET, WebForms, VS.NET2003, Dev
|
|
Advanced Search Add to IE Search |
|
|
|
||||||||||||||||
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:
DropDownList control, including all visual styles, data binding, and working with Validator controls.
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.
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.
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.
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!
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).
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).
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.
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. =)
.SelectedItem and .SelectedValue properties.
.Width property must be set to a value expressed in pixels. SelectedIndexChanged event not firing and the other dealing with the ItemCommand event not firing (thanks to CGRothrock and Farooq Azam for finding these). .SelectedValue fix was made a few days ago). Now both items should be fixed. 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. MaxLength property when set via the designer (thanks to RSBCTrumpet for finding this bug). 
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads.
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 5 May 2006 Editor: Smitha Vijayan |
Copyright 2005 by brian dunnington Everything else Copyright © CodeProject, 1999-2010 Web22 | Advertise on the Code Project |
