$(function(){
var selectedEmployeesList = $("#selected-employees").dxList({
width: 400,
height: 200,
showScrollbar: "always",
itemTemplate: function(item) {
return "<div>" + item.prefix + " " + item.fullName + " (" + item.position + ")</div>";
}
}).dxList("instance");
var treeView = $("#treeview").dxTreeView({
items: employees,
width: 340,
height: 320,
showCheckBoxesMode: "normal",
onSelectionChanged: function(e) {
syncSelection(e.component);
},
onContentReady: function(e) {
syncSelection(e.component);
},
itemTemplate: function(item) {
return "<div>" + item.fullName + " (" + item.position + ")</div>";
}
}).dxTreeView('instance');
function syncSelection(treeView){
var selectedEmployees = treeView.getSelectedNodes()
.map(function(node) { return node.itemData; });
selectedEmployeesList.option("items", selectedEmployees);
}
$("#showCheckBoxesMode").dxSelectBox({
items: ["selectAll", "normal", "none"],
value: "normal",
onValueChanged: function(e) {
treeView.option("showCheckBoxesMode", e.value);
if(e.value === 'selectAll') {
selectionModeSelectBox.option('value', 'multiple');
recursiveCheckBox.option('disabled', false);
}
selectionModeSelectBox.option('disabled', e.value === 'selectAll');
}
});
var selectionModeSelectBox = $("#selectionMode").dxSelectBox({
items: ["multiple", "single"],
value: "multiple",
onValueChanged: function(e) {
treeView.option("selectionMode", e.value);
if(e.value === 'single') {
recursiveCheckBox.option('value', false);
treeView.unselectAll();
}
recursiveCheckBox.option('disabled', e.value === 'single');
}
}).dxSelectBox('instance');
var recursiveCheckBox = $("#selectNodesRecursive").dxCheckBox({
text: "Select Nodes Recursive",
value: true,
onValueChanged: function(e) {
treeView.option("selectNodesRecursive", e.value);
}
}).dxCheckBox('instance');
$("#selectByClick").dxCheckBox({
text: "Select By Click",
value: false,
onValueChanged: function(e) {
treeView.option("selectByClick", e.value);
}
});
});
<!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.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>
<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="option">
<span>Show Check Boxes Mode:</span>
<div id="showCheckBoxesMode"></div>
</div>
<div class="option">
<span>Selection Mode:</span>
<div id="selectionMode"></div>
</div>
<div class="option recursive-option">
<div id="selectNodesRecursive"></div>
</div>
<div class="option">
<div id="selectByClick"></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;
}
.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%;
display: inline-block;
margin-top: 10px;
margin-right: 5px;
box-sizing: border-box;
}
.recursive-option {
padding-left: 10px;
}
.option:last-of-type {
margin-right: 0px;
}
var 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"
}]
}]
}];