Disable checkbox of the tree node in EJ2 TypeScript 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.

import { enableRipple } from '@syncfusion/ej2-base';
import { TreeView, DrawNodeEventArgs } from '@syncfusion/ej2-navigations';
enableRipple(true);

/**
 * TreeView Disable check box of parent nodes sample
 */

// List data source for TreeView control
let countries: { [key: string]: Object }[] = [
  { 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
let tree1: TreeView = new 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: DrawNodeEventArgs) {
  let ele: HTMLElement = 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://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%;
}