Select one child in EJ2 TypeScript TreeView control

28 Jan 20257 minutes to read

The TreeView control allows both single and multiple selections. If your application requires selecting one child at a time under a specific parent, refer to the following example. You can achieve this by using the nodeSelecting event in the TreeView control. However, you can reset the selected child and make another selection by pressing Ctrl + selected nodes.

import { TreeView, NodeSelectEventArgs } from '@syncfusion/ej2-navigations';

/**
 * Single child selection at a time
 */

// List data source for TreeView control
let localData: { [key: string]: Object }[] = [
  { 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' },
];

let tree1: TreeView = new TreeView({
  fields: { dataSource: localData, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild' },
  loadOnDemand: false,
  allowMultiSelection: true,
  nodeSelecting: onNodeSelecting
});
tree1.appendTo('#tree');

let parent, child;
let count: boolean = false;
let childCount: boolean = false;

function onNodeSelecting(args: NodeSelectEventArgs) {
  let id = args.nodeData.parentID;
  if (!count) {
    parent = id;
    count = true;
  }
  if (!childCount) {
    child = args.nodeData.id;
    childCount = true
  }
  if (id != null && id === parent) {
    let element: HTMLElement = tree1.element.querySelector('[data-uid="' + id + '"]');
    let liElements = element.querySelectorAll('ul li');
    for (let i: number = 0; i < liElements.length; i++) {
      let 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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='treeparent'>
            <div id="tree"></div>
        </div>
    </div>
    <style>
        #treeparent {
            display: block;
            max-width: 350px;
            max-height: 350px;
            margin: auto;
            overflow: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
    </style>
</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%;
}