Single Selection - ASP.NET Core Drop Down Box Demo

$(() => { let treeView; let dataGrid; const syncTreeViewSelection = function (treeViewInstance, value) { if (!value) { treeViewInstance.unselectAll(); } else { treeViewInstance.selectItem(value); } }; 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 $treeView = $('<div>').dxTreeView({ dataSource: e.component.getDataSource(), dataStructure: 'plain', keyExpr: 'ID', parentIdExpr: 'categoryId', selectionMode: 'single', displayExpr: 'name', selectByClick: true, onContentReady(args) { const value = e.component.option('value'); syncTreeViewSelection(args.component, value); }, selectNodesRecursive: false, onItemSelectionChanged(args) { const selectedKeys = args.component.getSelectedNodeKeys(); const singleValue = selectedKeys.length > 0 ? selectedKeys[0] : null; e.component.option('value', singleValue); }, }); treeView = $treeView.dxTreeView('instance'); e.component.on('valueChanged', (args) => { syncTreeViewSelection(treeView, args.value); e.component.close(); }); return $treeView; }, }); $('#gridBox').dxDropDownBox({ value: 3, valueExpr: 'ID', deferRendering: false, placeholder: 'Select a value...', inputAttr: { 'aria-label': 'Owner' }, displayExpr(item) { return item && `${item.CompanyName} <${item.Phone}>`; }, showClearButton: true, dataSource: makeAsyncDataSource('customers.json'), contentTemplate(e) { const value = 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' }, selection: { mode: 'single' }, selectedRowKeys: [value], height: '100%', showBorders: true, onSelectionChanged(selectedItems) { const keys = selectedItems.selectedRowKeys; const hasSelection = keys.length; e.component.option('value', hasSelection ? keys[0] : null); }, }); dataGrid = $dataGrid.dxDataGrid('instance'); e.component.on('valueChanged', (args) => { dataGrid.selectRows(args.value, false); e.component.close(); }); return $dataGrid; }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <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=5.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/26.1.4/css/dx.light.css" /> <script src="js/dx.all.js?v=26.1.4"></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.nowebsiteezstop.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 } ]

Drop Down Box - Single Selection