JavaScript/jQuery DropDownBox - Overview

The DropDownBox is a UI component that consists of a text field, which displays the current value, and a drop-down field, which can contain any UI element.

View Demo

The simplest UI component configuration requires specifying a dataSource, value and contentTemplate. The following code adds the DropDownBox to your page:

JavaScript
  • $(function () {
  • const fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
  • $("#dropDownBoxContainer").dxDropDownBox({
  • value: fruits[0],
  • dataSource: fruits,
  • contentTemplate: function(e) {
  • const $list = $("<div>").dxList({
  • dataSource: e.component.option("dataSource"),
  • selectionMode: "single",
  • onSelectionChanged: function(arg) {
  • e.component.option("value", arg.addedItems[0]);
  • e.component.close();
  • }
  • });
  • return $list;
  • }
  • });
  • });

If your data is an array of objects, specify:

  • valueExpr
    The data field whose value is written into the value property.
  • displayExpr
    The data field whose value is displayed in the input field of the UI component.
JavaScript
  • $(function () {
  • const customers = [
  • { ID: 1, companyName: "Premier Buy", city: "Dallas", phone: "(233)2123-11" },
  • { ID: 2, companyName: "ElectrixMax", city: "Naperville", phone: "(630)438-7800" },
  • // ...
  • ];
  • const selectedValue = customers[0].ID;
  • $("#dropDownBoxContainer").dxDropDownBox({
  • value: selectedValue,
  • valueExpr: "ID",
  • displayExpr: "companyName",
  • dataSource: new DevExpress.data.ArrayStore({
  • data: customers,
  • key: "ID"
  • }),
  • contentTemplate: function(e){
  • const $dataGrid = $("<div>").dxDataGrid({
  • dataSource: e.component.option("dataSource"),
  • columns: ["companyName", "city", "phone"],
  • height: 265,
  • selection: { mode: "single" },
  • selectedRowKeys: [selectedValue],
  • onSelectionChanged: function(selectedItems){
  • const keys = selectedItems.selectedRowKeys,
  • hasSelection = keys.length;
  • e.component.option("value", hasSelection ? keys[0] : null);
  • e.component.close();
  • }
  • });
  • return $dataGrid;
  • }
  • });
  • });
See Also