ComboBox

Introduction

The ComboBox is used to have a TextField with a list of predefined entries. During typing, a possible value is suggested using auto-completion. Additionally, you can enter values into the text field that are not part of the list.

Examples

Basic ComboBox

You add the single items to the ComboBox using the addItem method. The ComboBox has status editable = true.


A ComboBox Using an Existing ListBox

At first, the items are added to a ListBox control. The ListBox also contains additional texts. The ListBox is assigned to the ComboBox using the setListBox method. Assigning the ListBox to the ComboBox allows a reuse of the same ListBox in multiple ComboBoxes. A typical use case for this is a table where the possible values are the same in every row. In this case, the ListBox must not be rendered somewhere. But if you want to bind the items to a model the ListBox must be part of the control tree. So we suggest to add it as dependent to the view or the fist uses ComboBox.
In the example the change event is assigned to a function that fills the TextField next to the ComboBox. So you can see when the change event is fired. Control creation and property assignment in the example are done using an alternative constructor syntax.


Data Binding

The items are filled with the corresponding information using data binding. The data is bound to the properties using the bindProperty method. Changes on the data model immediately will change the ComboBox content.


Using Item Id and Key

The value of a ComboBox can be set from the application using the properties value, selectedKey and selectedItemId. So instead of using the value property the value can be set to an item of the Combobox. Additionally it can be determines which item is currently selected. If the value is set to be different from the assigned items the properties selectedKey and selectedItemId are set to be empty. If the properties selectedKey and selectedItemId are set to an invalid value they will not be changed and still have their old value.
In the example you can see how to set and get the ComboBox value using selectedKey and selectedItemId.


API Documentation

See API documentation