DevExtreme Vue - Overview
The DropDownBox is a widget that consists of a text field, which displays the current value, and a drop-down field, which can contain any UI element.
The simplest widget configuration requires specifying a dataSource, value and contentTemplate. The following code adds the DropDownBox to your page:
jQuery
JavaScript
$(function () { var fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"]; $("#dropDownBoxContainer").dxDropDownBox({ value: fruits[0], dataSource: fruits, contentTemplate: function(e) { var $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; } }); });
Angular
HTML
TypeScript
<dx-drop-down-box [(value)]="selectedFruit" [(opened)]="isDropDownBoxOpened" [dataSource]="fruits"> <div *dxTemplate="let contentData of 'content'"> <dx-list [dataSource]="fruits" selectionMode="single" (onSelectionChanged)="changeDropDownBoxValue($event)"> </dx-list> </div> </dx-drop-down-box>
import { DxDropDownBoxModule, DxListModule } from "devextreme-angular"; // ... export class AppComponent { fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"]; selectedFruit = this.fruits[0]; isDropDownBoxOpened = false; changeDropDownBoxValue = function (args) { this.selectedFruit = args.addedItems[0]; this.isDropDownBoxOpened = false; } } @NgModule({ imports: [ // ... DxDropDownBoxModule, DxListModule ], // ... })
If your data is an array of objects, specify:
- valueExpr
The data field whose value is written into the value option. - displayExpr
The data field whose value is displayed in the input field of the widget.
jQuery
JavaScript
$(function () { var customers = [ { id: 1, companyName: "Premier Buy", city: "Dallas", phone: "(233)2123-11" } // ... ]; var selectedValue = customers[0].id; $("#dropDownBoxContainer").dxDropDownBox({ value: selectedValue, valueExpr: "id", displayExpr: "companyName", dataSource: new DevExpress.data.ArrayStore({ data: customers, key: "id" }), contentTemplate: function(e){ var $dataGrid = $("<div>").dxDataGrid({ dataSource: e.component.option("dataSource"), columns: ["companyName", "city", "phone"], height: 265, selection: { mode: "single" }, selectedRowKeys: [selectedValue], onSelectionChanged: function(selectedItems){ var keys = selectedItems.selectedRowKeys, hasSelection = keys.length; e.component.option("value", hasSelection ? keys[0] : null); e.component.close(); } }); return $dataGrid; } }); });
Angular
HTML
TypeScript
<dx-drop-down-box [(value)]="selectedCustomers" [(opened)]="isDropDownBoxOpened" valueExpr="id" displayExpr="companyName" [dataSource]="customerDataSource"> <div *dxTemplate="let contentData of 'content'"> <dx-data-grid [dataSource]="customerDataSource" [selection]="{ mode: 'single' }" [columns]="['companyName', 'city', 'phone']" [height]="265" [(selectedRowKeys)]="selectedCustomers" (onSelectionChanged)="changeDropDownBoxValue($event)"> </dx-data-grid> </div> </dx-drop-down-box>
import { DxDropDownBoxModule, DxDataGridModule } from "devextreme-angular"; import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { customers = [ { id: 1, companyName: "Premier Buy", city: "Dallas", phone: "(233)2123-11" }, // ... ]; customerDataSource = new ArrayStore({ data: this.customers, key: "id" }); selectedCustomers = [this.customers[1].id]; isDropDownBoxOpened = false; changeDropDownBoxValue = function (args) { this.isDropDownBoxOpened = false; } } @NgModule({ imports: [ // ... DxDropDownBoxModule, DxDataGridModule ], // ... })
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.