ComboBox – Overview

The ComboBox is an editor that allows users to select an item from a drop-down list.

The main ComboBox API members are listed below.

  • Data – Specifies the data source that populates the editor’s list items.
  • TextFieldName – Specifies the data source’s field that supplies text for items.
  • Text – Specifies the editor’s text.
  • TextChanged - Fires when the editor text was changed.
  • SelectedItem – Specifies the drop-down list’s selected item.
  • SelectedItemChanged – Fires when the selected item was changed.

This demo illustrates how to bind the ComboBox to a list of complex business objects.

ComboBox - Virtual Scrolling

Use the ListRenderMode property to specify how the ComboBox loads the item list.

  • Entire - The ComboBox loads the entire item list. Use this option for small item lists where scrolling should work instantly.
  • Virtual - The ComboBox loads visible items only. Use this option to improve performance when the list contains to many items to load simultaneously.

In this demo, the ListRenderMode property is set to ListRenderMode.Virtual.

ComboBox - Allow Input

The AllowUserInput property specifies whether users are allowed to input values into an editor's edit box. The following property values are available:

  • true - A user can either select an item from the drop-down list or enter new values into the edit box (without the need to invoke the drop-down list).
  • false - A user can only select an item from the drop-down list.

In this demo, the AllowUserInput property is set to true.

Text = "New York", SelectedItem = Null

ComboBox - Incremental Filtering

Use the FilteringMode property to specify whether and how the ComboBox filters list items when users type in the edit box.

  • Contains - The ComboBox filters list items that contain the search string and highlights matches.
  • StartsWith - The ComboBox filters list items that begin with the search string and highlights matches.
  • None - The ComboBox does not filter list items.

In this demo, the filter mode is set to Contains. To filter list items, focus the ComboBox and type a search string.

Text = "", SelectedItem = Null

ComboBox - NullText

This demo illustrates how to use the NullText property to display the placeholder text in the ComboBox when its value is null.

Set the ClearButtonDisplayMode property to Auto to display the Clear button when the ComboBox has a non-null value. Users can click this button to clear the editor's value (set it to null).

Option Selected: null

ComboBox - Cascading Lists

This demo shows how to populate the ComboBox with items based on the user selection in another ComboBox.

Selected values are: Germany / Berlin

ComboBox - Read-Only Mode

In this demo, the ComboBox displays values but does not allow users to change them. Set the ReadOnly property to true to activate read-only mode.

Option Selected: Option 2
An error has occurred. This application may no longer respond until reloaded. Reload 🗙