10.

48 Million members (64,314 online) Sign in

home articles quick answers discussions features community help Search for articles, questions, tips

Articles » Desktop Development » Combo & List Boxes » ComboBox Controls Next

Article
Searchable MultiColumn ComboBox with Linked TextBox About Article
Browse Code
By Darryl Caillouet, 31 Jan 2008
Bugs / Suggestions A multi-column combox
4.78 (48 votes) Rate this: that can link to a dataset or
Stats an array of objects.
Revisions Supports the hiding of
columns and the reordering
Alternatives Download demo - 14.9 KB of visible ones. The
combobox can display a
Comments & Download source - 42.2 KB field (like a code) while the
Discussions (106) linked text box can show
the corresponding
description. Supports auto-
completion and
RightToLeft langua

Type Article

Licence CPOL

First Posted 14 Aug 2007

Views 168,385

Downloads 8,344

Bookmarked 156 times

.NET2.0 VS2005 C#2.0

Windows Dev , +

Share 0

0
Like 1
Version 1.3 - Searchable with fixed width / hidden columns. Supports RightToLeft languages.
Tw eet 0

Introduction
Some of the users that I write programs for have to fill out forms that consist of selecting many codes from combo
boxes. These codes are fixed. The average user can not enter new codes but must select from a predetermined list of
values. The people who do the data entry are very familiar with the codes and are keyboard centric. They don't want to
use a mouse each time they enter a value. The people who view the data but don't do a lot of data entry are not as
familiar with the codes but want to see the more verbose text descriptions that each code is associated with.

The solution that I was trying to create was a multicolumn ComboBoxthat was linked to a read-only TextBox. When a
user selected an item from the C omboBox, it would display both the code and the description in a multicolumn
dropdown list. But when the C omboBoxclosed, I wanted to display the code in the ComboBox, and the description in
the Tex tBoxthat was linked to it. The code in the ComboBoxwould be bound to the database, and the TextBox
would be unbound and for informational purposes only. This way, both sets of users would be able to see the
information that was most important to them.

I also wanted to force the user to only select items that were in the ComboBoxlist. The user could not enter any text
that was not valid. So this control can operate in one of two modes:

1. AutoComplete= true. When AutoCompleteis set to true, the control behaves like a
ComboBoxStyle.DropDown. The user can type in a value, and it will auto complete based on the associated list
of values. If the user types a letter that will cause an invalid code to be entered, that keystroke is suppressed.
2. AutoComplete= false. When AutoCompleteis set to false, the control behaves like a
ComboBoxStyle.DropDownList(even though it actually has a ComboBoxStyle.DropDownvisual style). In
this mode, the user can hit a letter or number and the control will cycle through all of the list values that start
with that letter or number. But the closed C omboBoxnever displays the dividing lines between the columns like
aL istBox. It only shows the code value, no matter how wide the ComboBoxis.

Background
This article and the control I created would not have been possible if not for the work of Nishant Sivakumar and the
MultiColumn ComboBox control that he wrote. It was his work that helped me overcome all the tough obstacles that
were stopping me from creating what I needed. Once I found his code, I was able to create a solution in about a day. If
you like this control and find it useful, thank him first (and most). Instead of duplicating all his documentation here, I
would suggest you read about the control on his page if you want a better understanding of how my control works.
Top News
I would also like to acknowledge Laurent Muller since I used his forum suggestion as a basis for my auto-complete
functionality.
Steve Ballmer's temper
tantrum over Nokia buyout

Using the code led to his firing, says report

Get the Insider News free each

morning.
To use this code, all you have to do is select the MultiColumnComboBoxfrom the toolbox along with a TextBoxand
put them on a form.
Related Videos
Then, you can set the following properties:

