Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Your search did not match any results.
Drop Down Box

Multiple Selection

Copy to CodePen
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{ 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: "infinite" }, 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=""> <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=""></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src=""></script> <link rel="stylesheet" type="text/css" href=""/> <link rel="stylesheet" type="text/css" href=""/> <script src=""></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; }