Row in Angular Treegrid component

9 Jan 202313 minutes to read

The row represents record details fetched from data source.

Customize rows

You can customize the appearance of a row by using the rowDataBound event.
The rowDataBound event triggers for every row. In the event handler, you can get the RowDataBoundEventArgs that contains details of the row.

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

@Component({
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' height='315' [enableHover]='false' (rowDataBound)='rowBound($event)' childMapping='subtasks' >
        <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></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;
    }
 rowBound(args: RowDataBoundEventArgs) {
    if (args.data['duration'] == 0 ) {
        args.row.style.background= '#336c12';
    } else if (args.data['duration'] < 3) {
        args.row.style.background= '#7b2b1d';
    }
}
}
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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                SortService,
                FilterService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Styling alternate rows

You can change the treegrid’s alternative rows’ background color by overriding the .e-altrow class.

.e-treegrid .e-altrow {
    background-color: #fafafa;
}

The above style customization works only when we elevate the CSS to global scope using the encapsulation: ViewEncapsulation.None
If you need to apply style for ViewEncapsulation other than None, use ng-deep like shown in the below example code snippet,

::ng-deep .e-treegrid .e-altrow  {
    background-color: #fafafa;
}

Please refer to the following example.

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

@Component({
    selector: 'app-container',
    encapsulation: ViewEncapsulation.None,
    template: `<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' height='315' [enableHover]='false' childMapping='subtasks' >
        <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></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 { 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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                SortService,
                FilterService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Perform Expand/Collapse on parent row programmatically

To expand and collapse all the records of the tree grid by using the expandAll and collapseAll methods respectively in the tree grid.

You can expand/collapse a specific row by using the following methods.

  1. collapseRow - By passing the row element in this method of tree grid.
  2. expandRow - By passing the row element in this method of tree grid.
  3. collapseAtLevel - By passing the record levels in this method.
  4. expandAtLevel - By passing the record levels in this method.
  5. collapseByKey - By passing the primary key of parent record into the method.
  6. expandByKey - By passing the primary key of parent record into the method.

To get row element you can use getRows method by passing the row index as parameter as used in the sample below.

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

@Component({
    selector: 'app-container',
    template: `<button ej-button id='collapseAll' (click)='collapseAll()'>Collapse All</button>
  <button ej-button id='expandAll' (click)='expandAll()'>Expand All</button>
  <button ej-button id='collapseAtLevel' (click)='collapseAtLevel()'>Collapse At Level</button>
  <button ej-button id='expandAtLevel' (click)='expandAtLevel()'>Expand At Level</button>
  <button ej-button id='collapseRow' (click)='collapseRow()'>Collapse Row</button>
  <button ej-button id='expandRow' (click)='expandRow()'>Expand Row</button>
  <button ej-button id='collapseByKey' (click)='collapseByKey()'>Collapse By Key</button>
  <button ej-button id='expandByKey' (click)='expandByKey()'>Expand By Key</button>
  <ejs-treegrid #treegrid id="TreeGrid" [dataSource]='data' [treeColumnIndex]='1'
      height='270' childMapping='subtasks'>
      <e-columns>
          <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
          <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
          <e-column field='priority' headerText='Priority' textAlign='Right' width=90></e-column>
          <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' type='date' 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')
    public treegrid: TreeGridComponent;
    ngOnInit(): void {
        this.data = sampleData;
    }
    expandAll() {
        this.treegrid.expandAll();
    }
    collapseAll() {
        this.treegrid.collapseAll();
    }
    collapseAtLevel() {
        this.treegrid.collapseAtLevel(1);
        // Here 1 is the level of record to be collapsed.
    }
    expandAtLevel() {
        this.treegrid.expandAtLevel(1);
        // Here 1 is the level of record to be expanded.
    }
    collapseRow() {
        var rowToBeCollapse = this.treegrid.getRows()[0]; // 1st row details are fetch here.
        this.treegrid.collapseRow(rowToBeCollapse);
    }
    expandRow() {
        var rowToBeExpand = this.treegrid.getRows()[0];
        this.treegrid.expandRow(rowToBeExpand);
    }
    collapseByKey() {
        this.treegrid.collapseByKey((this.treegrid.getCurrentViewRecords()[0] as any).taskID);
        // taskID is the PrimaryKey, 1 is the value which the record needs to be collapsed.
        // Here the first record will be collapsed.
    }
    expandByKey() {
        this.treegrid.expandByKey((this.treegrid.getCurrentViewRecords()[0] as any).taskID);
        // taskID is the PrimaryKey, 1 is the value which the record needs to be expanded.
        // Here the first record will be expanded.
    }
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, SortService, FilterService,EditService,ToolbarService } from '@syncfusion/ej2-angular-treegrid';
import { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                SortService,
                FilterService,
                EditService,
                ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

You can get the row elements by getDataRows method in the tree grid.
Refer to our Angular Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our Angular Tree Grid example to know how to present and manipulate data.