$(() => {
const selectedEmployeesList = $('#selected-employees').dxList({
width: 400,
height: 200,
showScrollbar: 'always',
itemTemplate(item) {
return `<div>${item.prefix} ${item.fullName} (${item.position})</div>`;
},
}).dxList('instance');
const treeView = $('#treeview').dxTreeView({
items: employees,
width: 340,
height: 320,
showCheckBoxesMode: 'normal',
onSelectionChanged(e) {
syncSelection(e.component);
},
onContentReady(e) {
syncSelection(e.component);
},
itemTemplate(item) {
return `<div>${item.fullName} (${item.position})</div>`;
},
}).dxTreeView('instance');
function syncSelection(treeViewInstance) {
const selectedEmployees = treeViewInstance.getSelectedNodes()
.map((node) => node.itemData);
selectedEmployeesList.option('items', selectedEmployees);
}
$('#showCheckBoxesMode').dxSelectBox({
items: ['normal', 'selectAll', 'none'],
inputAttr: { 'aria-label': 'Show Checkboxes Mode' },
value: 'normal',
onValueChanged(e) {
treeView.option('showCheckBoxesMode', e.value);
if (e.value === 'selectAll') {
selectionModeSelectBox.option('value', 'multiple');
recursiveCheckBox.option('disabled', false);
}
selectionModeSelectBox.option('disabled', e.value === 'selectAll');
},
});
const selectionModeSelectBox = $('#selectionMode').dxSelectBox({
items: ['multiple', 'single'],
value: 'multiple',
inputAttr: { 'aria-label': 'Selection Mode' },
onValueChanged(e) {
treeView.option('selectionMode', e.value);
if (e.value === 'single') {
recursiveCheckBox.option('value', false);
treeView.unselectAll();
}
recursiveCheckBox.option('disabled', e.value === 'single');
},
}).dxSelectBox('instance');
const recursiveCheckBox = $('#selectNodesRecursive').dxCheckBox({
text: 'Select Nodes Recursive',
value: true,
onValueChanged(e) {
treeView.option('selectNodesRecursive', e.value);
},
}).dxCheckBox('instance');
$('#selectByClick').dxCheckBox({
text: 'Select By Click',
value: false,
onValueChanged(e) {
treeView.option('selectByClick', e.value);
},
});
});
<!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>
<script src="data.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 class="form">
<h4>Employees</h4>
<div id="treeview"></div>
<div class="selected-container">
Selected employees
<div id="selected-employees"></div>
</div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="options-container">
<div class="option">
<span>Show Check Boxes Mode:</span>
<div class="editor-container">
<div id="showCheckBoxesMode"></div>
</div>
</div>
<div class="option">
<span>Selection Mode:</span>
<div class="editor-container">
<div id="selectionMode"></div>
</div>
</div>
<div class="option">
<div class="caption-placeholder"> </div>
<div class="editor-container">
<div id="selectNodesRecursive"></div>
</div>
</div>
<div class="option">
<div class="caption-placeholder"> </div>
<div class="editor-container">
<div id="selectByClick"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.form > h4 {
margin-bottom: 20px;
}
.form > div,
#treeview {
display: inline-block;
vertical-align: top;
}
.selected-container {
padding: 20px;
margin-left: 20px;
background-color: rgba(191, 191, 191, 0.15);
font-size: 115%;
font-weight: bold;
}
#selected-employees {
margin-top: 20px;
}
.selected-container .dx-list-item-content {
padding-left: 0;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
box-sizing: border-box;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
width: 24%;
margin-top: 10px;
margin-right: 9px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
}
.options-container {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.editor-container {
height: 100%;
display: flex;
align-items: center;
}
.editor-container > * {
width: 100%;
}
.option:last-of-type {
margin-right: 0;
}
const employees = [{
id: 1,
fullName: 'John Heart',
prefix: 'Dr.',
position: 'CEO',
expanded: true,
items: [{
id: 2,
fullName: 'Samantha Bright',
prefix: 'Dr.',
position: 'COO',
expanded: true,
items: [{
id: 3,
fullName: 'Kevin Carter',
prefix: 'Mr.',
position: 'Shipping Manager',
}, {
id: 14,
fullName: 'Victor Norris',
prefix: 'Mr.',
selected: true,
position: 'Shipping Assistant',
}],
}, {
id: 4,
fullName: 'Brett Wade',
prefix: 'Mr.',
position: 'IT Manager',
expanded: true,
items: [{
id: 5,
fullName: 'Amelia Harper',
prefix: 'Mrs.',
position: 'Network Admin',
}, {
id: 6,
fullName: 'Wally Hobbs',
prefix: 'Mr.',
position: 'Programmer',
}, {
id: 7,
fullName: 'Brad Jameson',
prefix: 'Mr.',
position: 'Programmer',
}, {
id: 8,
fullName: 'Violet Bailey',
prefix: 'Ms.',
position: 'Jr Graphic Designer',
}],
}, {
id: 9,
fullName: 'Barb Banks',
prefix: 'Mrs.',
position: 'Support Manager',
expanded: true,
items: [{
id: 10,
fullName: 'Kelly Rodriguez',
prefix: 'Ms.',
position: 'Support Assistant',
}, {
id: 11,
fullName: 'James Anderson',
prefix: 'Mr.',
position: 'Support Assistant',
}],
}],
}];