Published: 16 Feb 2007
By: Muhammad Mosa

The ASP.NET ComboBox is an attempt to try and enhance some of the features of the Normal ASP.NET DropDownList.

Introduction

The ASP.NET ComboBox idea is simple; it is a custom composite control that contains two controls (TextBox, Image). The ComboBox Control inherits directly from System.Web.UI.WebControls.ListControl to inherit all design time capabilities; after all it is a ListControl like all other List Controls such as DropDownList, ListBox, RadioButtonList etc.

ASP.NET ComboBox Control Layout

I've chosen a div to align the ASP.NET ComboBox child controls. The control is rendered as a container div and child controls placed within that container. ASP.NET ComboBox is using the base content rendered by its base class ListControl.

Figure 1. ASP.NET ComboBox Layout

Why did I choose ListControl?

The ListControl by default will render <select> HTML tag element. ASP.NET ComboBox will render its selection options as ListBox control which also inherits from the ListControl, but will allow only one option to be selected. As we are going to simulate a ListBox rendering, a property named Rows is added to ASP.NET ComboBox to limit the number of rows inside the list and it will enable scrolling if the number exceeds the Rows. The ListControl has 90% of my needed functionality implemented and comes with a lightweight viewstate. As for styling, I just need the fore color, background color, Font styles and the Css Class. The ListBox doesn't allow border styles, so even if you try to apply them it will not work.

ASP.NET ComboBox Control JavaScript

Initially the control visibility style is hidden. The visibility is toggled to visible when the TextBox or Image is clicked. In other words, when the first row is clicked. When the ListBox itself is clicked while visible of course the selected item text is displayed on the TextBox and the ListBox is hidden again. The same interaction is done when the Enter or Esc keyboard buttons are pressed. Below are the JavaScript functions used to hide and show ListBox:

Listing 1. JavaScript functions to hide and show list of options

Note: All JavaScript functions are available on ScsComboBoxUtil.js file on the source code attached to the article.

ASP.NET ComboBox Support for AutoPostBack

I didn't try to implement handling for PostBack because it is already implemented in the ListBox or TextBox child controls. So I decided to delegate this to the TextBox control. If you enabled the AutoPostBack Property, and change the selection on the ListBox, the TextBox Text property will set programmatically through the JavaScript. However this will not invoke the onchange client event of the TextBox, so I enforced the onchange client event to fire if the Text is changed on the TextBox.

Listing 2. JavaScript to display selected item text on the TextBox Listing 3. C# code for AutoPostBack overridden property, delegate AutoPostBack to the TextBox Control

Implementing IPostBackDataHandler

It is important to handle the postback data, since this could not be delegated to any child controls; we need to post the selected value as well as the text. Below is the implementation of the IPostBackDataHandler interface.

Listing 4. IPostBackDataHandler implementation

Delegate Properties to child controls

As the ListBox and TextBox have most of the properties needed already implemented, I delegated my needed properties to these controls properties. Some properties are handled by the control itself and not delegated, such as the Rows property.

Listing 5. Property delegation

Implementing PerformDataBinding method

I've added an additional feature to the ASP.NET ComboBox control, this feature enables you to insert a default option at the top of the ListItems. This is simple in case of a declarative list of options, but will require additional handling incase of data binding. Simply before binding data from the data source to the control, I add the default item if enabled to the top and all binded options will be added afterwards.

Listing 6. PerformDataBinding Implementation

Note: This implmenetation is almost similar to the implementation written in the base PerformDataBinding method in ListControl.

Control Style Support

I'm not going through this point right now, but I'll provide another article that describes how to support special styles for your controls. Basically we need to support the style for TextBox, Image and ListBox child controls. So the control will contain three properties, TextBoxStyle, ListBoxStyle and ImageStyle. In the next article I'll talk about these three properties.

Web Resources

The ASP.NET ComboBox control contains some JavaScript code, this code is wrapped in a ".js" file. The file is added as an embedded resource in the control assembly and the assembly Meta data, this file is marked as Web Resource file.

It worth mentioning also that the Image used in the control is stored as Web Resource too. If you do not provide the ImageUrl property, the control will render its default embedded image. This is commonly used in all third party controls to provide consistent look and feel for their controls.

To read a tip about how to register a file as web resource and render it with your control, please read my blog entry: System.Web.UI.WebResourceAttribute Issue

Control Rendering

I have applied control rendering by overriding the AddAttributesToRender and Render methods. I've also made a helper method to prepare the child controls for rendering. You may refer to the attached download file to see how these methods are implemented.

Listing 7. Render Methods

Composite Control Tips

