$(function(){
var treeView, dataGrid;
var syncTreeViewSelection = function(treeView, value){
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);
}
});
};
$("#treeBox").dxDropDownBox({
value: "1_1",
valueExpr: "ID",
displayExpr: "name",
placeholder: "Select a value...",
showClearButton: true,
dataSource: makeAsyncDataSource("treeProducts.json"),
contentTemplate: function(e){
var value = e.component.option("value"),
$treeView = $("<div>").dxTreeView({
dataSource: e.component.getDataSource(),
dataStructure: "plain",
keyExpr: "ID",
parentIdExpr: "categoryId",
selectionMode: "single",
displayExpr: "name",
selectByClick: true,
onContentReady: function(args){
syncTreeViewSelection(args.component, value);
},
selectNodesRecursive: false,
onItemSelectionChanged: function(args){
var selectedKeys = args.component.getSelectedNodeKeys();
e.component.option("value", selectedKeys);
}
});
treeView = $treeView.dxTreeView("instance");
e.component.on("valueChanged", function(args){
syncTreeViewSelection(treeView, args.value);
});
return $treeView;
}
});
$("#gridBox").dxDropDownBox({
value: 3,
valueExpr: "ID",
deferRendering: false,
placeholder: "Select a value...",
displayExpr: function(item){
return item && item.CompanyName + " <" + item.Phone + ">";
},
showClearButton: true,
dataSource: makeAsyncDataSource("customers.json"),
contentTemplate: function(e){
var value = e.component.option("value"),
$dataGrid = $("<div>").dxDataGrid({
dataSource: e.component.getDataSource(),
columns: ["CompanyName", "City", "Phone"],
hoverStateEnabled: true,
paging: { enabled: true, pageSize: 10 },
filterRow: { visible: true },
scrolling: { mode: "infinite" },
selection: { mode: "single" },
selectedRowKeys: [value],
height: "100%",
onSelectionChanged: function(selectedItems){
var keys = selectedItems.selectedRowKeys,
hasSelection = keys.length;
e.component.option("value", hasSelection ? keys[0] : null);
}
});
dataGrid = $dataGrid.dxDataGrid("instance");
e.component.on("valueChanged", function(args){
dataGrid.selectRows(args.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/20.2.5/css/dx.common.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css"/>
<script src="https://cdn3.devexpress.com/jslib/20.2.5/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;
}