Disable checkbox of the tree node in EJ2 JavaScript TreeView control

28 Jan 20256 minutes to read

You can disable only the checkbox in the TreeView control without disabling the entire node. To achieve this, add the e-checkbox-disabled class to the checkbox element using the drawNode event. Please refer to the following example to disable the checkbox of the tree nodes.

/**
* Disable checkbox
*/

// Hierarchical data source for TreeView control
var countries = [
  { id: 1, name: 'India', hasChild: true, expanded: true },
  { id: 2, pid: 1, name: 'Assam' },
  { id: 3, pid: 1, name: 'Bihar' },
  { id: 4, pid: 1, name: 'Tamil Nadu' },
  { id: 6, pid: 1, name: 'Punjab' },
  { id: 7, name: 'Brazil', hasChild: true },
  { id: 8, pid: 7, name: 'Paraná' },
  { id: 9, pid: 7, name: 'Ceará' },
  { id: 10, pid: 7, name: 'Acre' },
  { id: 11, name: 'France', hasChild: true },
  { id: 12, pid: 11, name: 'Pays de la Loire' },
  { id: 13, pid: 11, name: 'Aquitaine' },
  { id: 14, pid: 11, name: 'Brittany' },
  { id: 15, pid: 11, name: 'Lorraine' },
  { id: 16, name: 'Australia', hasChild: true },
  { id: 17, pid: 16, name: 'New South Wales' },
  { id: 18, pid: 16, name: 'Victoria' },
  { id: 19, pid: 16, name: 'South Australia' },
  { id: 20, pid: 16, name: 'Western Australia' },
  { id: 21, name: 'China', hasChild: true },
  { id: 22, pid: 21, name: 'Guangzhou' },
  { id: 23, pid: 21, name: 'Shanghai' },
  { id: 24, pid: 21, name: 'Beijing' },
  { id: 25, pid: 21, name: 'Shantou' }

];

// Renders TreeView
var tree1 = new ej.navigations.TreeView({
  fields: { dataSource: countries, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild' },
  showCheckBox: true,
  drawNode: drawNode
});
tree1.appendTo('#tree');

// Disables the checkbox alone in TreeView
function drawNode(args) {
  var ele = args.node.querySelector('.e-checkbox-wrapper');
  ele.classList.add('e-checkbox-disabled');
}
<!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-buttons/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://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>
  <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%;
}