PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

  • 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 expanded combo box
  • Characteristics of Combo Box control
  • Editable combo box: type and mask of the input area
  • Adjusting the size of expanded combo box
  • Non-editable combo box: Search in the values of combo box
  • Size of expanded combo box
  • Height of input area in the combo box
  • Drawing in the combo boxes
  • Smartphone mode
  • Limits in Java
  • Vocabulary
  • Swap
  • Example
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
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.
Versions 15 and later
Android The Combo Box controls are now available for Android applications.
New in version 15
Android The Combo Box controls are now available for Android applications.
Android The Combo Box controls are now available for Android applications.
Versions 16 and later
WINDEVLinux The Combo Box controls are now available for the WINDEV applications in Linux.
New in version 16
WINDEVLinux The Combo Box controls are now available for the WINDEV applications in Linux.
WINDEVLinux The Combo Box controls are now available for the WINDEV applications in Linux.
Versions 18 and later
Universal Windows 10 App The Combo Box controls are now available for the applications in Windows Store apps mode.
New in version 18
Universal Windows 10 App The Combo Box controls are now available for the applications in Windows Store apps mode.
Universal Windows 10 App The Combo Box controls are now available for the applications in Windows Store apps mode.
Versions 19 and later
iPhone/iPad The Combo Box controls are now available for iPhone/iPad applications.
New in version 19
iPhone/iPad The Combo Box controls are now available for iPhone/iPad applications.
iPhone/iPad The Combo Box controls are now available for iPhone/iPad applications.
WINDEVWINDEV Mobile 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.
  • resize the height and width of expanded combo box (see below)
Some examples:
Non-editable combo box, not expanded
Non-editable combo box, not expanded
Expanded combo box with elements in list format
Expanded combo box with elements in list format
WINDEVWINDEV Mobile The following examples apply to WINDEV and to WINDEV Mobile.
Expanded combo box with elements in table format
Expanded combo box with elements in table format
Editable combo box with assisted input
Editable combo box with assisted input
Graphic combo box
Graphic combo box
Expanded combo box with elements in listview format
Expanded combo box with elements in listview format
Combo box that opens a popup window
Combo box that opens a popup window
The elements displayed in a combo box 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:

  1. In the window or page editor, click Creating a Combo Box control (or select "Insert .. Control .. Combo box").On the "Creation" pane, in the "Usual controls" group, click "Combo box".
  2. 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.
WINDEVWINDEV Mobile Tip: You also have the ability to create a "preset" combo box by clicking the arrow found on the right of Arrow . The list of available controls (with their preview in the skin template of project) is displayed. All you have to do is click the requested control to create it in the editor.
WINDEVWINDEV Mobile Tip: You also have the ability to create a "preset" combo box by expanding the "Combo box" option. The list of available controls (with their preview in the skin template of project) is displayed. All you have to do is click the requested control to create it in the editor.
To display the control characteristics, select "Description" from the popup menu of control.
Versions 18 and later
Universal Windows 10 App For the applications in Windows Store Apps mode, we recommend that you use the native combo boxes ("Native combo box" in the "Details" tab of the description window of control).
New in version 18
Universal Windows 10 App For the applications in Windows Store Apps mode, we recommend that you use the native combo boxes ("Native combo box" in the "Details" tab of the description window of control).
Universal Windows 10 App For the applications in Windows Store Apps mode, we recommend that you use the native combo boxes ("Native combo box" in the "Details" tab of the description window of control).
WINDEVAndroidWindows MobileUniversal Windows 10 AppJava

Type of expanded combo box

The type of expanded combo box depends on the elements displayed by the Combo Box control . The available types are as follows:
  • list combo box: displays the elements in list format.
    For a browsing Combo Box control, the displayed item is defined in the "Content" tab of the description window of control ("Description" from the popup menu).
  • table combo box: displays the elements in table format. A combo box with table is automatically created if the Combo Box control must display more than one element.
    To display the characteristics of columns, select "Description of columns" from the popup menu of the control (or click the "Edit the columns" button found in the "Content" tab of the description window of combo box).
    For a browsing Combo Box control, the displayed items are defined in the characteristics of the list columns ("Column Description" from the popup menu or "Edit the columns" button in the "Content" tab of the description window of control).
  • listview combo box: displays the elements in listview format.
    To display the characteristics of listview, click the "Edit the listview" button found in the "Content" tab of the description window of combo box.
    For a browsing Combo Box control, the item associated with the image caption and the item associated with the image are defined via the "Displayed item" and "Image item" options found in the "Content" tab of the description window of combo box ("Description" from the popup menu).
  • popup window combo box: opens a popup window.
    The popup window to open can be selected in the "Content" tab of the description window of control ("Description" from the popup menu).
To change the type of expanded combo box, select "Expanded type" found in the "Content" tab of the description window of combo box ("Description" from the popup menu).
AndroidiPhone/iPadUniversal Windows 10 App Only the expanded Combo Box controls of List type are available.
WINDEVLinux In Linux for WINDEV, only the expanded Combo Box controls whose type is List and Popup Window are available.
Characteristics of Combo Box control
WINDEVWindows MobileJava

