Click here to Skip to main content
11,639,593 members (60,506 online)
Click here to Skip to main content

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

, 9 Feb 2006 205.1K 2.4K 88
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

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 1 Pin
prayerlin rex18-Jan-10 21:27
memberprayerlin rex18-Jan-10 21:27 
Questionfree text Pin
akan4717-Jul-09 4:56
memberakan4717-Jul-09 4:56 
QuestionSet data value? Pin
michael.richardson.200228-Aug-08 3:42
membermichael.richardson.200228-Aug-08 3:42 
GeneralParser Error Pin
michael.richardson.200226-Aug-08 10:51
membermichael.richardson.200226-Aug-08 10:51 
GeneralRe: Parser Error Pin
michael.richardson.200227-Aug-08 10:22
membermichael.richardson.200227-Aug-08 10:22 
QuestionMultiple Column Drop Down Pin
Member 233735927-Mar-08 18:38
memberMember 233735927-Mar-08 18:38 
QuestionMulti-column dropdown combobox [modified] Pin
hl785-Mar-08 23:57
memberhl785-Mar-08 23:57 
AnswerRe: Multi-column dropdown combobox Pin
Muneeeb30-Jun-08 22:49
memberMuneeeb30-Jun-08 22:49 
QuestionImages in the combo box? Pin
mmengel11-Jan-08 6:50
membermmengel11-Jan-08 6:50 
GeneralRe: Images in the combo box? Pin
Gary Dryden11-Jan-08 7:04
memberGary Dryden11-Jan-08 7:04 
GeneralDropDown behaviour on Custom Browser [modified] Pin
John Gathogo11-Jun-07 23:28
memberJohn Gathogo11-Jun-07 23:28 
GeneralUnable to use with Masterpages Pin
RAJESH M11-May-07 19:31
memberRAJESH M11-May-07 19:31 
GeneralRe: Unable to use with Masterpages Pin
HookemHorns4-Oct-07 11:24
memberHookemHorns4-Oct-07 11:24 
GeneralRe: Unable to use with Masterpages Pin
Edin_el_Bosnewi9-Feb-08 4:23
memberEdin_el_Bosnewi9-Feb-08 4:23 
Generaladd header and two columns Pin
dsmportal9-Apr-07 9:39
memberdsmportal9-Apr-07 9:39 
Generaladd header Pin
dsmportal9-Apr-07 9:32
memberdsmportal9-Apr-07 9:32 
GeneralMoving mouse over different options in the list Pin
Member #369148715-Mar-07 23:20
memberMember #369148715-Mar-07 23:20 
QuestionIE7 Compatibility?? Pin
dougBR8-Dec-06 8:40
memberdougBR8-Dec-06 8:40 
GeneralATL Pin
jeswanma3-Dec-06 19:56
memberjeswanma3-Dec-06 19:56 
GeneralIssue in passing a Where clause to select statement Pin
mohanol10-Nov-06 6:46
membermohanol10-Nov-06 6:46 
GeneralSearchable drop down Pin
saurabh7626-Sep-06 0:32
membersaurabh7626-Sep-06 0:32 
GeneralRe: Searchable drop down Pin
Arnold Wiersma26-Feb-08 4:42
memberArnold Wiersma26-Feb-08 4:42 
General2 helpful mods Pin
johwat15-Aug-06 12:01
memberjohwat15-Aug-06 12:01 
GeneralUsing scroll bar causes list to close Pin
Gonzonia17-May-06 8:01
memberGonzonia17-May-06 8:01 
Generaldatabind Pin
alnp13-Apr-06 13:19
memberalnp13-Apr-06 13:19 
GeneralLost value when page postback Pin
lanzhang129-Mar-06 13:13
memberlanzhang129-Mar-06 13:13 
GeneralRe: Lost value when page postback Pin
Gary Dryden29-Mar-06 13:26
memberGary Dryden29-Mar-06 13:26 
GeneralRe: Lost value when page postback Pin
lanzhang129-Mar-06 19:23
memberlanzhang129-Mar-06 19:23 
GeneralRe: Lost value when page postback Pin
Gary Dryden30-Mar-06 2:12
memberGary Dryden30-Mar-06 2:12 
GeneralRe: Lost value when page postback Pin
lanzhang130-Mar-06 5:09
memberlanzhang130-Mar-06 5:09 
GeneralRe: Lost value when page postback Pin
-dc-30-Nov-06 9:38
member-dc-30-Nov-06 9:38 
GeneralRe: Lost value when page postback Pin
landryy2-Jun-06 4:10
memberlandryy2-Jun-06 4:10 
GeneralRe: Lost value when page postback Pin
eiu16515-Feb-08 9:50
membereiu16515-Feb-08 9:50 
GeneralNo Selected value 2 Pin
MatthieuQ27-Feb-06 10:38
memberMatthieuQ27-Feb-06 10:38 
GeneralRe: No Selected value 2 Pin
MatthieuQ27-Feb-06 10:39
memberMatthieuQ27-Feb-06 10:39 
GeneralNo Selected value Pin
Benson8816-Feb-06 8:07
memberBenson8816-Feb-06 8:07 
GeneralDuplicate results and no bind value Pin
RuiPedro14-Feb-06 9:06
memberRuiPedro14-Feb-06 9:06 
GeneralRe: Duplicate results and no bind value Pin
Gary Dryden14-Feb-06 10:53
memberGary Dryden14-Feb-06 10:53 
GeneralRe: Duplicate results and no bind value Pin
RuiPedro16-Feb-06 6:09
memberRuiPedro16-Feb-06 6:09 
GeneralRe: Duplicate results and no bind value Pin
Gary Dryden16-Feb-06 9:07
memberGary Dryden16-Feb-06 9:07 
GeneralRe: Duplicate results and no bind value Pin
RuiPedro20-Feb-06 6:37
memberRuiPedro20-Feb-06 6:37 
GeneralRe: Duplicate results and no bind value Pin
GailHL2-Aug-06 0:10
memberGailHL2-Aug-06 0:10 
GeneralRe: Duplicate results and no bind value Pin
RuiPedro2-Aug-06 8:57
memberRuiPedro2-Aug-06 8:57 
Questioncustom value? Pin
.bill31-Jan-06 12:24
member.bill31-Jan-06 12:24 
AnswerRe: custom value? Pin
.bill31-Jan-06 12:32
member.bill31-Jan-06 12:32 
AnswerRe: custom value? Pin
Gary Dryden1-Feb-06 3:58
memberGary Dryden1-Feb-06 3:58 
GeneralRe: custom value? Pin
rbm_the_spitfire9-Nov-06 1:03
memberrbm_the_spitfire9-Nov-06 1:03 
GeneralObject ref error Pin
.bill30-Jan-06 18:28
member.bill30-Jan-06 18:28 
GeneralRe: Object ref error Pin
.bill31-Jan-06 7:30
member.bill31-Jan-06 7:30 
GeneralRe: Object ref error Pin
Gary Dryden31-Jan-06 8:03
memberGary Dryden31-Jan-06 8:03 

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
Web03 | 2.8.150731.1 | Last Updated 10 Feb 2006
Article Copyright 2006 by Gary Dryden
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid