The Combo Box control

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

This content has been translated automatically. Click here to view the French version.

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Combo Box control

Overview of the Combo Box control
Control in a window, control in a dynamic or static page
Creating a Combo Box control
To create a Combo Box control:
Type of the Combo Box control expanded area
Characteristics of Combo Box controls
Combo with input: input zone type and masks
Adjusting the size of the expanded area
Combo without input: Search in Combo Box control values
Size of the expanded area
Drawing in Combo Box controls
Limitations in Java
Vocabulary
Swapping

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

The Combo Box control

Overview of the Combo Box control

Control in a window, control in a dynamic or static page

The Combo Box control displays a list of elements and allows users to select an element from the list.

Unlike a List Box control, a Combo Box control is not scrolled: the control scrolls the list on demand or when the cursor is positioned over the list.

In WINDEV, you can:

enter a value in the edit control if the Combo Box control is editable.
display elements in a table-like format if the Combo Box control contains multiple columns.
display elements in a ListView-like format.
opening a popup window.
adjust the width and height of the expanded list via the Combo Box control (see below)

Here are some examples:

Non-editable Combo Box control, not expanded

Expanded Combo Box with elements in a list-like format

Expanded Combo Box control with elements in a list-like format

The following examples apply to WINDEV only.

Expanded Combo Box with elements in a table-like format

Expanded Combo Box control with elements in a table-like format

Editable Combo Box control with assisted input

Graphic Combo Box control

Expanded Combo Box with elements in a ListView-like format

Expanded Combo Box control with elements in a ListView-like format

Combo Box control that opens a popup window

The elements displayed in a Combo Box control can be defined when creating the control in the editor. These elements:

are defined programmatically.
come from a data file or query.

Creating a Combo Box control

To create a Combo Box control:

On the "Creation" tab, in the "Usual controls" group, click "Combo Box".
Click at the desired location to create the control in the page or window. The Combo Box control creation wizard starts automatically.

Tip: Examples of directly usable Combo Box controls (with associated data and code, if required) can be integrated into your applications by selecting the "Combo" option.. A list shows a preview of the available controls with the project skin template and a "Go" icon that allows you to directly test the desired control. Simply click the control you want to create in the editor.

To view the characteristics of the control, select "Description" in the context menu.

Type of the Combo Box control expanded area

The type of Combo Box control expanded area depends on the elements displayed by the Combo Box control .

To change the type of the Combo Box control expanded area, select "Expanded type" in the "Content" tab of the Combo Box description window ("Description" in the context menu).

The available types are as follows:

List: displays items in list form.
For Combo Box controls based on a data file, the item displayed is defined in the "Content" tab of the control description window ("Description" in the context menu).
Table: displays items in table format. A "Combo Box with table" is automatically created if the Combo Box control must display more than one element.
To view the characteristics of the list columns, select "Column description" in the control context menu (or click "Edit columns" in the "Content" tab of the Combo Box description window).
For a Combo Box control, the displayed items are defined in the characteristics of the list columns ("Column description" in the context menu or "Edit columns" in the "Content" tab of the control based on a data file description window).
This type of expanded area is not available.
In WINDEV Linux, this type of expanded area is not available.
Image list: displays items as an image list.
To view the characteristics of the ListView, click "Edit ListView..." in the "Content" tab of the Combo Box description window.
For a Combo Box control based on a data file, the item associated with the image caption and the one associated with the image are defined via the options "Displayed item" and "Image item" in the "Content" tab of the Combo Box description ("Description" in the context menu).
This type of expanded area is not available.
In WINDEV Linux, this type of expanded area is not available.
Popup window: opens a popup window.
The popup window can be selected in the "Content" tab of the control description window ("Description" in the context menu).
This type of expanded area is not available.

Characteristics of Combo Box controls

Combo with input: input zone type and masks

In editable Combo Box controls, you can configure the edit control used:

define the type of data entered: Text, Numerical, Monetary, Date, Time, Duration.
define an input mask. This mask depends on the type of information (date, text, etc.) displayed in the Combo Box control. Several input masks are available for each type.
These input masks are multilingual: it is possible to select different input masks depending on the language in which the project is run..
These input masks can be modified programmatically with the InputMask property.
define a display mask. This display mask is available for editable Combo Box controls whose type is: Numeric, Currency, Date, Time or Duration.
These display masks are multilingual: different display masks can be selected depending on the language in which the project is run.
These display masks can be modified programmatically with the DisplayMask property.

To use multilingual masks:

Click to select the multilingual masks.
Choose the corresponding mask for each language defined in the window.
Validate. Only the input mask of the current language used in the editor is displayed.

Adjusting the size of the expanded area

The size of the expanded area can be:

automatically managed by WINDEV. In this case, it automatically adapts to the content (default).
defined in the editor. In this case, the size is fixed.