Editable combo box: type and mask of the input area

For the editable Combo Box controls, you can:
  • Versions 17 and later
    WINDEVWindows define the type of data typed in the edit control of combo box: Text, Numeric, Currency, date, time, duration.
    New in version 17
    WINDEVWindows define the type of data typed in the edit control of combo box: Text, Numeric, Currency, date, time, duration.
    WINDEVWindows define the type of data typed in the edit control of combo box: Text, Numeric, Currency, date, time, duration.
  • define an input mask. This mask depends on the type of information (date, text, ...) displayed in the combo box. 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.
  • Versions 17 and later
    WINDEVWindows define a display mask. This display mask is available for editable combo boxes whose type is Numeric, Currency, date, time or duration.
    These display masks are multilingual: different input masks can be selected depending on the runtime language of project.
    These display masks can be modified by programming with ..DisplayMask.
    New in version 17
    WINDEVWindows define a display mask. This display mask is available for editable combo boxes whose type is Numeric, Currency, date, time or duration.
    These display masks are multilingual: different input masks can be selected depending on the runtime language of project.
    These display masks can be modified by programming with ..DisplayMask.
    WINDEVWindows define a display mask. This display mask is available for editable combo boxes whose type is Numeric, Currency, date, time or duration.
    These display masks are multilingual: different input masks can be selected depending on the runtime language of project.
    These display masks can be modified by programming with ..DisplayMask.
To use multilingual masks:
  1. Click Multilingual to select the multilingual masks.
  2. Choose the relevant mask for each language supported by window.
  3. Validate. The "Multilingual value" caption appears in the combo box for mask definition.
WINDEVWindows Mobile

Adjusting the size of expanded combo box

To resize the expanded combo box:
  1. Select the Combo Box control in the window.
  2. Click the "Spin" button of combo box. The mouse cursor turns into a vertical arrow. The expanded combo box is displayed as a dotted rectangle.
  3. Resize the expanded combo box with the black handle.
To resize the expanded combo box to the nearest pixel:
  1. Display the description window of Combo Box control ("Description" from the popup menu).
  2. In the "Details" tab, specify the size (in pixels) of expanded combo box ("Height" and "Width").
