DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

JavaScript/jQuery Drop Down Box - Single Selection

JavaScript DropDownBox is an advanced editor whose drop-down window can include other components.

DevExtreme ships with multiple other drop-down editors. To find out which editor best suits your task, review the following article: How to Choose a Drop-Down Editor.

To get started with the DevExtreme JavaScript DropDownBox component, refer to the following step-by-step tutorial: Getting Started with JavaScript DropDownBox.

Backend API

In this demo, TreeView and the DataGrid components in single-selection mode are embedded into the JavaScript DropDownBox window.

The following instructions show how to synchronize the JavaScript DropDownBox with an embedded DevExtreme component:

  1. Specify data sources
    The JavaScript DropDownBox and its embedded component can use the same or different data sources. If the data sources are different, you need to specify the embedded component's key field in the JavaScript DropDownBox's data source. If the JavaScript DropDownBox contains a DataGrid, bind the DataGrid to a store instead of a simple array (for example, an ArrayStore).

  2. Specify which data field contains the JavaScript DropDownBox's values and the embedded component's keys
    Assign the field's name to the JavaScript DropDownBox's valueExpr property and to the key property of the embedded component's store.

  3. Synchronize the JavaScript DropDownBox's value and the embedded component's selection

    1. Assign JavaScript DropDownBox's initial value to the embedded component's selectedRowKeys/selectedItemKeys property (see the example with the DataGrid below). If the embedded component does not have such properties, implement the onContentReady handler (the example with the TreeView).
    2. Implement the JavaScript DropDownBox's onValueChanged handler to update the selection when the value changes.
    3. Implement the embedded component's onSelectionChanged handler to update the JavaScript DropDownBox's value when the selection changes.