Check box in Angular TreeView component
27 Aug 202513 minutes to read
The TreeView component allows you to check multiple nodes without affecting the UI’s appearance by enabling the showCheckBox property. When this property is enabled, a checkbox appears before each TreeView node text, providing users with an intuitive selection mechanism.
The checkbox functionality follows a hierarchical relationship pattern:
-
When one or more child nodes remain unchecked, the parent node displays an intermediate state (typically shown as a partially filled or indeterminate checkbox)
-
When all child nodes are checked, the parent node automatically transitions to a fully checked state
-
When a parent node is checked, all its child nodes automatically become checked as well
By default, the checkbox state of parent and child nodes maintain dependency on each other. To make the checked state of parent and child nodes independent, disable the autoCheck property. When autoCheck is set to false, checking or unchecking parent nodes will not affect their children, and vice versa.
The checkedNodes property allows you to programmatically set nodes that should be checked during initialization or retrieve the IDs of currently checked nodes in the TreeView component.
For event-driven checkbox control, use the nodeChecking event to prevent node check actions for specific nodes. This event triggers before a TreeView node is checked or unchecked, allowing for custom validation. The nodeChecked event fires after a TreeView node has been successfully checked or unchecked.
In the following example, the showCheckBox property is enabled.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
import { Component, ViewChild } from '@angular/core';
import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
@Component({
imports: [
FormsModule, TreeViewModule
],
standalone: true,
selector: 'app-container',
// specifies the template string for the TreeView component with CheckBox
template: `<div id='treeparent'><ejs-treeview id='treeelement' [fields]='field' [showCheckBox]='showCheckBox'></ejs-treeview></div>`
})
export class AppComponent {
@ViewChild('samples')
public tree?: TreeViewComponent;
constructor() {
}
// defined the array of data
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' }
];
// maps the appropriate column to fields property
public field: Object = { dataSource: this.countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
// set the CheckBox to the TreeView
public showCheckBox: boolean = true;
}@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
#treeparent {
display: block;
max-width: 400px;
max-height: 330px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Initial and dynamic checkbox selection
The checkedNodes property enables you to specify which nodes should be checked during initial rendering or to dynamically manage checked nodes programmatically. This property returns an array containing the IDs of all currently checked nodes.
In the following example, the New South Wales and Western Australia nodes are pre-checked during initial rendering. When additional nodes are checked through user interaction, the system displays an alert showing all currently checked node IDs.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
import { Component, ViewChild } from '@angular/core';
import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
@Component({
imports: [
FormsModule, TreeViewModule
],
standalone: true,
selector: 'app-container',
// specifies the template string for the TreeView component with CheckBox
template: `<div id='treeparent'><ejs-treeview #treeview="" id='treeelement' [fields]='field' [showCheckBox]='showCheckBox' (nodeChecked)='nodeChecked($event)'></ejs-treeview></div>`
})
export class AppComponent {
constructor() {
}
@ViewChild('treeview')
public tree?: TreeViewComponent;
// defined the array of data
public countries: Object[] = [
{ id: 1, name: 'Australia', hasChild: true, expanded: true },
{ id: 2, pid: 1, name: 'New South Wales', isChecked: true },
{ id: 3, pid: 1, name: 'Victoria' },
{ id: 4, pid: 1, name: 'South Australia' },
{ id: 6, pid: 1, name: 'Western Australia', isChecked: true },
{ 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' }
];
// maps the appropriate column to fields property
public field: Object = { dataSource: this.countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
// set the CheckBox to the TreeView
public showCheckBox: boolean = true;
//set the checknodes to the TreeView
public checkedNodes: string[] = ['2', '6'];
public nodeChecked(args: any): void {
alert("The checked node's id is: " + (this.tree as any).checkedNodes);
}
}@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
#treeparent {
display: block;
max-width: 400px;
max-height: 330px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}