Row cell customization in Angular Treegrid component

27 Sep 20235 minutes to read

In Tree Grid we can customize the row and cell using queryCellInfo and rowDataBound events of Tree Grid.

In the below demo, we customize and show the command buttons only for the parent rows using queryCellInfo and rowDataBound events of Tree Grid.

app.component.ts

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

@Component({
    selector: 'app-container',
    providers: [ CommandColumnService ],
    template: `<ejs-treegrid #treegridObj [dataSource]='data' childMapping='subtasks'  [treeColumnIndex]='1'(rowDataBound)='rowDataBound($event)' (queryCellInfo)='queryCellInfo($event)' [height]='280' >
        <e-columns>
            <e-column field='taskID' headerText='Task ID' width='80' textAlign='Right'></e-column>
            <e-column field='taskName' headerText='Task Name' width='200' ></e-column>
            <e-column field='startDate' headerText='Start Date' textAlign='Right' [format]='formatOptions' width='140'></e-column>
            <e-column field='endDate' headerText='Start Date' textAlign='Right' [format]='formatOptions'width='140'></e-column>
            <e-column field='duration' headerText='Duration' width='90' textAlign='Right'></e-column>
            <e-column field='progress' headerText='Progress' width='90' textAlign='Right'></e-column>
            <e-column  headerText='Custom Button'  [commands]='commands' width='160' textAlign='Right'></e-column>
        </e-columns>
    </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data: Object[] = [];
    public formatOptions?: Object;
    public commands?: Object[];  

    ngOnInit(): void {
        this.data = sampleData;
        this.formatOptions = { format: 'y/M/d', type: 'date' };
        this.commands = [{ buttonOption: { content: 'Details', cssClass: 'e-flat', click: onclick  } }];
    }
    queryCellInfo(args: QueryCellInfoEventArgs) {
        if (!(args.data as ITreeData).hasChildRecords){
            if ((args.cell as HTMLElement).classList.contains("e-unboundcell")) {
                ((args.cell as HTMLElement).querySelector('.e-unboundcelldiv') as HTMLElement).style.display = "none";
            }
        }
    }
    rowDataBound(args: RowDataBoundEventArgs) {
        if (!(args.data as ITreeData).hasChildRecords) {
            (args.row as HTMLElement).style.backgroundColor = 'green';
        }
    }

}

app.module.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 { 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 { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

You can refer to our Angular Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our Angular Tree Grid example to knows how to present and manipulate data.