Multiple Selection - jQuery 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

Backend API

$(() => { let treeView; let dataGrid; const syncTreeViewSelection = function (treeViewInstance, value) { if (!value) { treeViewInstance.unselectAll(); return; } value.forEach((key) => { treeViewInstance.selectItem(key); }); }; const makeAsyncDataSource = function (jsonFile) { return new DevExpress.data.CustomStore({ loadMode: 'raw', key: 'ID', load() { return $.getJSON(`../../../../data/${jsonFile}`); }, }); }; $('#treeBox').dxDropDownBox({ value: ['1_1'], valueExpr: 'ID', displayExpr: 'name', placeholder: 'Select a value...', showClearButton: true, inputAttr: { 'aria-label': 'Owner' }, dataSource: makeAsyncDataSource('treeProducts.json'), contentTemplate(e) { const v = e.component.option('value'); const $treeView = $('<div>').dxTreeView({ dataSource: e.component.getDataSource(), dataStructure: 'plain', keyExpr: 'ID', parentIdExpr: 'categoryId', selectionMode: 'multiple', displayExpr: 'name', selectByClick: true, onContentReady(args) { syncTreeViewSelection(args.component, v); }, selectNodesRecursive: false, showCheckBoxesMode: 'normal', onItemSelectionChanged(args) { const selectedKeys = args.component.getSelectedNodeKeys(); e.component.option('value', selectedKeys); }, }); treeView = $treeView.dxTreeView('instance'); e.component.on('valueChanged', (args) => { const { value } = args; syncTreeViewSelection(treeView, value); }); return $treeView; }, }); $('#gridBox').dxDropDownBox({ value: [3], valueExpr: 'ID', placeholder: 'Select a value...', displayExpr: 'CompanyName', showClearButton: true, inputAttr: { 'aria-label': 'Owner' }, dataSource: makeAsyncDataSource('customers.json'), contentTemplate(e) { const v = e.component.option('value'); const $dataGrid = $('<div>').dxDataGrid({ dataSource: e.component.getDataSource(), columns: ['CompanyName', 'City', 'Phone'], hoverStateEnabled: true, paging: { enabled: true, pageSize: 10 }, filterRow: { visible: true }, scrolling: { mode: 'virtual' }, height: 345, selection: { mode: 'multiple' }, selectedRowKeys: v, onSelectionChanged(selectedItems) { const keys = selectedItems.selectedRowKeys; e.component.option('value', keys); }, }); dataGrid = $dataGrid.dxDataGrid('instance'); e.component.on('valueChanged', (args) => { const { value } = args; dataGrid.selectRows(value, false); }); return $dataGrid; }, });});

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <script src="js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="form"> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">DropDownBox with embedded TreeView</div> <div class="dx-field-value"> <div id="treeBox"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">DropDownBox with embedded DataGrid</div> <div class="dx-field-value"> <div id="gridBox"></div> </div> </div> </div> </div> </div> </body></html>

#form .dx-fieldset { height: 500px;}

[{ "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 }]