TreeView allows both single and multiple selections. If your application needs to select one child at a time under one specific parent, refer to the following example. Here, you can achieve this in the nodeSelecting event of TreeView. However, you can reset the selected child and make another selection by pressing Ctrl + selected nodes.
/**
* Single child selection
*/
// Hierarchical data source for TreeView component
var localData = [
{ id: 1, name: 'Parent 1', hasChild: true, expanded: true },
{ id: 2, pid: 1, name: 'Child 1' },
{ id: 3, pid: 1, name: 'Child 2' },
{ id: 4, pid: 1, name: 'Child 3' },
{ id: 7, name: 'Parent 2', hasChild: true, expanded: true },
{ id: 8, pid: 7, name: 'Child 1' },
{ id: 9, pid: 7, name: 'Child 2' },
{ id: 10, pid: 7, name: 'Child 3' },
];
var tree1 = new ej.navigations.TreeView({
fields: { dataSource: localData, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild' },
loadOnDemand: false,
allowMultiSelection: true,
nodeSelecting: onNodeSelecting
});
tree1.appendTo('#tree');
var parent, child;
var count= false;
var childCount = false;
function onNodeSelecting(args) {
var id = args.nodeData.parentID;
if (!count) {
parent = id;
count = true;
}
if (!childCount){
child = args.nodeData.id;
childCount = true
}
if (id != null && id === parent) {
var element = tree1.element.querySelector('[data-uid="' + id + '"]');
var liElements= element.querySelectorAll('ul li');
for (var i = 0; i < liElements.length; i++) {
var nodeData = tree1.getNode(liElements[i]);
if (nodeData.selected && args.action === "select" && child !== args.nodeData.id) {
args.cancel = true;
}
// For unselect the selectedNodes
else if (args.action === "un-select" && child === args.nodeData.id) {
childCount = false;
child = null;
parent = null;
count = false;
}
}
} else if (id !== parent && id !== null) {
if(args.action == "select"){
args.cancel = true
}
} else if (id === null){
childCount = false;
child = null;
parent = null;
count = false
}
}<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 for TreeView </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 for TreeView UI Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="treeparent">
<div id="tree"></div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}
#treeparent {
display: block;
max-width: 350px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}