Be sure to create you child control in the CreateChildControls method, and to call EnsureChildControls method before accessing your child controls in any property as shown in the above code, except in the Render method, as in that time all child controls would be created and ready.

Listing 8. Common Implementation for CreateChildControls

Implement the INamingContainer interface

Any control that implements this interface creates a new namespace in which all child control ID attributes are guaranteed to be unique within the entire page. It is interesting to know that this is a marker interface that has no methods or properties to implement.

Design Time and Code Editor support Tips

You'll find that some of the inherited properties are not used, or could be replaced with others. It is better to hide such properties from design time and from code editor. To do this, mark these properties with the following attributes.

Listing 9. Design Time and Code Editor Support

ASP.NET ComboBox What might not be good

The generated HTML of these controls is not 100% supported with Opera or other browsers, I've tested it with Opera, it is working but sometimes the behavior is not as expected. Also the positioned list box under the text box, sometimes is not 100% accurate. You may find some other issues as it has not tested thorouhly as it should be. I've added it to a production project and it didn't so far present in issues.

Conclusion:

The ASP.NET ComboBox is a simple control that is built to satisfy specific needs. It doesn't include many of the advanced features available in third party controls. It is based on the simple idea to hide the ListBox under the TextBox, and to show it only on demand. It can be enhanced to support auto suggest e.g. you type the first characters of the word and the ListBox automatically selects the first match. It also doesn't support multi column drop downs, which could be another enhancement. For bugs or enhancement, kindly contact me at mohammed_moses@yahoo.co.uk

Downloads

ASP.NET ComboBox Version 1.51
ASP.NET ComboBox Version 1.5
ASP.NET ComboBox Version 1.0

History

  • Version 1.5:
    • Drop down list is only displayed when the drop down arrow is clicked
    • Text box is enabled to enter free text by setting ScsComboBox.EnableFreeText Property
    • Support for key board up and down
    • Support for auto complete by searching the drop down list for match (type text and press tab key)
      Bugs Fixed:
    • Javascript error when placed inside GridView
    • Drop down Image not displayed when placed inside GridView
  • version 1.0:
    • Initial Release
<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Muhammad Mosa

Sorry, no bio is available

This author has published 8 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


JavaScript with ASP.NET 2.0 Pages - Part 1
ASP.NET 2.0 has made quite a few enhancements over ASP.NET 1.x in terms of handling common client-si...
Upload multiple files using the HtmlInputFile control
In this article, Haissam Abdul Malak will explain how to upload multiple files using several file up...
JavaScript with ASP.NET 2.0 Pages - Part 2
ASP.NET provides a number of ways of working with client-side script. This article explores the usag...
Using WebParts in ASP.Net 2.0
This article describes various aspects of using webparts in asp.net 2.0.
An Architectural View of the ASP.NET MVC Framework
Dino Esposito introduces the ASP.NET MVC framework.

You might also be interested in the following related blog posts


WPF DataGrid as ComboBox Dropdown read more
Multiple-Selection ComboBox for Silverlight read more
WPF Release History : Q2 2009 (version 2009.2.701) read more
ASP.NET combobox dropdownlist with images read more
How to Customize the New AjaxControlToolkit Tools read more
Silverlight Release History : Q2 2009 (version 2009.2.701) read more
Reporting Release History : Q2 2009 SP1 (version 3.1.9.807) read more
ORM Release History : Q2 2009 (2009.2.701.5) read more
Menu Merge (RadControls for WinForms) read more
A Default Command for Silverlight read more
Top
 
 
 

Discussion