AutoComplete: True makes it behave like an auto completing dropdown. False makes it behave like a read-only
dropdownlist.
AutoDropdown: When you press a key, it will automatically drop down the list so you can see the choices. In
AutoComplete= truemode, it will automatically close when you've typed in a valid selection.
BackColorEven: The back color of the even items in the list. The default is white.
BackColorOdd: The back color of the odd items in the list. The default is white. I always use a forecolor of black
so I did not code an Odd/Even forecolor property.
LinkedColumnIndex: What is the index of the column that you want the TextBoxto display? The majority of
my forms have the C omboBoxdisplay column 0 and the TextBoxdisplay column 1.
LinkedTextBox: Select a TextBoxfrom the dropdown list of controls on the form. When a TextBoxis linked
to the C omboBox, it is automatically set to ReadOnly= trueand TabStop= falseat design time.

Hitting the Escape key clears the ComboBoxand its associated TextBox.
Related Articles
Version 1.1 changes MultiColumnComboBoxEx: An
Extended Data-Bound Multiple
Column ComboBox
Once I started using the control and became a little more familiar with the code Nishant had written, I realized there Creating a Multicolumn Combo
were a few changes that I wanted to make in order to have it behave the way I needed it to. So I tweaked it a little: Box in ASP.NET
Autocomplete Menu
1. The Delete key clears the control and the linked T extBoxin the same way the Escape key did in the original
Beginning C# - Chapter 13:
version. Using Windows Form Controls
2. The Backspace key behaves like a left arrow key. It doesn't remove letters from the code since I wanted to
Flat-MultiColumn Combobox
enforce only valid selections. It just moves the caret back a space and repositions the list accordingly. with Autocomplete
3. The original version iterated through every item that was going to be in the dropdown list and dynamically set WPF PropertyGrid - MVVM
the column widths. As another member pointed out in the feedback, this was a problem when linking to objects techniques
with many public properties as they all showed up in the list. I decided to make the column width a user A Multi Column ComboBox
specified item so that columns could be hidden by setting the value to zero.
DataGrid Zen Novice
4. I added an example to the demo that shows one way to programmatically reference a hidden column of a
ComboBox with read only
selected combobox item, in case someone wanted to hide a column but use something like an ID or key value. behavior

Adding these features added two more properties: Multi-column dropdown

combobox - an ASP.NET 2.0
server control
ColumnWidthDefault: If a column width is not explicitly declared, this will be the width of the column.
ColumnWidths: A delimited string of column widths. To implement this feature, I copied a Microsoft Access LinkTextBox - a quick solution
for entering emails and
idiom of using a semi-colon delimited string to specify the column widths. A blank column is set to the default. hyperlinks
Look-up ComboBox
Here are a few examples:
Multi-Column ComboBox
Collapse | Copy Code
Multicolumn Combobox with
ColumnWidthDefault = 75 Additional Format Conditions
ColumnWidths =
ZatakTextBox
WPF Color Picker VS2010 Style
Result: Every column will be displayed with a default width of 75.
jQuery DataTables and ASP.NET
Bound to an object with six columns: MVC Integration - Part I
Create a ComboBox web
Collapse | Copy Code
control with jQuery and
ColumnWidthDefault = 75 ASP.NET
ColumnWidths = 100;;200
Lookup Search - ComboBox
Multicolumn, Multiselection
Result: Column0 = 100, Column1 = 75 (default), Column2 = 200; the remaining three columns all default to 75. SourceGrid - Open Source C#
Grid Control
Bound to an object with three columns:

Collapse | Copy Code

ColumnWidthDefault = 75
ColumnWidths = 0;50;150 Related Research

Result: Column0 is hidden with a width of zero, Column1 = 50, Column2 = 150.

Bound to an object with six columns:

Collapse | Copy Code

