$(() => {
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();
e.component.option('value', selectedKeys);
},
});
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/24.1.7/css/dx.light.css" />
<script src="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;
}
[{
"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
}
]