How to disable checkbox of tree node in Angular Tree View

31 Aug 20265 minutes to read

You can disable the checkbox alone in the TreeView instead of disabling the whole node.

To implement this functionality, apply the e-checkbox-disabled CSS class to specific checkbox elements using the drawNode event. The drawNode event triggers during node rendering and provides access to the node element and its associated data, allowing conditional checkbox disabling based on your business logic.

The event argument exposes args.node (the rendered <li> element) and args.nodeData (the matching data record). Inside the handler, locate the embedded checkbox wrapper with args.node.querySelector('.e-checkbox-wrapper') and add the disabled class only when the node data satisfies your rules.

Please refer to the following sample to see how to disable the check box of tree nodes.

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { Component, Inject, ViewChild } from '@angular/core';
import { TreeViewComponent, TreeViewModule, DrawNodeEventArgs } from '@syncfusion/ej2-angular-navigations';
/**
 * Treeview Disable check box of parent nodes sample
 */
@Component({
    imports: [
        FormsModule, TreeViewModule
    ],
    standalone: true,
    selector: 'app-container',
    template: `<div id='treeparent'><ejs-treeview id='treeElement' #treevalidate [fields]='field'  (drawNode)='drawNode($event)' [showCheckBox]=true></ejs-treeview></div>`
})

export class AppComponent {
    // Data source for TreeView component
    public Countries: 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' }
    ]

    public field: Object = { dataSource: this.Countries, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild' };

    @ViewChild('treevalidate') tree?: TreeViewComponent;

    // Disables the checkbox alone in treeview
    public drawNode(args: DrawNodeEventArgs): void {
        let ele: HTMLElement = args.node.querySelector('.e-checkbox-wrapper') as HTMLElement;
        ele.classList.add('e-checkbox-disabled');
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));