ColumnWidthDefault = 0
ColumnWidths = 50;100
Protecting Your Business Data:
Five Do’s and Don’ts
Result: Column0 = 50, Column1 = 100, all the rest are hidden because they are the default value of zero.
Version 1.2 changes
Binding the control to an array of objects that has a large number of properties was causing problems. While a dataset
will display its columns in the order they are defined, an object with a lot of public properties would display the
properties in the dropdown list in a random order. This made it impossible to use column indexes to set column widths
since there was no guarantee that a column would always be tied to a particular index.
Custom API Management for
To solve this problem, I added a new property so that the programmer could define which columns would be displayed the Enterprise: Learn how to
by name and which order they would appear. build a successful API strategy
[Webinar]
ColumnName: A delimited string of column names. The order of the names determines the order of the columns.
A blank string shows all the columns. An example would look like this:
Collapse | Copy Code
ProductCode;ProductCategory;ProductDescription

A few of the dropdown lists in my program have a lot of codes (several hundred). The majority of the time, the users
select a few very common choices that are easily memorized. But when a new user is learning the system or an
experienced user needs to locate a rarely used item, some kind of search utility can be helpful.
5 Key Phases in Creating a
Successful Mobile App
For this reason, I added a O penSearchFormevent to the class. When a user hits the <F3> key (the standard Windows
search key), this event gets fired. The programmer can then create any kind of search form he likes and tie it to this
event. I added an example search form to the demo where the user can enter a search word, hit the Enter key, and the
string will be located in the search grid. Double-clicking an item in the grid sets the value in the ComboBoxand closes
the form. To test this, the user should go to a C omboBoxthat lists all the states, hit <F3>, type in the word "North",
and hit the Enter key several times to see it loop through states it finds.

To open the search form in my demo program, I added a single routine:

Collapse | Copy Code Protecting Android™

Applications with Secure Code
private void multiColumnComboBox_OpenSearchForm(object sender, EventArgs e) Signing Certificates
{
FormSearch newForm = new FormSearch((MultiColumnComboBox)sender);
newForm.ShowDialog();
}

I then link the OpenSearchFormevent of each ComboBoxon the form to this single event. The search form that is
opened then sets the D ataSourceof the search form's DataGridViewto the DataSourceof the passed ComboBox.
I use the C olumnNameCollectionand the ColumnWidthCollectionof the passed ComboBoxto determine which
columns to display in the grid.

This search routine worked fine for all of my examples except one. If the data source of a ComboBoxwas an array of
objects that exposed a lot of properties, the dropdown list would look fine if I used the ColumnNamesproperty to only
display the properties I wanted to see:
But if I hit the <F3> key to open the search form, the list would lose its ordering:

Instead of showing Property0, Property1, Property2, it would show the columns in the random order of the underlying
array. Even when I hardcoded the positions, it would still ignore these settings in this one instance. The searching and
the double-clicking worked fine, just the columns weren't in the order I wanted them to be. Small objects and
DataSets worked like they should.

The only way I was able to solve this was to have the large class implement an interface that only exposed the
properties that should appear in the C omboBox:
Collapse | Copy Code
//An interface that only shows properties 0, 1 & 2
public interface ICombo012
{
string Property0
{
get;
}

string Property1
{
get;
}

string Property2
{
get;
}
}

// A class that has 10 properties but can display

// properties 0, 1 & 2 or properties 1 & 9
// through two different interfaces
public class ComplexObject : ICombo012, ICombo19
{
//Class with 10 properties defined here
}

Binding the C omboBoxto the smaller interfaces allowed me to use the larger objects without problems. I do not know
if this is the best way to solve this problem, but since this is a learning process for me, I'm sure someone will point out
a more elegant solution if one is available. My goal is to post each set of improvements even if it has a few problems, in
the hopes that I'll eventually be able to refine this into a control that will be useful and reliable.

Version 1.3 changes

I added support for RightToLeftlanguages. If the language is LeftToRight, I draw the strings in the OnDrawItem
event, starting with column zero and ending with the last column, using the default settings. If the language is
RightToLeft, I draw the columns in reverse order from the highest index down to zero. I also use a StringFormat
object to align the strings in a RightToLeftstyle.

