window.onload = function() {
var treeView;
var syncTreeViewSelection = function(treeView, value){
if (!treeView) return;
if (!value) {
treeView.unselectAll();
} else {
treeView.selectItem(value);
}
};
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"),
isTreeBoxOpened = ko.observable(false);
var treeBoxOptions = {
value: ko.observable("1_1"),
valueExpr: "ID",
opened: isTreeBoxOpened,
displayExpr: "name",
placeholder: "Select a value...",
showClearButton: true,
dataSource: treeDataSource,
treeView: {
dataSource: treeDataSource,
dataStructure: "plain",
keyExpr: "ID",
parentIdExpr: "categoryId",
selectionMode: "single",
onContentReady: function(e) {
treeView = e.component;
syncTreeViewSelection(treeView, treeBoxOptions.value());
},
onItemSelectionChanged: function(args){
var nodes = args.component.getNodes(),
value = getSelectedItemsKeys(nodes);
treeBoxOptions.value(value);
},
onItemClick: function(){
isTreeBoxOpened(false);
},
displayExpr: "name",
selectByClick: true,
selectNodesRecursive: false
}
};
var gridBoxValue = ko.observable(3),
isGridBoxOpened = ko.observable(false);
var gridBoxOptions = {
value: gridBoxValue,
opened: isGridBoxOpened,
valueExpr: "ID",
deferRendering: false,
placeholder: "Select a value...",
displayExpr: function(item){
return item && item.CompanyName + " <" + item.Phone + ">";
},
showClearButton: true,
dataSource: gridDataSource,
dataGrid: {
dataSource: gridDataSource,
columns: ["CompanyName", "City", "Phone"],
hoverStateEnabled: true,
paging: { enabled: true, pageSize: 10 },
filterRow: { visible: true },
scrolling: { mode: "virtual" },
selection: { mode: "single" },
height: "100%",
selectedRowKeys: ko.computed(function(){
var editorValue = gridBoxValue();
return (editorValue && [editorValue]) || [];
}),
onSelectionChanged: function(selectedItems){
var hasSelection = selectedItems.selectedRowKeys.length;
gridBoxValue(hasSelection ? selectedItems.selectedRowKeys[0] : null);
isGridBoxOpened(false);
}
}
};
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/20.2.6/css/dx.common.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css"/>
<script src="https://cdn3.devexpress.com/jslib/20.2.6/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;
}