Multiple Selection - React Drop Down Box (2024)

Material Light

Material Blue Light

Material Lime Light

Material Orange Light

Material Purple Light

Material Teal Light

Material Dark

Material Blue Dark

Material Lime Dark

Material Orange Dark

Material Purple Dark

Material Teal Dark

Material Light Compact

Material Blue Light Compact

Material Lime Light Compact

Material Orange Light Compact

Material Purple Light Compact

Material Teal Light Compact

Material Dark Compact

Material Blue Dark Compact

Material Lime Dark Compact

Material Orange Dark Compact

Material Purple Dark Compact

Material Teal Dark Compact

Generic Light

Carmine

Soft Blue

Green Mist

Generic Dark

Contrast

Dark Violet

Dark Moon

Generic Light Compact

Generic Dark Compact

Contrast Dark Compact

Fluent Light

Fluent SaaS Light

Fluent Dark

Fluent SaaS Dark

Fluent Light Compact

Fluent SaaS Light Compact

Fluent Dark Compact

Fluent SaaS Dark Compact

TS JS

Backend API

import React, { useCallback, useRef, useState } from 'react';import DropDownBox, { DropDownBoxTypes } from 'devextreme-react/drop-down-box';import TreeView from 'devextreme-react/tree-view';import DataGrid, { Selection, Paging, FilterRow, Scrolling, DataGridTypes,} 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');function App() { const [treeBoxValue, setTreeBoxValue] = useState(['1_1']); const [gridBoxValue, setGridBoxValue] = useState([3]); const treeViewRef = useRef<TreeView<any>>(); const treeViewRender = useCallback( () => ( <TreeView dataSource={treeDataSource} ref={treeViewRef} dataStructure="plain" keyExpr="ID" parentIdExpr="categoryId" selectionMode="multiple" showCheckBoxesMode="normal" selectNodesRecursive={false} displayExpr="name" selectByClick={true} onContentReady={syncTreeViewSelection} onItemSelectionChanged={treeViewItemSelectionChanged} /> ), [treeDataSource], ); const dataGridRender = useCallback( () => ( <DataGrid height={345} dataSource={gridDataSource} columns={gridColumns} hoverStateEnabled={true} selectedRowKeys={gridBoxValue} onSelectionChanged={dataGridOnSelectionChanged} > <Selection mode="multiple" /> <Scrolling mode="virtual" /> <Paging enabled={true} pageSize={10} /> <FilterRow visible={true} /> </DataGrid> ), [gridDataSource, gridBoxValue], ); const syncTreeViewSelection = useCallback( (e: DropDownBoxTypes.ValueChangedEvent | any) => { const treeView = (e.component.selectItem && e.component) || (treeViewRef.current && treeViewRef.current.instance); if (treeView) { if (e.value === null) { treeView.unselectAll(); } else { const values = e.value || treeBoxValue; values && values.forEach((value) => { treeView.selectItem(value); }); } } if (e.value !== undefined) { setTreeBoxValue(e.value); } }, [treeBoxValue], ); const syncDataGridSelection = useCallback((e: DropDownBoxTypes.ValueChangedEvent) => { setGridBoxValue(e.value || []); }, []); const treeViewItemSelectionChanged = useCallback( (e: { component: { getSelectedNodeKeys: () => any } }) => { setTreeBoxValue(e.component.getSelectedNodeKeys()); }, [], ); const dataGridOnSelectionChanged = useCallback((e: DataGridTypes.SelectionChangedEvent) => { setGridBoxValue((e.selectedRowKeys.length && e.selectedRowKeys) || []); }, []); 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} valueExpr="ID" inputAttr={ownerLabel} displayExpr="name" placeholder="Select a value..." showClearButton={true} dataSource={treeDataSource} onValueChanged={syncTreeViewSelection} 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} valueExpr="ID" deferRendering={false} inputAttr={ownerLabel} displayExpr="CompanyName" placeholder="Select a value..." showClearButton={true} dataSource={gridDataSource} onValueChanged={syncDataGridSelection} 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');function App() { const [treeBoxValue, setTreeBoxValue] = useState(['1_1']); const [gridBoxValue, setGridBoxValue] = useState([3]); const treeViewRef = useRef(); const treeViewRender = useCallback( () => ( <TreeView dataSource={treeDataSource} ref={treeViewRef} dataStructure="plain" keyExpr="ID" parentIdExpr="categoryId" selectionMode="multiple" showCheckBoxesMode="normal" selectNodesRecursive={false} displayExpr="name" selectByClick={true} onContentReady={syncTreeViewSelection} onItemSelectionChanged={treeViewItemSelectionChanged} /> ), [treeDataSource], ); const dataGridRender = useCallback( () => ( <DataGrid height={345} dataSource={gridDataSource} columns={gridColumns} hoverStateEnabled={true} selectedRowKeys={gridBoxValue} onSelectionChanged={dataGridOnSelectionChanged} > <Selection mode="multiple" /> <Scrolling mode="virtual" /> <Paging enabled={true} pageSize={10} /> <FilterRow visible={true} /> </DataGrid> ), [gridDataSource, gridBoxValue], ); const syncTreeViewSelection = useCallback( (e) => { const treeView = (e.component.selectItem && e.component) || (treeViewRef.current && treeViewRef.current.instance); if (treeView) { if (e.value === null) { treeView.unselectAll(); } else { const values = e.value || treeBoxValue; values && values.forEach((value) => { treeView.selectItem(value); }); } } if (e.value !== undefined) { setTreeBoxValue(e.value); } }, [treeBoxValue], ); const syncDataGridSelection = useCallback((e) => { setGridBoxValue(e.value || []); }, []); const treeViewItemSelectionChanged = useCallback((e) => { setTreeBoxValue(e.component.getSelectedNodeKeys()); }, []); const dataGridOnSelectionChanged = useCallback((e) => { setGridBoxValue((e.selectedRowKeys.length && e.selectedRowKeys) || []); }, []); 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} valueExpr="ID" inputAttr={ownerLabel} displayExpr="name" placeholder="Select a value..." showClearButton={true} dataSource={treeDataSource} onValueChanged={syncTreeViewSelection} 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} valueExpr="ID" deferRendering={false} inputAttr={ownerLabel} displayExpr="CompanyName" placeholder="Select a value..." showClearButton={true} dataSource={gridDataSource} onValueChanged={syncDataGridSelection} 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;}