This update also exposed a small "flaw" in the earlier versions. When setting the Dr opDownWidthin the OnDropDown
event, I didn't calculate the width of the vertical scrollbar if it was present. In a LeftToRightlanguage, this would
truncate trailing characters of the last column, and could be "fixed" by making the last column wider.

But with R ightToLeftlanguages, the presence of the vertical scroll bar would obscure significant characters of the
first (rightmost) column. The only way to fix this was to make sure the width of the vertical scrollbar was also added
whenever the It ems.Countwas greater than the MaxDropDownItems.

Version 1.3.1 changes

I received an email from Onno Sloof in the Netherlands suggesting that adding the following line:

Collapse | Copy Code

protected override void OnSelectedValueChanged(EventArgs e)
{
base.OnSelectedValueChanged(e);

to the OnSelectedValueChangedevent would help with databinding. As per his suggestion, I added this line to
version 1.3.1.

History
January 31, 2008 - Version 1.3.1 published.
December 26, 2007 - Version 1.3 published.
August 24, 2007 - Version 1.2 published.
August 22, 2007 - Version 1.1 published.
August 14, 2007 - Article first published.

License
This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Darryl Caillouet
Software Developer (Senior)
United States

I wrote my first program on a Tandy computer using a 1963 black & white Zenith TV for a
monitor.

I wrote my second program in Fortran using a card punch machine.

I've been hooked ever since...

Article Top
 Comments and Discussions

You must Sign In to use this message board.

Search this forum Go

Profile popups Spacing Compact Noise Medium Layout Normal Per page 25 Update

First Prev Next

My vote of 5 William Ivanski 28-Jan-14 4:29

Using this with VB Code Member 8629275 22-Dec-13 9:20

Multicolumns Search mrcouthy 6-May-13 19:43

Column Header & Alignment [modified] TusharKK30101987 10-Dec-12 19:59

Re: Column Header & Alignment Darryl Caillouet 11-Dec-12 5:42

Re: Column Header & Alignment TusharKothawade 12-Dec-12 18:56

My vote of 5 Kanasz Robert 27-Sep-12 10:57

Unable to use this in List chowdary2005 24-Sep-12 20:52

Re: Unable to use this in List Darryl Caillouet 26-Sep-12 6:40

My vote of 5 manoj kumar choubey 27-Mar-12 21:39

My vote of 5 Member 1643792 12-Jan-12 7:13

Auto-size column width _Jordan_JRD_ 21-Dec-10 11:22

Windows 7 Aero bug? [modified] Member 7409541 9-Dec-10 12:16

My vote of 5 Hua Yujun 13-Aug-10 17:45

Datagrid CICCIOLO69 11-Mar-10 6:27

Re: Datagrid petedotg 17-Aug-11 14:25

Version [modified] Capilano 5-Nov-09 13:42

AutoComplete Problem ? langtudien 24-Jul-09 1:05

How to add image Member 2981 17-Jul-09 13:21

Re: How to add image Darryl Caillouet 20-Jul-09 2:05

_SelectedIndexChanged event josephchild 5-Jun-09 13:57

Re: _SelectedIndexChanged event Darryl Caillouet 20-Jul-09 11:04

key does not work [modified] KHANBABA 10-May-09 2:08

Re: key does not work Darryl Caillouet 15-May-09 5:31

Re: key does not work KHANBABA 15-May-09 7:38

Last Visit: 31-Dec-99 18:00 Last Update: 19-Mar-14 11:53 Refresh 1 2 3 4 5 Next »

General News Suggestion Question Bug Answer Joke Rant Admin

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Mobile Layout: fixed | fluid Article Copyright 2007 by Darryl Caillouet
Web03 | 2.8.140315.1 | Last Updated 31 Jan 2008 Everything else Copyright © CodeProject, 1999-2014
Terms of Use