Your search did not match any results.
Drop Down Box

Multiple Selection

Copy to CodePen
Apply
Reset
window.onload = function() { var treeView; var syncTreeViewSelection = function(treeView, value){ if (!treeView) return; if (!value) { treeView.unselectAll(); return; } value.forEach(function(key){ treeView.selectItem(key); }); }; var makeAsyncDataSource = function(jsonFile){ return new DevExpress.data.CustomStore({ loadMode: "raw", key: "ID", load: function() { return $.getJSON("../../../../data/" + jsonFile); } }); }; var getSelectedItemsKeys = function(items) { var result = []; items.forEach(function(item) { if(item.selected) { result.push(item.key); } if(item.items.length) { result = result.concat(getSelectedItemsKeys(item.items)); } }); return result; }; var treeDataSource = makeAsyncDataSource("treeProducts.json"), gridDataSource = makeAsyncDataSource("customers.json"); var treeBoxOptions = { value: ko.observable(["1_1"]), valueExpr: "ID", displayExpr: "name", placeholder: "Select a value...", showClearButton: true, dataSource: treeDataSource, treeView: { dataSource: treeDataSource, dataStructure: "plain", keyExpr: "ID", parentIdExpr: "categoryId", selectionMode: "multiple", onContentReady: function(e) { treeView = e.component; syncTreeViewSelection(treeView, treeBoxOptions.value()); }, onItemSelectionChanged: function(args){ var nodes = args.component.getNodes(), value = getSelectedItemsKeys(nodes); treeBoxOptions.value(value); }, displayExpr: "name", selectByClick: true, selectNodesRecursive: false, showCheckBoxesMode: "normal" } }; var gridBoxValue = ko.observable([3]); var gridBoxOptions = { value: gridBoxValue, valueExpr: "ID", placeholder: "Select a value...", displayExpr: "CompanyName", showClearButton: true, dataSource: gridDataSource, dataGrid: { dataSource: gridDataSource, columns: ["CompanyName", "City", "Phone"], hoverStateEnabled: true, paging: { enabled: true, pageSize: 10 }, filterRow: { visible: true }, scrolling: { mode: "virtual" }, height: 345, selection: { mode: "multiple" }, selectedRowKeys: ko.computed(function(){ return gridBoxValue() || []; }), onSelectionChanged: function(selectedItems){ gridBoxValue(selectedItems.selectedRowKeys); } } }; ko.computed(function(){ syncTreeViewSelection(treeView, treeBoxOptions.value()); }); var viewModel = { treeBoxOptions: treeBoxOptions, gridBoxOptions: gridBoxOptions }; ko.applyBindings(viewModel, document.getElementById("dropdown-box-demo")); };
<!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> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.common.css"/> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.light.css"/> <script src="https://cdn3.devexpress.com/jslib/21.1.4/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="dropdown-box-demo" class="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 data-bind="dxDropDownBox: treeBoxOptions"> <div data-options="dxTemplate: { name: 'content' }"> <div data-bind="dxTreeView: treeBoxOptions.treeView"></div> </div> </div> </div> </div> <div class="dx-field"> <div class="dx-field-label">DropDownBox with embedded DataGrid</div> <div class="dx-field-value"> <div data-bind="dxDropDownBox: gridBoxOptions"> <div data-options="dxTemplate: { name: 'content' }"> <div data-bind="dxDataGrid: gridBoxOptions.dataGrid"></div> </div> </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.com" }, { "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.com" }, { "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.com" }, { "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.com" }, { "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.com" }, { "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.com" }, { "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.com" }, { "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.com" }, { "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.com" }, { "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.com" }, { "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.com" }, { "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.com" }]
[ { "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 } ]