Checkbox Column in Angular TreeGrid component

19 Sep 202424 minutes to read

The Syncfusion Angular TreeGrid component supports checkbox selection in tree column with hierarchical selection of checkboxes using the autoCheckHierarchy property of tree grid and showcheckbox property of column.

When the autoCheckHierarchy property is enabled, checking a parent record’s checkbox automatically checks the checkboxes of its child records. Checkboxes can be rendered only in the tree column by setting the column.showCheckbox property to true.

The following demo demonstrates the hierarchical selection of checkboxes in the tree grid by enabling the autoCheckHierarchy and column.showCheckbox properties.

import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';

@Component({
    imports: [TreeGridModule,],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks' autoCheckHierarchy='true' >
                 <e-columns>
                   <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                   <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180 [showCheckbox]='true'></e-column>
                   <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
                   <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                  </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];

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

  • The column.showCheckbox property of the column will be utilized only when the column serves as a tree column cell (i.e., the treeColumnIndex column).

Programmatically select checkboxes

In the Tree Grid, you can programmatically select checkboxes using the selectCheckboxes method. This method allows you to check checkboxes by passing the desired row indexes.

When you pass the parent record index in the selectCheckboxes method, all child record checkboxes for the corresponding parent record will be selected. So, there is no need to pass the child record index along with the parent record index.

The following demo demonstrates selecting checkboxes in the tree grid using the selectCheckboxes method with the parameters as indexes.

import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule, ButtonModule],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<button ejs-button id="btnId" cssClass="e-info" (click)='selectcheckboxes()'> Select Checkboxes </button>
            
             <ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks' autoCheckHierarchy='true' >
                <e-columns>
                  <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                  <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180 [showCheckbox]='true'></e-column>
                  <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
                  <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                </e-columns>
              </ejs-treegrid>`,
})
export class AppComponent implements OnInit {
    public data?: Object[];
    @ViewChild('treegrid') treegrid?: TreeGridComponent;

    ngOnInit(): void {
        this.data = sampleData;
    }

    selectcheckboxes(): void {
        var selectCheckBoxIndexes: number[] = [2, 3, 4, 5]; //Here pass the some parent / child row indexes
        (this.treegrid as TreeGridComponent).selectCheckboxes(
            selectCheckBoxIndexes
        );
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Get checked record’s details.

In the Tree Grid, you can retrieve details of checked records when using the checkbox column feature through the following methods:

  • getCheckedRecords: Utilize this method to obtain details of the checked records when checkboxes are selected.

  • getCheckedRowIndexes: Use this method to retrieve details of the row indexes for checked records when checkboxes are selected.

import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit } from '@angular/core';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { sampleData } from './datasource';

@Component({
    imports: [TreeGridModule, ButtonModule],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<div>
               <label style="padding: 30px 17px 0 0" >Get the checked record details :</label>
              <button ejs-button id="buttons" (click)="GetCheckedRecord()">Checked Records</button>
              <button ejs-button id="buttons" (click)="GetCheckedIndex()">Checked Index</button>
               </div>
               <div style="margin-left:180px"><p style="color:red;" id="message" [innerHTML]="message"></p></div>
          
                <ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks' autoCheckHierarchy='true' >
                 <e-columns>
                   <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                   <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180 [showCheckbox]='true'></e-column>
                   <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
                   <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                  </e-columns>
                </ejs-treegrid>`,
})
export class AppComponent implements OnInit {
    public data?: Object[];
    public message?: any;
    public header?: string;
    public checked_record?: any;
    @ViewChild('treegrid')
    public treegrid: TreeGridComponent | undefined;

    @ViewChild('Dialog')
    public dialog?: DialogComponent;

