Disable checkbox of the tree node in Angular TreeView component

27 Aug 20255 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.

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

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