Single Selection - React Drop Down Box (2024)

TS JS

import React, { useCallback, useRef, useState } from 'react';import DropDownBox, { DropDownBoxTypes } from 'devextreme-react/drop-down-box';import TreeView, { TreeViewTypes } from 'devextreme-react/tree-view';import DataGrid, { Selection, Paging, FilterRow, Scrolling,} from 'devextreme-react/data-grid';import CustomStore from 'devextreme/data/custom_store';import 'whatwg-fetch';const gridColumns = ['CompanyName', 'City', 'Phone'];const ownerLabel = { 'aria-label': 'Owner' };const makeAsyncDataSource = (jsonFile: string) => new CustomStore({ loadMode: 'raw', key: 'ID', load() { return fetch(`../../../../data/${jsonFile}`).then((response) => response.json()); }, });const treeDataSource = makeAsyncDataSource('treeProducts.json');const gridDataSource = makeAsyncDataSource('customers.json');const gridBoxDisplayExpr = (item: { CompanyName: any; Phone: any }) => item && `${item.CompanyName} <${item.Phone}>`;function App() { const treeViewRef = useRef(null); const [treeBoxValue, setTreeBoxValue] = useState('1_1'); const [gridBoxValue, setGridBoxValue] = useState([3]); const [isGridBoxOpened, setIsGridBoxOpened] = useState(false); const [isTreeBoxOpened, setIsTreeBoxOpened] = useState(false); const treeViewItemSelectionChanged = useCallback( (e: { component: { getSelectedNodeKeys: () => any } }) => { setTreeBoxValue(e.component.getSelectedNodeKeys()); }, [], ); const dataGridOnSelectionChanged = useCallback((e: { selectedRowKeys: any }) => { setGridBoxValue(e.selectedRowKeys); setIsGridBoxOpened(false); }, []); const treeViewOnContentReady = useCallback( (e: TreeViewTypes.ContentReadyEvent) => { e.component.selectItem(treeBoxValue); }, [treeBoxValue], ); const onTreeItemClick = useCallback(() => { setIsTreeBoxOpened(false); }, []); const treeViewRender = useCallback( () => ( <TreeView dataSource={treeDataSource} ref={treeViewRef} dataStructure="plain" keyExpr="ID" parentIdExpr="categoryId" selectionMode="single" displayExpr="name" selectByClick={true} onContentReady={treeViewOnContentReady} onItemClick={onTreeItemClick} onItemSelectionChanged={treeViewItemSelectionChanged} /> ), [treeViewRef, treeViewOnContentReady, onTreeItemClick, treeViewItemSelectionChanged], ); const dataGridRender = useCallback( () => ( <DataGrid dataSource={gridDataSource} columns={gridColumns} hoverStateEnabled={true} showBorders={true} selectedRowKeys={gridBoxValue} onSelectionChanged={dataGridOnSelectionChanged} height="100%" > <Selection mode="single" /> <Scrolling mode="virtual" /> <Paging enabled={true} pageSize={10} /> <FilterRow visible={true} /> </DataGrid> ), [gridBoxValue, dataGridOnSelectionChanged], ); const syncTreeViewSelection = useCallback((e: DropDownBoxTypes.ValueChangedEvent) => { setTreeBoxValue(e.value); if (!treeViewRef.current) return; if (!e.value) { treeViewRef.current.instance.unselectAll(); } else { treeViewRef.current.instance.selectItem(e.value); } }, []); const syncDataGridSelection = useCallback((e: DropDownBoxTypes.ValueChangedEvent) => { setGridBoxValue(e.value); }, []); const onGridBoxOpened = useCallback((e: DropDownBoxTypes.OptionChangedEvent) => { if (e.name === 'opened') { setIsGridBoxOpened(e.value); } }, []); const onTreeBoxOpened = useCallback((e: DropDownBoxTypes.OptionChangedEvent) => { if (e.name === 'opened') { setIsTreeBoxOpened(e.value); } }, []); 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={treeBoxValue} opened={isTreeBoxOpened} valueExpr="ID" inputAttr={ownerLabel} displayExpr="name" placeholder="Select a value..." showClearButton={true} dataSource={treeDataSource} onValueChanged={syncTreeViewSelection} onOptionChanged={onTreeBoxOpened} contentRender={treeViewRender} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">DropDownBox with embedded DataGrid</div> <div className="dx-field-value"> <DropDownBox value={gridBoxValue} opened={isGridBoxOpened} valueExpr="ID" deferRendering={false} inputAttr={ownerLabel} displayExpr={gridBoxDisplayExpr} placeholder="Select a value..." showClearButton={true} dataSource={gridDataSource} onValueChanged={syncDataGridSelection} onOptionChanged={onGridBoxOpened} contentRender={dataGridRender} /> </div> </div> </div> );}export default App;

import React, { useCallback, useRef, useState } from 'react';import DropDownBox from 'devextreme-react/drop-down-box';import TreeView from 'devextreme-react/tree-view';import DataGrid, { Selection, Paging, FilterRow, Scrolling,} from 'devextreme-react/data-grid';import CustomStore from 'devextreme/data/custom_store';import 'whatwg-fetch';const gridColumns = ['CompanyName', 'City', 'Phone'];const ownerLabel = { 'aria-label': 'Owner' };const makeAsyncDataSource = (jsonFile) => new CustomStore({ loadMode: 'raw', key: 'ID', load() { return fetch(`../../../../data/${jsonFile}`).then((response) => response.json()); }, });const treeDataSource = makeAsyncDataSource('treeProducts.json');const gridDataSource = makeAsyncDataSource('customers.json');const gridBoxDisplayExpr = (item) => item && `${item.CompanyName} <${item.Phone}>`;function App() { const treeViewRef = useRef(null); const [treeBoxValue, setTreeBoxValue] = useState('1_1'); const [gridBoxValue, setGridBoxValue] = useState([3]); const [isGridBoxOpened, setIsGridBoxOpened] = useState(false); const [isTreeBoxOpened, setIsTreeBoxOpened] = useState(false); const treeViewItemSelectionChanged = useCallback((e) => { setTreeBoxValue(e.component.getSelectedNodeKeys()); }, []); const dataGridOnSelectionChanged = useCallback((e) => { setGridBoxValue(e.selectedRowKeys); setIsGridBoxOpened(false); }, []); const treeViewOnContentReady = useCallback( (e) => { e.component.selectItem(treeBoxValue); }, [treeBoxValue], ); const onTreeItemClick = useCallback(() => { setIsTreeBoxOpened(false); }, []); const treeViewRender = useCallback( () => ( <TreeView dataSource={treeDataSource} ref={treeViewRef} dataStructure="plain" keyExpr="ID" parentIdExpr="categoryId" selectionMode="single" displayExpr="name" selectByClick={true} onContentReady={treeViewOnContentReady} onItemClick={onTreeItemClick} onItemSelectionChanged={treeViewItemSelectionChanged} /> ), [treeViewRef, treeViewOnContentReady, onTreeItemClick, treeViewItemSelectionChanged], ); const dataGridRender = useCallback( () => ( <DataGrid dataSource={gridDataSource} columns={gridColumns} hoverStateEnabled={true} showBorders={true} selectedRowKeys={gridBoxValue} onSelectionChanged={dataGridOnSelectionChanged} height="100%" > <Selection mode="single" /> <Scrolling mode="virtual" /> <Paging enabled={true} pageSize={10} /> <FilterRow visible={true} /> </DataGrid> ), [gridBoxValue, dataGridOnSelectionChanged], ); const syncTreeViewSelection = useCallback((e) => { setTreeBoxValue(e.value); if (!treeViewRef.current) return; if (!e.value) { treeViewRef.current.instance.unselectAll(); } else { treeViewRef.current.instance.selectItem(e.value); } }, []); const syncDataGridSelection = useCallback((e) => { setGridBoxValue(e.value); }, []); const onGridBoxOpened = useCallback((e) => { if (e.name === 'opened') { setIsGridBoxOpened(e.value); } }, []); const onTreeBoxOpened = useCallback((e) => { if (e.name === 'opened') { setIsTreeBoxOpened(e.value); } }, []); 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={treeBoxValue} opened={isTreeBoxOpened} valueExpr="ID" inputAttr={ownerLabel} displayExpr="name" placeholder="Select a value..." showClearButton={true} dataSource={treeDataSource} onValueChanged={syncTreeViewSelection} onOptionChanged={onTreeBoxOpened} contentRender={treeViewRender} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">DropDownBox with embedded DataGrid</div> <div className="dx-field-value"> <DropDownBox value={gridBoxValue} opened={isGridBoxOpened} valueExpr="ID" deferRendering={false} inputAttr={ownerLabel} displayExpr={gridBoxDisplayExpr} placeholder="Select a value..." showClearButton={true} dataSource={gridDataSource} onValueChanged={syncDataGridSelection} onOptionChanged={onGridBoxOpened} contentRender={dataGridRender} /> </div> </div> </div> );}export default App;

import React from 'react';import ReactDOM from 'react-dom';import App from './App.tsx';ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';import ReactDOM from 'react-dom';import App from './App.js';ReactDOM.render(<App />, document.getElementById('app'));

[{ "ID": 1, "CompanyName": "Premier Buy", "Address": "7601 Penn Avenue South", "City": "Richfield", "State": "Minnesota", "Zipcode": 55423, "Phone": "(612) 291-1000", "Fax": "(612) 291-2001", "Website": "http://www.nowebsitepremierbuy.dx"}, { "ID": 2, "CompanyName": "ElectrixMax", "Address": "263 Shuman Blvd", "City": "Naperville", "State": "Illinois", "Zipcode": 60563, "Phone": "(630) 438-7800", "Fax": "(630) 438-7801", "Website": "http://www.nowebsiteelectrixmax.dx"}, { "ID": 3, "CompanyName": "Video Emporium", "Address": "1201 Elm Street", "City": "Dallas", "State": "Texas", "Zipcode": 75270, "Phone": "(214) 854-3000", "Fax": "(214) 854-3001", "Website": "http://www.nowebsitevideoemporium.dx"}, { "ID": 4, "CompanyName": "Screen Shop", "Address": "1000 Lowes Blvd", "City": "Mooresville", "State": "North Carolina", "Zipcode": 28117, "Phone": "(800) 445-6937", "Fax": "(800) 445-6938", "Website": "http://www.nowebsitescreenshop.dx"}, { "ID": 5, "CompanyName": "Braeburn", "Address": "1 Infinite Loop", "City": "Cupertino", "State": "California", "Zipcode": 95014, "Phone": "(408) 996-1010", "Fax": "(408) 996-1012", "Website": "http://www.nowebsitebraeburn.dx"}, { "ID": 6, "CompanyName": "PriceCo", "Address": "30 Hunter Lane", "City": "Camp Hill", "State": "Pennsylvania", "Zipcode": 17011, "Phone": "(717) 761-2633", "Fax": "(717) 761-2334", "Website": "http://www.nowebsitepriceco.dx"}, { "ID": 7, "CompanyName": "Ultimate Gadget", "Address": "1557 Watson Blvd", "City": "Warner Robbins", "State": "Georgia", "Zipcode": 31093, "Phone": "(995) 623-6785", "Fax": "(995) 623-6786", "Website": "http://www.nowebsiteultimategadget.dx"}, { "ID": 8, "CompanyName": "EZ Stop", "Address": "618 Michillinda Ave.", "City": "Arcadia", "State": "California", "Zipcode": 91007, "Phone": "(626) 265-8632", "Fax": "(626) 265-8633", "Website": "http://www.nowebsitee*zstop.dx"}, { "ID": 9, "CompanyName": "Clicker", "Address": "1100 W. Artesia Blvd.", "City": "Compton", "State": "California", "Zipcode": 90220, "Phone": "(310) 884-9000", "Fax": "(310) 884-9001", "Website": "http://www.nowebsiteclicker.dx"}, { "ID": 10, "CompanyName": "Store of America", "Address": "2401 Utah Ave. South", "City": "Seattle", "State": "Washington", "Zipcode": 98134, "Phone": "(206) 447-1575", "Fax": "(206) 447-1576", "Website": "http://www.nowebsiteamerica.dx"}, { "ID": 11, "CompanyName": "Zone Toys", "Address": "1945 S Cienega Boulevard", "City": "Los Angeles", "State": "California", "Zipcode": 90034, "Phone": "(310) 237-5642", "Fax": "(310) 237-5643", "Website": "http://www.nowebsitezonetoys.dx"}, { "ID": 12, "CompanyName": "ACME", "Address": "2525 E El Segundo Blvd", "City": "El Segundo", "State": "California", "Zipcode": 90245, "Phone": "(310) 536-0611", "Fax": "(310) 536-0612", "Website": "http://www.nowebsiteacme.dx"}]

[ { "ID": 1, "name": "Stores", "expanded": true }, { "ID": "1_1", "categoryId": 1, "name": "Super Mart of the West", "expanded": true }, { "ID": "1_1_1", "categoryId": "1_1", "name": "Video Players" }, { "ID": "1_1_1_1", "categoryId": "1_1_1", "name": "HD Video Player", "price": 220 }, { "ID": "1_1_1_2", "categoryId": "1_1_1", "name": "SuperHD Video Player", "price": 270 }, { "ID": "1_1_2", "categoryId": "1_1", "name": "Televisions", "expanded": true }, { "ID": "1_1_2_1", "categoryId": "1_1_2", "name": "SuperLCD 42", "price": 1200 }, { "ID": "1_1_2_2", "categoryId": "1_1_2", "name": "SuperLED 42", "price": 1450 }, { "ID": "1_1_2_3", "categoryId": "1_1_2", "name": "SuperLED 50", "price": 1600 }, { "ID": "1_1_2_4", "categoryId": "1_1_2", "name": "SuperLCD 55", "price": 1750 }, { "ID": "1_1_2_5", "categoryId": "1_1_2", "name": "SuperLCD 70", "price": 4000 }, { "ID": "1_1_3", "categoryId": "1_1", "name": "Monitors" }, { "ID": "1_1_3_1", "categoryId": "1_1_3", "name": "19\"" }, { "ID": "1_1_3_1_1", "categoryId": "1_1_3_1", "name": "DesktopLCD 19", "price": 160 }, { "ID": "1_1_4", "categoryId": "1_1", "name": "Projectors" }, { "ID": "1_1_4_1", "categoryId": "1_1_4", "name": "Projector Plus", "price": 550 }, { "ID": "1_1_4_2", "categoryId": "1_1_4", "name": "Projector PlusHD", "price": 750 }]

<!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/23.2.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/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.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body></html>

.dx-fieldset { height: 500px;}