Notes:
  • By default, the width of expanded combo box corresponds to the width of input area in the combo box.
  • By default, the height of expanded combo box is optimized according to the elements displayed in the combo box ("Height" set to 0 in the "Details" tab of the description window of combo box).
  • To allow the end users to resize the expanded combo box in the application directly (via the sizing handle of expanded combo box), check "Resizable" in the "Details" tab of the description window of combo box ("Description" from 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 description window of combo box ("Description" from the popup menu). When the window is re-opened, the expanded combo box will be displayed according to the size that was stored.
Versions 23 and later
WINDEV

Non-editable combo box: Search in the values of combo box

For the non-editable combo boxes that list several information, you have the ability to propose a search area allowing the user to easily find the element to select.
To implement this feature:
  • from the editor: check "With search" in the "Details" tab of the description window of non-editable Combo box control.
  • by programming: use ..SearchAAF.
Note: The "Search" indication text is automatically displayed in the search area of combo box. This text cannot be configured.
New in version 23
WINDEV

Non-editable combo box: Search in the values of combo box

For the non-editable combo boxes that list several information, you have the ability to propose a search area allowing the user to easily find the element to select.
To implement this feature:
  • from the editor: check "With search" in the "Details" tab of the description window of non-editable Combo box control.
  • by programming: use ..SearchAAF.
Note: The "Search" indication text is automatically displayed in the search area of combo box. This text cannot be configured.
WINDEV

Non-editable combo box: Search in the values of combo box

For the non-editable combo boxes that list several information, you have the ability to propose a search area allowing the user to easily find the element to select.
To implement this feature:
  • from the editor: check "With search" in the "Details" tab of the description window of non-editable Combo box control.
  • by programming: use ..SearchAAF.
Note: The "Search" indication text is automatically displayed in the search area of combo box. This text cannot be configured.
WEBDEV - Server code

Size of expanded combo box

The size of expanded combo box depends on the browser used. If the number of elements in the combo box is greater than the number of elements that can be displayed in the list, the scrolling is automatically managed and a vertical scrollbar is included in the combo box.
Windows Mobile

Height of input area in the combo box

In the editor, the height of input area corresponds to the height of input area of control at run time.
To modify this height, modify ("Style" tab) the size of font:
  • for the text in the input area,
  • for the selected row,
  • for the elements in the combo box.
WINDEVWindows Mobile

Drawing in the combo boxes

You have the ability to draw in the combo boxes or to display an image via the drawing functions specific to list boxes.
Note: If a row found in a combo box displays an image via gImage, when this row is selected, the image is re-used in the main row.
Windows Mobile

Smartphone mode

The Smartphones require special attention because of their very small screens. This is the reason why the operating mode of combo boxes differs on Smartphone.
See Smartphone mode for more details.
Java

Limits in Java

The following characteristics are not supported in Java:
  • tooltip on scrollbar.
  • mandatory input.
  • custom expanded height and width.
  • help number associated with the combo box.
  • the display mask in the input area.
  • the type of the input area.
Vocabulary
To easily handle a combo box, you must be familiar with the following vocabulary:
Name Definition
Selection barUsed to view the element selected in the drop-down list. A specific color is used in most cases.
Browsing combo boxThe 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 "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 in "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 performed in the control involves an access to the linked file. This type of combo box is reserved for data files containing more than 100,000 records.
Memory combo boxThe 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 boxThe 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 boxThe user selects an element in the list via the selection bar.
WEBDEV - Server code Note: "Editable combo box" and "Non-editable combo box" do not apply to WEBDEV.
Swap
WINDEVWindows MobileJava WINDEV allows you to automatically transform a standard combo box into a combo box with table (and conversely):
  1. Select the control to transform.
  2. 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".
Example
Several preset Combo Box controls are proposed in the "Wizards, Examples and Components" pane:
  1. Click the "Controls" button found in the "Wizard, Examples and Components" pane.
  2. In the list of controls, click "Pre-fill control".
To include one of these controls in your window or in your page, "Drag and Drop" the control found in the "Wizards, Examples and Components" pane toward your window or your page.
Related Examples:
The Combo Box control Unit examples (WINDEV): The Combo Box control
[ + ] Using a Combo Box control
WD Managing a computer fleet 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.
The EyeMagnet 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.
Minimum required version
  • Version 9
This page is also available for…
Comments
Is like Save Value
Minha Dica hoje,
é como Guardar Valor,
sem precisar fazer nada de programação no WinDev

My Tip today,
Is like Save Value,
Without having to do any programming on WinDev

//Blog com Video e Exemplo

http://windevdesenvolvimento.blogspot.com.br/2017/03/aula-1088-windev-dicas-019-guardar-valor.html

https://www.youtube.com/watch?v=OarZ2jc_l9U

De matos
Mar. 14 2017
Exemplo Combox+Glink
ListDeleteAll(COMBO_cliente)
FOR EACH cliente
ListAdd(COMBO_cliente,cliente.nome+gLink(cliente.clienteID))
END

//frances
ListeSupprimeTout(COMBO_cliente)
POUR TOUT cliente
ListeAjoute(COMBO_cliente,cliente.nome+gLien(cliente.clienteID))
FIN

//Blog com Video e Exemplo
http://windevdesenvolvimento.blogspot.com.br/2016/03/curso-windev-combox-005-combox-glink.html

De matos AMARILDO
Mar. 25 2016
Exemplo Combox Ordem
ListDeleteAll(COMBO_cliente)
FOR EACH cliente
ListAdd(COMBO_cliente,cliente.nome)
END
//Coloca em Ordem
ListSort(COMBO_cliente,True,ccLexicographicOrder)

//Frances
ListeSupprimeTout(COMBO_cliente)
POUR TOUT cliente
ListeAjoute(COMBO_cliente,cliente.nome)
FIN
//Coloca em Ordem
ListeTrie(COMBO_cliente,Vrai,ccOrdreLexicographique)

//Blog com Video e Exemplo
http://windevdesenvolvimento.blogspot.com.br/2016/03/curso-windev-combox-004-combox-ordemsort.html
De matos AMARILDO
Mar. 24 2016
Exemplo Combox Editavel
//Blog com video e exemplo Combox Editavel
http://windevdesenvolvimento.blogspot.com.br/2016/02/curso-windev-combox-003-combox-editavel.html
De matos AMARILDO
Feb. 07 2016
Exemplo Combo - preencher Manual
ListDeleteAll(COMBO_meses)
ListAdd(COMBO_meses,"marco")
ListAdd(COMBO_meses,"janeiro")
ListAdd(COMBO_meses,"fevereiro")
ListAdd(COMBO_meses,"abril")
ListAdd(COMBO_meses,"maio")
ListAdd(COMBO_meses,"junho")
ListAdd(COMBO_meses,"julho")
ListAdd(COMBO_meses,"agosto")
ListAdd(COMBO_meses,"setembro")
ListAdd(COMBO_meses,"outubro")
ListAdd(COMBO_meses,"novembro")
ListAdd(COMBO_meses,"dezembro")
//Blog com Video e exemplo
http://windevdesenvolvimento.blogspot.com.br/2016/02/curso-windev-combox-001-preencher.html
De matos AMARILDO
Feb. 07 2016
Exemplo Selecionar Combo
//EM INGLES
SAI_resultado1=COMBO_meses // vai mostrar 1 para Janeiro
SAI_resultado2=COMBO_meses..StoredValue // Vai mostrar JANEIRO
//EM FRANCES
SAI_resultado1=COMBO_meses // vai mostrar 1 para Janeiro
SAI_resultado2=COMBO_meses..ValeurMémorisée // Vai mostrar JANEIRO
//Blog com Video e Exemplo
http://windevdesenvolvimento.blogspot.com.br/2016/02/curso-windev-combox-002-selecionar.html



De matos AMARILDO
Feb. 07 2016