    ngOnInit(): void {
        this.data = sampleData;
        this.header = 'Checked record Details';
    }
    GetCheckedRecord(): void {
        this.checked_record = (
            this.treegrid as TreeGridComponent
        ).getCheckedRecords();

        if (this.checked_record.length != 0) debugger;

        var content = '';
        for (var i = 0; i < this.checked_record.length; i++) {
            content +=
                'TaskID: ' +
                this.checked_record[i].taskID +
                ', Task Name: ' +
                this.checked_record[i].taskName +
                ', Date: ' +
                this.checked_record[i].startDate +
                ', Duration: ' +
                this.checked_record[i].duration +
                '<br>';
        }
        this.message = content;
    }
    GetCheckedIndex(): void {
        var checked_index = (
            this.treegrid as TreeGridComponent
        ).getCheckedRowIndexes();
        if (checked_index.length != 0)
            this.message = 'Checked records Index:' + checked_index;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render checkbox in checked at initial rendering

In the Tree Grid, you can render checkboxes with a checked state at the initial rendering by using the selectCheckboxes method and the dataBound event of the tree grid. This allows you to check checkboxes based on a condition during the data binding process.

In the following demo, rendering checkboxes with a checked state at the initial rendering in the tree grid by utilizing the dataBound event. The dataBound event triggers initial rendering. In this event, the checkboxes are selected in the tree grid using the selectCheckboxes method with the parameters as indexes.

import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule,],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks' autoCheckHierarchy='true' (dataBound)="databound()" >
                <e-columns>
                  <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                  <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180 [showCheckbox]='true'></e-column>
                  <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
                  <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                </e-columns>
              </ejs-treegrid>`,
})
export class AppComponent implements OnInit {
    public data?: Object[];
    @ViewChild('treegrid') treegrid?: TreeGridComponent;

    ngOnInit(): void {
        this.data = sampleData;
    }

    databound(): void {
        if ((this.treegrid as TreeGridComponent).initialRender) {
            var selectCheckBoxIndexes: number[] = [2, 3, 4, 5]; //Here pass the desired row indexes to select on initial rendering
            (this.treegrid as TreeGridComponent).selectCheckboxes(
                selectCheckBoxIndexes
            );
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Hide checkbox for parent rows

In the Tree Grid, you can customize the visibility of checkboxes for parent / child rows by using the rowDataBound event when utilizing the checkbox column feature. This allows you to conditionally hide checkboxes for specific rows.

In the rowDataBound event, you can access the row element and customize the visibility of checkboxes based on your conditions.

In the following demo, hiding checkboxes for parent rows in the tree grid by using the rowDataBound event. It hides the checkboxes by setting the style’s display property based on a condition.

import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule,],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks' autoCheckHierarchy='true' (rowDataBound)="rowdatabound($event)" >
               <e-columns>
                 <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                 <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180 [showCheckbox]='true'></e-column>
                 <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
                 <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
               </e-columns>
              </ejs-treegrid>`,
})
export class AppComponent implements OnInit {
    public data?: Object[];
    @ViewChild('treegrid') treegrid?: TreeGridComponent;

    ngOnInit(): void {
        this.data = sampleData;
    }

    rowdatabound(args: any): void {
        if (args.data.hasChildRecords) {
            //Here hide the parent checkboxes
            args.row.querySelector('.e-checkbox-wrapper').style.display = 'none';
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

**Hide checkbox for child rows

In the following demo, hiding checkboxes for child rows in the tree grid by using the rowDataBound event. It hides the checkboxes by setting the style’s display property based on a condition.

import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule,],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks' autoCheckHierarchy='true' (rowDataBound)="rowdatabound($event)" >
               <e-columns>
                 <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                 <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180 [showCheckbox]='true'></e-column>
                 <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
                 <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
               </e-columns>
              </ejs-treegrid>`,
})
export class AppComponent implements OnInit {
    public data?: Object[];
    @ViewChild('treegrid') treegrid?: TreeGridComponent;

    ngOnInit(): void {
        this.data = sampleData;
    }

    rowdatabound(args: any): void {
        if (!args.data.hasChildRecords) {
            //Here hide the parent checkboxes
            args.row.querySelector('.e-checkbox-wrapper').style.display = 'none';
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Change row background color on checkbox change event.

In the Tree Grid, you can customize the background color of the selected row when changing checkbox selection by using the checkboxChange event. This allows you to provide a visual indication of the selected rows based on the checkbox interactions.

In the checkboxChange event, you can access the row element by using the getRowByIndex method and modify its background color based on the checkbox selection.

In the following demo, customize the background color of selected rows by utilizing the checkboxChange event and getRowByIndex method. In this method, obtain the row element and change the background color by adding or removing the CSS class. Added styles based on the CSS class in the stylesheet.

import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule,],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    encapsulation: ViewEncapsulation.None,
    template: `<ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks' 
                autoCheckHierarchy='true' enableCollapseAll="true" (checkboxChange)="checkboxChange($event)">
                <e-columns>
                  <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                  <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180 [showCheckbox]='true'></e-column>
                  <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
                  <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                </e-columns>
              </ejs-treegrid>`,
    styles: [
        `
  .bgcolor td {
    background-color: rgb(207 183 183) !important;
    color: white !important;
}`,
    ],
})
export class AppComponent implements OnInit {
    public data?: Object[];
    @ViewChild('treegrid')
    public treegrid!: TreeGridComponent;

    ngOnInit(): void {
        this.data = sampleData;
    }

    checkboxChange(args: any) {
        if (args.checked) {
            setTimeout(() => {
                const checkedRows = this.treegrid.element.querySelectorAll('.e-check');
                Array.from(checkedRows).map((row) => {
                    row?.closest('tr')?.classList.add('bgcolor');
                });
            }, 0);
        } else {
            setTimeout(() => {
                const coloredRows = this.treegrid.element.querySelectorAll('.bgcolor');

                Array.from(coloredRows).map((row) => {
                    if (row.querySelector('.e-uncheck') || row.querySelector('.e-stop')) {
                        row.classList.remove('bgcolor');
                    }
                });
            }, 0);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));