Your search did not match any results.
Drop Down Box

Multiple Selection

If the widget embedded into the DropDownBox allows multiple selection, synchronize the DropDownBox value with the selected items. Synchronization instructions are the same for every selection mode.

In this demo, the DataGrid's selection.mode and TreeView's selectionMode options are used to enable multiple selection.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import { DropDownBox, TreeView } from 'devextreme-react'; import DataGrid, { Selection, Paging, FilterRow, Scrolling } from 'devextreme-react/data-grid'; import CustomStore from 'devextreme/data/custom_store'; import 'whatwg-fetch'; class App extends React.Component { constructor(props) { super(props); this.treeView = null; this.treeDataSource = this.makeAsyncDataSource('treeProducts.json'); this.gridDataSource = this.makeAsyncDataSource('customers.json'); this.state = { treeBoxValue: ['1_1'], gridBoxValue: [3] }; this.gridColumns = ['CompanyName', 'City', 'Phone']; this.treeView_itemSelectionChanged = this.treeView_itemSelectionChanged.bind(this); this.syncTreeViewSelection = this.syncTreeViewSelection.bind(this); this.syncDataGridSelection = this.syncDataGridSelection.bind(this); this.dataGrid_onSelectionChanged = this.dataGrid_onSelectionChanged.bind(this); this.treeViewRender = this.treeViewRender.bind(this); this.dataGridRender = this.dataGridRender.bind(this); } makeAsyncDataSource(jsonFile) { return new CustomStore({ loadMode: 'raw', key: 'ID', load: function() { return fetch(`../../../../data/${ jsonFile}`) .then(response => response.json()); } }); } render() { return ( <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">DropDownBox with embedded TreeView</div> <div className="dx-field-value"> <DropDownBox value={this.state.treeBoxValue} valueExpr="ID" displayExpr="name" placeholder="Select a value..." showClearButton={true} dataSource={this.treeDataSource} onValueChanged={this.syncTreeViewSelection} contentRender={this.treeViewRender} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">DropDownBox with embedded DataGrid</div> <div className="dx-field-value"> <DropDownBox value={this.state.gridBoxValue} valueExpr="ID" deferRendering={false} displayExpr="CompanyName" placeholder="Select a value..." showClearButton={true} dataSource={this.gridDataSource} onValueChanged={this.syncDataGridSelection} contentRender={this.dataGridRender} /> </div> </div> </div> ); } treeViewRender() { return ( <TreeView dataSource={this.treeDataSource} ref={(ref) => this.treeView = ref} dataStructure="plain" keyExpr="ID" parentIdExpr="categoryId" selectionMode="multiple" showCheckBoxesMode="normal" selectNodesRecursive={false} displayExpr="name" selectByClick={true} onContentReady={this.syncTreeViewSelection} onItemSelectionChanged={this.treeView_itemSelectionChanged} /> ); } dataGridRender() { return ( <DataGrid dataSource={this.gridDataSource} columns={this.gridColumns} hoverStateEnabled={true} selectedRowKeys={this.state.gridBoxValue} onSelectionChanged={this.dataGrid_onSelectionChanged}> <Selection mode="multiple" /> <Scrolling mode="infinite" /> <Paging enabled={true} pageSize={10} /> <FilterRow visible={true} /> </DataGrid> ); } syncTreeViewSelection(e) { let treeView = (e.component.selectItem && e.component) || (this.treeView && this.treeView.instance); if (treeView) { if (e.value === null) { treeView.unselectAll(); } else { let values = e.value || this.state.treeBoxValue; values && values.forEach(function(value) { treeView.selectItem(value); }); } } if (e.value !== undefined) { this.setState({ treeBoxValue: e.value }); } } syncDataGridSelection(e) { this.setState({ gridBoxValue: e.value || [] }); } treeView_itemSelectionChanged(e) { this.setState({ treeBoxValue: e.component.getSelectedNodesKeys() }); } dataGrid_onSelectionChanged(e) { this.setState({ gridBoxValue: e.selectedRowKeys.length && e.selectedRowKeys || [] }); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.dx-fieldset { height: 500px; }
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-react': 'npm:devextreme-react@19.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', 'whatwg-fetch': 'npm:whatwg-fetch@2.0.4/fetch.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });