- 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 control
- Editable Combo Box: type and mask of the input area
- Adjusting the size of expanded area
- Height of the input area in the Combo Box control
- Drawing in Combo Box controls
- Smartphone mode
Overview of the Combo Box control
Control in a window, control in a dynamic or static page
The "Combo Box" control is used to display a list of elements and to select an element from this list.
Unlike a List Box control , a Combo Box control is not expanded: it is expanded upon request or when the cursor is positioned on the list.
In WINDEV and WINDEV Mobile, you can:
- enter a value in the edit control if the Combo Box control is editable.
- display the elements in table format if the Combo Box control contains several columns.
- display the elements in listview format.
- open a popup window.
- adjust the width and height of the expanded list via the Combo Box control (see below)
Non-editable Combo Box control, not expanded
Expanded Combo Box control with elements in list format
The following examples apply to WINDEV and to WINDEV Mobile.
Expanded Combo Box control with elements in table format
Editable Combo Box control with assisted input
Graphic Combo Box control
Expanded Combo Box control with elements in listview 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 by programming.
- come from a data file or from a query.
Creating a Combo Box control
To create a Combo Box control:
- In the window or page editor, click (or select "Insert .. Control .. Combo box").On the "Creation" pane, in the "Usual controls" group, click "Combo Box".
- Click the position where the control must be created in the page or window. The wizard for creating a Combo Box control is automatically started.
: You can also create a "preset" Combo Box control by clicking the arrow on the right of
. The list of available controls (with their preview in the skin template of project) is displayed. Simply click the requested control to create it in the editor.
: You can also create a "preset" Combo Box control by expanding the "Combo Box" option. The list of available controls (with their preview in the skin template of project) is displayed. Simply click the requested control to create it in the editor.
To display the control characteristics, select "Description" from the popup menu of control.
Characteristics of Combo Box control
Editable Combo Box: type and mask of the input area
In editable Combo Box controls, you can configure the edit control being used:
- 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: different input masks can be selected according to the runtime language of the project.
These input masks can be modified by programming with ..InputMask.
To use multilingual masks:
- Click to select the multilingual masks.
- Choose the relevant mask for each language supported by window.
- Validate. The "Multilingual value" caption appears in the combo box for mask definition.
Adjusting the size of expanded area
To adjust the size of the Combo Box control expanded area:
- 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 dotted rectangle.
- Resize the expanded area as needed with the black handle.
To resize the Combo Box expanded area with pixel precision:
- Display the description window of Combo Box control ("Description" from the popup menu).
- In the "Details" tab, specify (in pixels) the size of the expanded area ("Height" and "Width").
- 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 popup menu).
- To store the size of expanded combo box when the window is closed by the end user, check "Store the size" in the "Details" tab of the Combo Box description window ("Description" in the popup menu). Thus, when the window is opened again, the expanded area will be the same size as the last time.
Height of the input area in the Combo Box control
In the editor, the height of input area corresponds to the height of input area of control at run time.
To modify this height, change the font size in the "Style" tab of the Combo Box description window:
- for the text in the input area,
- for the selected row,
- for the elements in the combo box.
Drawing in Combo Box controls
Note: If a row of a Combo Box control displays an image via gImage
, when this row is selected, the image is re-used in the main row.
Smartphones require special attention because of their very small screens. Combo Box controls work differently on Smartphones for this reason.
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.|
|Browsing combo box||The Combo box control is based on a data file or query. The control elements correspond to the file records.|
Two types of browsing Combo box controls are available:
- Browsing Combo Box control "Loaded in memory": The content of the control is loaded in memory then it is displayed in the control. Access to the Combo box control's elements is faster. This mode is reserved for the data files containing less than 100 000 records.
- Browsing Combo Box control "Direct access (no limit)": The control directly displays the content of the data file or query. The current record corresponds to the selected element. Each move in the control involves an access to the linked data file. This type of combo box is reserved for data files containing more than 100,000 records.
|Memory combo box||The Combo box control is not based on a data file or a query. The elements displayed in the Combo Box control are defined by the developer (in the description window or by programming).|
|Editable Combo Box||The user can enter text in the edit control associated with the Combo Box. If "Assisted input" is selected, the user can easily select the element by typing the first letters: the letters typed are automatically completed with the corresponding element.|
|Non-editable combo box||The user selects an element in the expanded area via the selection bar.|
WINDEV allows you to automatically transform a standard Combo Box into a Combo Box with table (and vice versa):
- Select the control to transform.
- Select the "Control .. Swap .. Combo box/Combo box with table" option.On the "Modification" pane, in the "Transformations" group, expand "Refactoring and swapping" and select "Combo Box/Combo Box with table".
Several preset Combo Box controls are proposed in the "Wizards, Examples and Components" pane
- Click the "Controls" button found in the "Wizard, Examples and Components" pane.
- In the list of controls, click "Pre-fill control".
To include one of these controls in your window or page, simply drag the control from the "Wizards, Examples and Components" pane and drop it in your window or page.
Unit examples (WINDEV): The Combo Box control
Complete examples (WINDEV): WD Managing a computer fleet
Unit examples (WINDEV): The EyeMagnet
This page is also available for…
Como deixar a combo com um valor já setado?
Se a combo tiver um List é assim:
SelectListPlus(Combo_customer, ListSeek(Combo_customer, "Adriano")
Se a combo tiver uma Table é assim:
SelectTablePlus(Combo_customer, TableSeek(Combo_customer, "Adriano")
Como deixar uma combo vazia via programação