var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.treeView = undefined;
$scope.employees = employees;
$scope.selectedEmployees = [];
$scope.showCheckBoxesModes = ["normal", "selectAll", "none"];
$scope.showCheckBoxesMode = $scope.showCheckBoxesModes[0]
$scope.selectionModes = ["multiple", "single"];
$scope.selectionMode = $scope.selectionModes[0];
$scope.isRecursiveDisabled= false;
$scope.isSelectionModeDisabled = false;
$scope.selectNodesRecursive = true;
$scope.selectByClick = false;
function syncSelection(treeView){
var selectedEmployees = treeView.getSelectedNodes()
.map(function(node) { return node.itemData; });
$scope.selectedEmployees = selectedEmployees;
}
$scope.treeViewOptions = {
items: employees,
width: 340,
height: 320,
onContentReady: function(e) {
syncSelection(e.component);
},
onSelectionChanged: function(e) {
syncSelection(e.component);
},
onInitialized: function(e){
$scope.treeView = e.component;
},
bindingOptions: {
selectionMode: "selectionMode",
showCheckBoxesMode: "showCheckBoxesMode",
selectNodesRecursive: "selectNodesRecursive",
selectByClick: "selectByClick"
},
};
$scope.selectedEmployeesOptions = {
width: 400,
height: 200,
showScrollbar: "always",
bindingOptions: {
items: "selectedEmployees"
}
};
$scope.showCheckBoxesModesOptions = {
onValueChanged: function(e){
if(e.value === 'selectAll') {
$scope.selectionMode = "multiple";
$scope.isRecursiveDisabled = false;
}
$scope.isSelectionModeDisabled = e.value === 'selectAll';
},
bindingOptions: {
items: "showCheckBoxesModes",
value: "showCheckBoxesMode"
}
};
$scope.selectionModesOptions = {
onValueChanged: function(e){
if(e.value === 'single') {
$scope.selectNodesRecursive = false;
$scope.treeView.unselectAll();
}
$scope.isRecursiveDisabled = e.value === 'single';
},
bindingOptions: {
items: "selectionModes",
value: "selectionMode",
disabled: "isSelectionModeDisabled"
}
};
$scope.selectNodesRecursiveOptions = {
text: "Select Nodes Recursive",
bindingOptions: {
value: "selectNodesRecursive",
disabled: "isRecursiveDisabled"
}
};
$scope.selectByClickOptions = {
text: "Select By Click",
bindingOptions: {
value: "selectByClick"
}
};
});
<!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.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/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" ng-app="DemoApp" ng-controller="DemoController">
<div class="form">
<h4>Employees</h4>
<div dx-tree-view="treeViewOptions" dx-item-alias="item">
<div data-options="dxTemplate: {name: 'item'}">
<div>
{{ item.fullName + ' (' + item.position + ')' }}
</div>
</div>
</div>
<div class="selected-container">
Selected employees
<div id="selected-employees" dx-list="selectedEmployeesOptions" dx-item-alias="item">
<div data-options="dxTemplate: {name: 'item'}">
<div>
{{ item.prefix + " " + item.fullName + " (" + item.position + ")" }}
</div>
</div>
</div>
</div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Show Check Boxes Mode:</span>
<div dx-select-box="showCheckBoxesModesOptions"></div>
</div>
<div class="option">
<span>Selection Mode:</span>
<div dx-select-box="selectionModesOptions"></div>
</div>
<div class="option recursive-option">
<div dx-check-box="selectNodesRecursiveOptions"></div>
</div>
<div class="option">
<div dx-check-box="selectByClickOptions"></div>
</div>
</div>
</div>
</body>
</html>
.form > h4 {
margin-bottom: 20px;
}
.form > div, #selection-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;
}
.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"
}]
}]
}];