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:
DxComponent.vue
- <template>
- <div>
- <dx-drop-down-box
- :value.sync="selectedFruit"
- :opened.sync="isDropDownBoxOpened"
- :data-source="dataSource">
- <dx-list
- :data-source="dataSource"
- selection-mode="single"
- @selection-changed="changeDropDownBoxValue($event)">
- </dx-list>
- </dx-drop-down-box>
- </div>
- </template>
- <script>
- import DxDropDownBox from "devextreme-vue/drop-down-box";
- import DxList from "devextreme-vue/list";
- export default {
- components: {
- DxDropDownBox,
- DxList
- },
- data() {
- const fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
- return {
- dataSource: fruits,
- isDropDownBoxOpened: false,
- selectedFruit: fruits[0]
- }
- },
- methods: {
- changeDropDownBoxValue(e) {
- this.selectedFruit = e.addedItems[0];
- this.isDropDownBoxOpened = false;
- }
- }
- }
- </script>
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.
DxComponent.vue
- <template>
- <div>
- <dx-drop-down-box
- :value.sync="selectedCustomers"
- :opened.sync="isDropDownBoxOpened"
- :data-source="customerDataSource"
- value-expr="ID"
- display-expr="companyName">
- <dx-data-grid
- :data-source="customerDataSource"
- :columns="['companyName', 'city', 'phone']"
- :height="265"
- :selected-row-keys.sync="selectedCustomers"
- @selection-changed="closeDropDownBox($event)">
- <dx-selection mode="single"/>
- </dx-data-grid>
- </dx-drop-down-box>
- </div>
- </template>
- <script>
- import DxDropDownBox from "devextreme-vue/drop-down-box";
- import { DxDataGrid, DxSelection } from "devextreme-vue/data-grid";
- import ArrayStore from "devextreme/data/array_store";
- export default {
- components: {
- DxDropDownBox,
- DxDataGrid,
- DxSelection
- },
- data() {
- const customers = [
- { ID: 1, companyName: "Premier Buy", city: "Dallas", phone: "(233)2123-11" },
- // ...
- ];
- return {
- customerDataSource: new ArrayStore({
- data: customers,
- key: "ID"
- }),
- isDropDownBoxOpened: false,
- selectedCustomers: [customers[0].ID]
- }
- },
- methods: {
- closeDropDownBox(e) {
- this.isDropDownBoxOpened = false;
- }
- }
- }
- </script>
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.