Select TreeGrid rows based on certain condition in Angular TreeGrid component

27 Aug 20254 minutes to read

Rows can be selected in the TreeGrid based on specific conditions by using the selectRows method within the dataBound event of the TreeGrid.

In the following example, only TreeGrid rows with a Duration column value greater than 4 are selected.

app.component.ts

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 { projectData } from './datasource';
import { TreeGridComponent,SelectionSettingsModel  } from '@syncfusion/ej2-angular-treegrid';
import { RowDataBoundEventArgs } from '@syncfusion/ej2-angular-grids';
import { getValue } from '@syncfusion/ej2-base';

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

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegridObj [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID'
    [treeColumnIndex]='1' [height]='269' allowPaging='true' (rowDataBound)='rowDataBound($event)'
    (dataBound)='dataBound($event)' [selectionSettings]='selectionOptions'>
        <e-columns>
            <e-column field='TaskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
            <e-column field='TaskName' headerText='Task Name' width='100' ></e-column>
            <e-column field='StartDate' headerText='Start Date' textAlign='Right' [format]='formatOptions' editType='datepickeredit'  width='100' ></e-column>
            <e-column field='EndDate' headerText='End Date' textAlign='Right' [format]='formatOptions' editType='datepickeredit'  width='100'></e-column>
            <e-column field='Duration' headerText='Duration' width='90' textAlign='Right'></e-column>
            <e-column field='Priority' headerText='Priority' width='90'></e-column>
        </e-columns>
    </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data: Object[] = [];
    public formatOptions?: Object;
    public selectionOptions?: SelectionSettingsModel;
    public selIndex: number[] = [];
    @ViewChild('treegridObj')
    public treegridObj?: TreeGridComponent;

    ngOnInit(): void {
        this.data = projectData;
        this.formatOptions = { format: 'y/M/d', type: 'date' };
        this.selectionOptions = { type: 'Multiple' };
    }
    rowDataBound(args: RowDataBoundEventArgs) {
    if (getValue('Duration', args.data as object) > 4) {
      this.selIndex.push(parseInt((args.row as HTMLTableRowElement)
        .getAttribute('aria-rowindex') as string, 0));
    }
    }
    dataBound(args: any) {
      if (this.treegridObj && this.selIndex.length) {
        this.treegridObj.selectRows(this.selIndex);
        this.selIndex = [];
        }
    }


}

main.ts

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

For comprehensive feature tours, visit the Angular TreeGrid feature tour page. Additional practical examples are available in the Angular TreeGrid example.