The size of the expanded area can be specified in the "Height" option, in the "Details" tab of the control description window. If this option is set to 0, the height of the expanded area is set automatically.

If the size of the expanded area is not automatically set, it can be adjusted in the editor:

Select the Combo Box control in the window.
Click the "Spin" button of the Combo Box control. The mouse cursor turns into a vertical arrow. The Combo Box expanded area is displayed as a rectangle.
Resize the expanded area as needed with the black handle.

To resize the Combo Box expanded area with pixel precision:

Open the description window of the Combo Box control ("Description" in the context menu).
On the "Details" tab, specify (in pixels) the size of the expanded area ("Height" and "Width").

Remarks:

By default, the width of the expanded area corresponds to the width of the input area in the Combo Box control.
By default, the height of the expanded area is optimized according to the elements displayed in the Combo Box control ("Height" set to 0 in the "Details" tab of the Combo Box description window).
To enable end users to resize the expanded area directly in the application (using the expanded area resizing handle), check "Resizable" in the "Details" tab of the Combo Box control description ("Description" in the context menu).
To save the size of the expanded area when the end user closes the window, check "Remember size" in the "Details" tab of the Combo Box description window ("Description" in the context menu). Thus, when the window is opened again, the expanded area will be the same size as the last time.

Combo without input: Search in Combo Box control values

For non-editable Combo Box controls that list a large amount of information, you can propose a search area allowing the user to easily find the element to select.

To implement this feature:

from the editor: check the "With search" option in the "Detail" tab of the Combo Box control description window without input..
by programming: use the SearchAAF property.

Note: The "Search" hint text is automatically displayed in the Combo Box control search area.. This text cannot be configured.

Size of the expanded area

The size of the expanded area varies according to the browser used. If the number of items in the Combo Box control is greater than the number of items that can be displayed in the scrolled area, scrolling is automatically managed: the scrolled area features a vertical scrollbar.

Drawing in Combo Box controls

You can draw or display an image in Combo Box controls via the drawing functions specific to List Box and Combo Box controls.

Note: If a line in a Combo Box control displays an image using the gImage function, when this line is selected, the image is transferred to the main line..

Limitations in Java

The following characteristics are not supported in Java:

tooltip on scrollbar.
required input.
custom height and width of the expanded area.
help number associated with the Combo Box control.
display mask for the input area.
type of input area.

Vocabulary

To easily handle a Combo Box control, you must be familiar with the following vocabulary:

Name	Definition

Selection bar	Allows you to view the selected element in the expanded area. A specific color is used in most cases.
File Combo	The Combo box control is based on a data file or query. The control elements correspond to the file records. There are two types of Combo Box controls based on a data file: *Combo Box control file "Loaded into memory ": The content of the field is loaded into memory and then displayed in the. Access to the elements of the Combo Box control is faster. This mode is reserved for data files with less than 100,000 records. Combo Box control "Direct access (unlimited) "*: The field directly displays the contents of the data file or query.. The current record corresponds to the selected element. Selecting an element in the control triggers an access to the linked data file. This type of control is reserved for data files with more than 100,000 records.
Combo Box populated programmatically	The Combo Box control is not based on a data file or query. The elements displayed in the Combo Box control are defined by the developer (in the description window or through programming).
Editable Combo Box	The user can enter text in the edit control associated with the Combo Box. If the "Assisted input" option is selected, the user can quickly select the element by entering the first few letters: the letters entered are automatically completed with the corresponding element.
Non-editable Combo Box	The user selects an element in the expanded area via the selection bar.

Note: "Combo with input" and "Combo without input" do not apply to WEBDEV.

Swapping

WINDEV allows you to automatically transform a standard Combo Box into a Combo Box with table and vice versa:

Select the control to transform.
On the "Modification" tab, in the "Transformations" group, expand "Refactoring and swapping" and select "Combo Box/Combo Box with table".

Related Examples:

Unit examples (WINDEV): The Combo Box control

[ + ] Using a Combo Box control

Complete examples (WINDEV): WD Managing a computer fleet

[ + ] This example presents the management of a computer fleet with WINDEV.
The following topics are presented in this example:
1/ the printed reports,
2/ the graphic representation of the location of the computer,
3/ the automatically filled combo boxes.
Summary of the example supplied with WINDEV:
This example is used to manage a computer fleet.
For each computer, you will be able to define its characteristics, its components, the person who is using it as well as its location in the offices.

Unit examples (WINDEV): The EyeMagnet

[ + ] Using the "eYe magnet" mechanism (also called conditional formatting)
The "eYe magnet" consists in modifying the visual aspect of a control in order to attract the user's attention to this control. WINDEV allows you to automatically modify this visual aspect according to a set of conditions.