Click here to Skip to main content
Click here to Skip to main content

Multi-column dropdown combobox - an ASP.NET 2.0 server control

, 9 Feb 2006
Rate this:
Please Sign up or sign in to vote.
Multi-column dropdown combobox - an ASP.NET 2.0 server control.

Introduction

This code drop is part of a smash and grab series. If you're in a rush, you can just grab this code and insert it into your application, no understanding is required. When you have some time (ya, right), you may want to review the source code.

Background

I was presented with a project to convert an Access single-user application into a web-based multi-user SQL Server application. The Access application has a number of multicolumn dropdown lists and I couldn't find what I needed anywhere on the internet. So I wrote my own.

For this article, I have used the Products, Suppliers and Categories table in the NorthWind database.

Using the code

  • Download the project, unzip it to somewhere on your hard disk.
  • Create a new ASP.NET project.
  • Right click on the project and select Add existing item.
  • Navigate to the folder that you unzipped to, and select the .JS and .GIF files.
  • Create a bin folder for the project.
  • Right click on bin and choose Add existing item.
  • Select Tools > Choose toolbox items.
  • Navigate to the unzip folder and select the DLL.
  • This new server control now appears in the toolbox under General.
  • Drag an instance of it onto Default.aspx.
  • Drag an instance of SqlDataSource onto Default.aspx.
  • Configure the datasource to use the custom SQL statement:
    SELECT Products.ProductID, Products.ProductName, 
        left(Products.ProductName+SPACE(40),40)+Suppliers.CompanyName as Name, 
        Categories.CategoryName 
    FROM Products 
    INNER JOIN Categories ON Products.CategoryID = Categories.CategoryID 
    INNER JOIN Suppliers ON Products.SupplierID = Suppliers.SupplierID 
    order by Categories.CategoryName, Products.ProductName

Set these properties on the DropDownComboControl:

  • DropDownCssStyle: font-family: monospace; background-color: yellow
  • DropDownCssClass:
  • DropDownMonospace: true
  • DropDownSize: 10
  • TextBoxCssStyle: background-color: blue
  • TextBoxCssClass:
  • TextBoxColumns: 20
  • TextBoxMaxLength: 30
  • PickOnly: false
  • onchange: SetTextBox(this, this.options[this.selectedIndex].extra);
  • DataExtraField: ProductName
  • DataOptGroup: CategoryName
  • DataSourceID: SqlDataSource1
  • DataTextField: Name
  • DataValueField: ProductID
  • ImageFolder: .
  • ImageWidth: 26
  • ScriptFolder: .

Other than DataSourceID, DataTextField and DataValueField, all the other properties listed are new. The control consists of a textbox (<input> element) and a dropdownlist (<select> element).

Properties of interest:

  • Border: (1px solid InactiveBorder) sets the border of the control.
  • DropDownCssClass: sets the class attribute of the <select> element.
  • DropDownCssStyle: sets the style attribute of the <select> element.
  • DropDownSize: sets the size attribute of the <select> element.
  • TextBoxCssClass: sets the class attribute of the <input> element.
  • TextBoxCssStyle: sets the style attribute of the <input> element.
  • TextBoxColumns: sets the size attribute of the <input> element.
  • TextBoxMaxLength: sets the maxlength attribute of the <input> element.
  • PickOnly (true/false): when set to true you can only pick from the list, you can't enter a custom value.
  • DataOptGroup: the combo box can implement the <optgroup> functionality (see the screenshot above). This property tells the combo box which datafield contains the optgroup value. A new <optgroup> is created each time the specified value changes, so in the above SELECT statement, you can see that the ORDER BY clause is set to CatagoryName first.
  • DataExtraField: the combo box can place extra information in the <option> tag. For example: <option value="3" extra="coffee">coffee by martha</option> You will see later how this is used.
  • ImageFolder: this is the folder in which the dropdown image resides (. for current folder).
  • ImageWidth: the width of the dropdown image. The image provided is 26px.
  • ScriptFolder: this is the folder in which the JavaScript code resides (. for current folder).

In the screen shot above, you can see that the dropdown is a lot wider than the textbox. This allows you to present more information to the user about the selection, but once selected, consumes much less real-estate.

