Check box selection in Angular TreeGrid component

19 Nov 202510 minutes to read

Checkbox Selection provides an option to select multiple TreeGrid records with help of checkbox in each row.

To render a checkbox in each TreeGrid row, add a column with type set to CheckBox using the column type property.

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 { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, OnInit,ViewChild } from '@angular/core';
import { sampleData } from './datasource';

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' [treeColumnIndex]='2' childMapping='subtasks'
    height='315px' >
        <e-columns>
                <e-column type='checkbox' width='50'></e-column>
                <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></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));

By default, selection is allowed via clicking either a row or its checkbox. To restrict selection to only the checkbox, set the selectionSettings.checkboxOnly property to true.
To persist selection across operations, set selectionSettings.persistSelection to true. For persisted selection, at least one column must be defined as a primary key using the columns.isPrimaryKey property.

Checkbox selection mode

Checkbox selection supports two modes, which can be set using selectionSettings.checkboxMode:

  • Default (default): Multiple rows can be selected by clicking their checkboxes or rows sequentially.

  • ResetOnRowClick: Clicking a row resets previous selections. To select multiple rows, press and hold the CTRL key while clicking desired rows. To select a range, press and hold the SHIFT key and click the rows.

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 { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, OnInit,ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' [treeColumnIndex]='2' childMapping='subtasks'
    height='315px' [selectionSettings]='selectionOptions' >
        <e-columns>
                <e-column type='checkbox' width='50'></e-column>
                <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></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 selectionOptions?: SelectionSettingsModel;

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

Checkbox Selection is intended for row selection only and is not compatible with cell selection mode.

Conditional row selection using isRowSelectable

The TreeGrid supports conditional row selection through the isRowSelectable property. This feature enables dynamic business logic to determine which rows can be selected, ensuring that only rows meeting specific conditions are selectable. The isRowSelectable property accepts a function that evaluates each row’s data and returns true to enable selection or false to disable it. The function is executed for the entire data source before rendering, making it suitable for scenarios where selection must be restricted based on criteria.

import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule,VirtualScrollService } from '@syncfusion/ej2-angular-treegrid'

import { Component, OnInit, ViewChild } from '@angular/core';
import { taskData } from './datasource';
import { TreeGridComponent, SelectionSettingsModel } from '@syncfusion/ej2-angular-treegrid'
@Component({
    imports: [
        TreeGridModule,
    ],
    providers: [VirtualScrollService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #Treegrid [dataSource]='data' [treeColumnIndex]='1' [enableVirtualization]=true height='600'  idMapping='TaskID' parentIdMapping='ParentID' 
                [selectionSettings]='selectionSettings' [isRowSelectable]='isRowSelectable>
                    <e-columns>
                        <e-column type="checkbox" width=90></e-column>
                        <e-column field='Task'  headerText='Task'  width=300></e-column>
                        <e-column field='TaskID' isPrimaryKey="true" visible="false"></e-column>
                        <e-column field='AssignedTo'  headerText='Assigned To'  width=140></e-column>
                        <e-column field='StartDate' headerText='Start' format='yMd' width=180></e-column>
                        <e-column field='DueDate' headerText='Due' format='yMd' width=180></e-column>
                        <e-column field='Priority' headerText='Priority' width=90></e-column>
                        <e-column field='Progress' headerText='Progress' width=110></e-column>
                    </e-columns>
               </ejs-treegrid>`
})
export class AppComponent implements OnInit {
    public data: Object[] = [];
    public selectionSettings?: SelectionSettingsModel;
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;
    ngOnInit(): void {
        this.data = taskData;
        this.selectionSettings = { persistSelection: true };
    }
    isRowSelectable(data: any,columns:any): boolean {
        return data.Progress !== 'Completed';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));