How to check or uncheck checkbox by clicking tree node text in Angular Tree View

31 Aug 20266 minutes to read

You can enable checkbox toggling functionality by clicking on the tree node text instead of just the checkbox itself. This behavior is implemented using the nodeClicked event of TreeView, which provides access to the clicked node and allows programmatic manipulation of its checkbox state.

This approach is particularly useful when you want to provide a larger click target for users or create a more intuitive interaction pattern where any part of the node can toggle its selection state.

Prerequisites

  • The showCheckBox property must be enabled so each node renders a checkbox.
  • Initialize the TreeView with an @ViewChild reference so the event handler can call the checkAll/uncheckAll TreeView methods.

Implementation

The nodeClicked event provides a NodeClickEventArgs object containing the clicked node information. Use this event to programmatically check or uncheck nodes based on their current state. Inside the handler, args.node is the clicked DOM element and you can toggle the matching data record’s isChecked flag before invoking tree.checkAll([id]) or tree.uncheckAll([id]).

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
import { NodeKeyPressEventArgs, NodeClickEventArgs } from '@syncfusion/ej2-navigations';
import { Component, ViewChild } from '@angular/core';
import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
/**
 * TreeView Checkboxes sample
 */
@Component({
  imports: [
    FormsModule, TreeViewModule
  ],
  standalone: true,
  selector: 'app-container',
  template: `<div id='treeparent'><ejs-treeview id='treeElement' #treevalidate [fields]='field' [showCheckBox]='showCheckBox' (nodeClicked)='nodeCheck($event)' (keyPress)='nodeCheck($event)'></ejs-treeview></div>`
})

export class AppComponent {
  // Data source for TreeView component
  public countries: Object[] = [
    { id: 1, name: 'Australia', hasChild: true, expanded: true },
    { id: 2, pid: 1, name: 'New South Wales' },
    { id: 3, pid: 1, name: 'Victoria' },
    { id: 4, pid: 1, name: 'South Australia' },
    { id: 6, pid: 1, name: 'Western Australia' },
    { 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: 'China', hasChild: true },
    { id: 12, pid: 11, name: 'Guangzhou' },
    { id: 13, pid: 11, name: 'Shanghai' },
    { id: 14, pid: 11, name: 'Beijing' },
    { id: 15, pid: 11, name: 'Shantou' },
    { id: 16, name: 'France', hasChild: true },
    { id: 17, pid: 16, name: 'Pays de la Loire' },
    { id: 18, pid: 16, name: 'Aquitaine' },
    { id: 19, pid: 16, name: 'Brittany' },
    { id: 20, pid: 16, name: 'Lorraine' },
    { id: 21, name: 'India', hasChild: true },
    { id: 22, pid: 21, name: 'Assam' },
    { id: 23, pid: 21, name: 'Bihar' },
    { id: 24, pid: 21, name: 'Tamil Nadu' },
    { id: 25, pid: 21, name: 'Punjab' }
  ];
  public field: Object = { dataSource: this.countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
  // Enable the checkbox for TreeView
  public showCheckBox: boolean = true;

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

  public nodeCheck(args: NodeKeyPressEventArgs | NodeClickEventArgs | any): void {
    let checkedNode: any = [args.node];
    if ((args.event.target as EventTarget | any).classList.contains('e-fullrow') || args.event.key == "Enter") {
      let getNodeDetails: any = (this.treevalidate as TreeViewComponent).getNode(args.node);
      if (getNodeDetails.isChecked == 'true') {
        (this.treevalidate as TreeViewComponent).uncheckAll(checkedNode);
      } else {
        (this.treevalidate as TreeViewComponent).checkAll(checkedNode);
      }
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));