Multiple Selection - React Drop Down Box (2024)

FAQs

How do you handle multiple select dropdowns in react? ›

Enabling multi-select dropdowns in React Native

Installing required packages.
Creating a basic multi-select dropdown.
Basic visual customizations.
Basic behavioral customizations.
Using event handler props.
Adding custom styling definitions.
Customizing the multi-select box text.

More items...

Mar 11, 2024

How can I pass multiple value by select in Reactjs? ›

You can make a select box controlled by passing a value prop: value : A string (or an array of strings for multiple={true} ). Controls which option is selected. Every value string match the value of some <option> nested inside the <select> .

Read On ›

How to select multiple values from dropdown? ›

Windows: We need to hold down the CTRL button to select multiple options. Mac: We need to hold down the command button to select multiple options.

Get More Info Here ›

How do I create a multi level dropdown menu in react? ›

Open the components/MenuItems. jsx file and add the following code: import Dropdown from './Dropdown'; const MenuItems = ({ items }) => { return ( <li className="menu-items"> {items. submenu ? ( <> <button type="button" aria-haspopup="menu"> {items.

Get More Info ›

Can multiple items be selected in a DropDownList? ›

With a dropdown select, it is only possible to select one option. If you want the ability to select more than one option, you'll want to use a Multiple Checkbox property type.

How do you MultiSelect a dynamically populated dropdown based on another dropdown value selection? ›

Procedure: How to Add a Dynamic Multiselect Drop-Down List

Required: Allocate a text file that will contain the dynamic values. ...
Include a DEFINE command to create a temporary field that identifies the values.
Include the following command to save the values to the allocated file.

More items...

Explore More ›

How to get all selected values of a multiple select box in javascript? ›

To get the list of selected options you can do it in two ways depending on what exactly you want to do. Bind the change event and use . val() method to get the array of selected values, e.x: $('#studentsSelect'). on('change', function() { var values = $(this).

Explore More ›

How do you pass multiple values in context in React? ›

Steps to Add Multiple Contexts in React

Use React. createContext to create each context.
Use a Context. Provider to pass the current context value to the tree below.
Any component in the tree can access the value by using a Context. Consumer or the useContext hook in functional components.

Oct 25, 2023

How do you pass multiple parameters to component React? ›

In React, we can pass an object as a parameter to a component by using object destructuring in the component's function parameter or by accessing the object directly through props. elements. Passing an object as a parameter allows us to pass multiple related values to a component in a structured way.

Read The Full Story ›

How would you enable multiple items to be selected in select? ›

Multiple List Selections. Adding the multiple attribute to <select> allows the user to select more than one option. The user will need to hold down the ctrl or cmd key to select more than one option in the list, so you will need to add some explanatory text.

See Details ›

What is the difference between select and dropdown? ›

Select versus Dropdown

A select presents a list of options from which the users can select only one item from that list. It works best in forms when users choose an option from the select list and submit data. A dropdown presents a list of options that users can select one or several options from that list.

Discover More Details ›

How do I select multiple values in react dropdown? ›

In ReactJS applications, we always need to add the UI component that allows us to select multiple options from the DropDown list. So in Bootstrap, the Multi-Select Dropdown is a UI component that allows us to select multiple different options from the list of dropdown menus.