Subject Author Date
placeholder Right to left issues Ariel R 6/3/2007 11:39 AM
Firefox compatibility problem Ariel R 6/4/2007 3:19 AM
placeholder FireFox issue Muhammad Mosa 6/4/2007 7:52 AM
RE: FireFox issue Ravindra Thakur 12/24/2007 11:16 AM
placeholder Firefox compatibility problem Ariel R 6/4/2007 9:40 AM
Firefox compatibility problem Ariel R 6/5/2007 3:56 AM
placeholder FF Issue Muhammad Mosa 6/5/2007 4:10 AM
Firefox problem Yao Rb 12/19/2009 3:22 PM
placeholder Firefox compatibility problem Ariel R 6/8/2007 9:36 AM
TextBox updates not working and Code changes Chris Porter 6/19/2007 12:56 PM
placeholder Ouch, comments are hard to read when posted... Let me try this Chris Porter 6/19/2007 12:57 PM
The first code changes (sorry for the order) Chris Porter 6/19/2007 12:59 PM
placeholder The second code change Chris Porter 6/19/2007 12:59 PM
TextBox text changes not being updated Chris Porter 6/19/2007 1:01 PM
placeholder Fixed Chris Porter 6/19/2007 5:13 PM
New version soon Muhammad Mosa 6/20/2007 3:39 AM
placeholder RE: New version soon Ketaki Pore 12/23/2007 5:29 AM
RE: New version soon Ketaki Pore 12/23/2007 5:29 AM
placeholder Firefox issues Ariel R 6/20/2007 3:48 AM
I got it Ariel Muhammad Mosa 6/20/2007 4:35 AM
placeholder Abs Positioning Michael Cofer 7/9/2007 5:13 PM
Re Abs Positioning Muhammad Mosa 7/10/2007 8:12 AM
placeholder Can not enter Text Suhas Ghorpadkar 7/23/2007 5:54 PM
AutoComplete without pressing Tab Bob Boffin 9/5/2007 6:04 AM
placeholder listbox position Greg Brotzge 9/11/2007 11:34 AM
RE: listbox position Muhammad Mosa 9/11/2007 11:57 AM
placeholder RE: RE: listbox position Greg Brotzge 9/12/2007 10:45 AM
TabIndex Rhajjie Yap 10/19/2007 3:06 AM
placeholder RE: TabIndex Anderson Rocha 11/8/2007 7:52 AM
VB version? Pong Ting 12/5/2007 4:34 AM
placeholder RE: VB Version Muhammad Mosa 12/5/2007 5:08 AM
Autocomplete not work Pong Ting 12/5/2007 10:22 PM
placeholder Javascript error Keith Smith 5/3/2007 12:52 PM
CSS positioning of element containing the ComboBox Gary Momenee 1/8/2008 6:57 PM
placeholder RE: CSS positioning of element containing the ComboBox Muhammad Mosa 1/11/2008 8:52 PM
ASP.NET AJAX ComboBox Muhammad Mosa 1/8/2008 9:02 PM
placeholder ASP.NET AJAX ComboBox Muhammad Mosa 1/8/2008 9:03 PM
Update on using this control Keith Smith 5/5/2007 2:46 AM
placeholder TabIndex is not working Muthu Krishnan 2/14/2008 4:50 AM
RE: TabIndex is not working Muhammad Mosa 2/14/2008 6:45 AM
placeholder RE: RE: TabIndex is not working Muthu Krishnan 2/15/2008 6:52 AM
Facing same problem CARLOS AGUSTÍN 5/5/2007 8:48 PM
placeholder Sorry for being late Muhammad Mosa 5/6/2007 8:43 AM
Update on control Keith Smith 5/6/2007 5:32 PM
placeholder Thanks for the hints Smith Muhammad Mosa 5/7/2007 9:31 AM
The Text Value gets ost when some item is selected in the combo Hemangajit Dutta 5/29/2008 10:16 AM
placeholder Update on control Keith Smith 5/8/2007 2:56 AM
I'll work on updates Muhammad Mosa 5/8/2007 7:18 AM
placeholder Combo - Listbox stlye Lay Lim 7/22/2008 7:34 PM
RE: Combo - Listbox stlye Muhammad Mosa 7/23/2008 5:23 AM
placeholder RE: RE: Combo - Listbox stlye Lay Lim 7/23/2008 6:56 PM
ASP.NET AJAX ComboBox Page asdfg1as 8/12/2008 1:47 PM
placeholder Update on new version of the control Keith Smith 5/17/2007 10:34 AM
I'll Check that up Muhammad Mosa 5/17/2007 11:22 AM
placeholder Fixed! Muhammad Mosa 5/17/2007 3:46 PM
ComboBox and EditItem template Keith Smith 5/22/2007 9:23 AM
placeholder RE: ComboBox and EditItem template Muhammad Mosa 2/15/2008 8:47 AM
Firefox and Google crome Issue Ramesh Nagineni 1/10/2009 11:34 AM
placeholder RE: Firefox and Google crome Issue Ramesh Nagineni 1/10/2009 11:37 AM
Firefox Wrapper not defined Sfdfhkls Fsdkhfks 3/27/2009 8:52 AM
placeholder Firefox Wrapper not defined Sfdfhkls Fsdkhfks 3/27/2009 8:52 AM
Firefox Wrapper not defined Sfdfhkls Fsdkhfks 3/27/2009 8:52 AM
placeholder Firefox Wrapper not defined Sfdfhkls Fsdkhfks 3/27/2009 8:52 AM
Firefox Wrapper not defined Sfdfhkls Fsdkhfks 3/27/2009 8:53 AM

Please login to rate or to leave a comment.