In the screen shot, I wanted the dropdown to be multi-column with the second column data aligned correctly. To do this, I needed to choose a fixed-width font:

  • DropDownCssStyle: font-family: 'courier new', 'monospace'

    I had to make sure that multiple spaces weren't collapsed into a single space as is the HTML standard. I did this by setting DropDownCollapseSpaces: false. This property tells the control to replace spaces with  - thus preserving spacing. The control will by default fill the text box with the selected dropdown entry.

In the example, I didn't want the company name in the textbox, so I added an OnClick event handler:

ComboWithAdjustableDropDownWidth.SetTextBox(this, 
                       this.options[this.selectedIndex].extra);

This takes the extra information (remember DataExtraField) that we stored in the <option> and puts it in the text box. You can set the OnClick handler to whatever you want.

Points of interest

The control also works with databinding for use in GridView, etc.

<cc1:combowithadjustabledropdownwidth 
     id="ComboWithAdjustableDropDownWidth1" runat="server" 
     ...
     SelectedValue='<%# Bind("SupplierID") %>
</cc1:combowithadjustabledropdownwidth>

You'll have to hand edit this into the source code, because VS2005 doesn't do it for you. In the source zip file, I have included a small project that shows databinding to a FormView element. The project also lists some other fixed pitch fonts.

Conclusions

There you go, a cheap (well free) ASP.NET 2.0 ComboBox that suits my needs and hopefully yours.

SmashGrab / Redux series

I have recently started two series of articles here at CodeProject. Smash and Grab is intended as a series of short articles on one specific code technique. Redux is intended as a series of longer articles which attempt to reduce a complicated topic (like GridView) into its basic constituent parts and show that once you have all the information, it wasn't really that hard after all. To find the Smash and Grab articles, search for the keyword SmashGrab. To find the Redux articles, search for the keyword Redux.

I welcome any contributions to either series, but please follow the guidelines when submitting articles to either.

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

Gary Dryden
Software Developer (Senior)
Canada Canada
No Biography provided

Comments and Discussions

 
GeneralMy vote of 1 Pinmemberprayerlin rex18-Jan-10 22:27 
Questionfree text Pinmemberakan4717-Jul-09 5:56 
QuestionSet data value? Pinmembermichael.richardson.200228-Aug-08 4:42 
GeneralParser Error Pinmembermichael.richardson.200226-Aug-08 11:51 
GeneralRe: Parser Error Pinmembermichael.richardson.200227-Aug-08 11:22 
QuestionMultiple Column Drop Down PinmemberMember 233735927-Mar-08 19:38 
QuestionMulti-column dropdown combobox [modified] Pinmemberhl786-Mar-08 0:57 
AnswerRe: Multi-column dropdown combobox PinmemberMuneeeb30-Jun-08 23:49 
QuestionImages in the combo box? Pinmembermmengel11-Jan-08 7:50 
GeneralRe: Images in the combo box? PinmemberGary Dryden11-Jan-08 8:04 
GeneralDropDown behaviour on Custom Browser [modified] PinmemberJohn Gathogo12-Jun-07 0:28 
GeneralUnable to use with Masterpages PinmemberRAJESH M11-May-07 20:31 
GeneralRe: Unable to use with Masterpages PinmemberHookemHorns4-Oct-07 12:24 
GeneralRe: Unable to use with Masterpages PinmemberEdin_el_Bosnewi9-Feb-08 5:23 
Generaladd header and two columns Pinmemberdsmportal9-Apr-07 10:39 
Generaladd header Pinmemberdsmportal9-Apr-07 10:32 
GeneralMoving mouse over different options in the list PinmemberMember #369148716-Mar-07 0:20 
QuestionIE7 Compatibility?? PinmemberdougBR8-Dec-06 9:40 
GeneralATL Pinmemberjeswanma3-Dec-06 20:56 
GeneralIssue in passing a Where clause to select statement Pinmembermohanol10-Nov-06 7:46 
GeneralSearchable drop down Pinmembersaurabh7626-Sep-06 1:32 
GeneralRe: Searchable drop down PinmemberArnold Wiersma26-Feb-08 5:42 
General2 helpful mods Pinmemberjohwat15-Aug-06 13:01 
GeneralUsing scroll bar causes list to close PinmemberGonzonia17-May-06 9:01 
Generaldatabind Pinmemberalnp13-Apr-06 14:19 

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 | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 10 Feb 2006
Article Copyright 2006 by Gary Dryden
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid