VCL Controls: The Combo Box

Introduction

A combo box allows the user to select one item from a group. A combo box saves space by using just as much room as an edit control. Like a list box, a combo box displays a list of items to the user. Unlike a list box, there is a version of a combo box that retracts once the user has made a selection; this is useful when space saving is particularly important.

Combo Box Properties

To add a combo box to your application, from the Standard tab of the Component Palette, click the ComboBox button and click on the form. You can then resize or reposition the control to the desired location.

Just like every control of your application, the name is the most important property of the control, for you and the compiler. This name allows you and the compiler to refer to the control. By default, the first combo box you add to your form at design time is called ComBox1, the second would be ComboBox2, etc. To change the name of the control, click the Name field, type a new name and press Enter (or click somewhere else).

Probably the first this the user sees on a combo box is the text it displays. Although the text of an item is an AnsiString, the items are composed from the TStrings class. To create this list, when the control is selected on the form, on the Object Inspector, click the Items field to reveal an ellipsis button. Click the ellipsis button to display the String List Editor dialog. Type each string and press Enter:

Once you click OK, the control would be filled with the new items. You can also fill out the control using the methods of the TStrings class. For example, to create a list of items, you could write:

//---------------------------------------------------------------------------
void __fastcall TForm1::btnFillTheListClick(TObject *Sender)
{
    cbxColors->Items->Add("Old Blue");
    cbxColors->Items->Add("Light Blue");
    cbxColors->Items->Add("Salmon");
    cbxColors->Items->Add("Dark Violet");
}
//---------------------------------------------------------------------------

By default, the items you add to the combo box will appear in the order they are supplied. For example the TStrings::Add() method would add the new string at the end of the list. If you want the list of items to be sorted, you can change the value of the Sorted property in the Object Inspector from false (the default) to true. To sort a list programmatically, you can write:

//---------------------------------------------------------------------------
void __fastcall TForm1::btnSortTheListClick(TObject *Sender)
{
    cbxColors->Sorted = True;
}
//---------------------------------------------------------------------------

You can unsort the list by changing the value of the Sorted property.
There are three styles of combo boxes, although all allow the user to make only one selection. These styles are controlled by the TComboBoxStyle enumerator and the Style property of the Object Inspector. A combo box can be configured to allow the user to add items to the list. In this case, if the user does not find the desired item in the list, he or she can type a new one values. To provide this ability, set the Style to csDropDown. If you set the Style to csDropDownList, the user cannot enter a new item in the list but can still select one from the control. A combo box with the csSimple Style permanently displays a combination of an edit box and a list box. The user can scroll in the list box and select an item; after the selection, the list would still display the list. The other two styles, csOwnerDrawFixed and csOwnerDrawVariable, are typically used to display varying objects such as pictures or colors.

If the combo box has a style other than csSimple, there is typically a fixed number of items that display when the user click the control’s arrow. You can control the number of items that displays using the DropDownCount property. By default, this is set to 8. If the list contains a number of items less than the DropdownCount integer value, all of the items would display fine. If the list contains more than the DropDownCount number of items, when the user clicks the arrow, a scroll box would appear. The control would display DropDownCount number of items; to reveal more, the user would have to scroll in the list.

The text that displays on a non-drawn combo box is an AnsiString object. If you want the combo box to display a certain string, use the Text property. At design time, you can set this only if the control’s Style is csDropDown or csSimple. At run time, you can set the text that would display in the combo box at startup using the ItemIndex property. This property represents the ordinal integer item of the combo box. The items are counted from 0, then 1, and so on. The ItemIndex of each item is set depending on the value of the Sorted property. If the list is not sorted, the first item entered in the list has an ItemIndex value of 0. If the list gets sorted, the first item in ascending order has an ItemIndex property set at 0. You can therefore use this property to control what item to display in the list: 

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
    cbxColors->ItemIndex = 0;
}
//---------------------------------------------------------------------------

You can also use the ItemIndex property to find out what item is selected at a given time.

Combo Box Methods

The TComboBox as a class has only its constructor and its destructor as methods; its other methods are derived from the the parent TCustomComboBox class. The TComboBox constructor is used to dynamically create an instance of the object. If you cannot add the control at design time, declare an instance of the TComboBox, use the new operator to assign the control’s owner for cleaning purposes:

//---------------------------------------------------------------------------
void __fastcall TForm1::btnCreateComboBoxClick(TObject *Sender)
{
    TComboBox *CarMake = new TComboBox(this);
    CarMake->Parent = this;
}
//---------------------------------------------------------------------------

If you want the object to be accessible from more than one function or event, declare an instance of a TComboBox control in the public or private sections of the uses section of the unit or form that would use it:

//---------------------------------------------------------------------------
class TForm1 : public TForm
{
__published:	// IDE-managed Components
    TButton *btnCreateComboBox;
    void __fastcall btnCreateComboBoxClick(TObject *Sender);
private:	// User declarations
    TComboBox *CarModel;
public:		// User declarations
    __fastcall TForm1(TComponent* Owner);
};
//---------------------------------------------------------------------------
extern PACKAGE TForm1 *Form1;
//---------------------------------------------------------------------------

In the source file, use the new operator to specify the control owner of the object. If you want the control created when the form starts, you can do this in the form’s constructor:

//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
    : TForm(Owner)
{
    CarModel = new TComboBox(this);
    CarModel->Parent = this;
}
//---------------------------------------------------------------------------

After creating the object, you can manipulate its properties the change the defaults. If you create a local list, you will manipulate it in the same function or event:

//---------------------------------------------------------------------------
void __fastcall TForm1::btnCreateComboBoxClick(TObject *Sender)
{
    TComboBox *CarMake = new TComboBox(this);
    CarMake->Parent = this;
    CarMake->Left = 32;
    CarMake->Top = 16;
    CarMake->Items->Add("Ford");
    CarMake->Items->Add("Renault");
    CarMake->Items->Add("Fiat");
    CarMake->Items->Add("Honda");
}
//---------------------------------------------------------------------------

If the object were created globally, you can access it anywhere to manipulate it:

//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
    : TForm(Owner)
{
    CarModel = new TComboBox(this);
    CarModel->Parent = this;
    CarModel->Left = 200;
    CarModel->Top = 16;
    CarModel->Items->Add("Elantra");
    CarModel->Items->Add("LeBaron");
    CarModel->Items->Add("Corolla");
    CarModel->Text = "Corolla";
}
//---------------------------------------------------------------------------