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.
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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.