Headers in Angular Treegrid component

9 Jan 202311 minutes to read

Header text

By default, column header title is displayed from column field value. To override the default header title, you have to define the headerText value.

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

@Component({
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' height='315' [treeColumnIndex]='1'  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';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule,
        ButtonModule
    ],
    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);

  • If both the field and headerText are not defined in the column, the column renders with “empty” header text.

Header template

You can customize the header element by using the headerTemplate property.

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

@Component({
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' childMapping='subtasks' height='315' >
        <e-columns>
            <e-column field='taskName' width='170'><ng-template #headerTemplate>      <div>
        <div>
            <img src="__Task name.png" width="20" height="20" class="e-image" />  Task Name
        </div>
    </div></ng-template> </e-column>
            <e-column field='startDate'  width='130' format="yMd" textAlign='Right'></e-column>
            <e-column field='duration' headerText='Duration' width='80' textAlign='Right'> <ng-template #headerTemplate>    <div>
        <div>
            <img src="__Duration.png" width="20" height="20" class="e-image" />  Duration
        </div>
    </div></ng-template></e-column>
    <e-column field='progress' width='90' textAlign='Right'></e-column>
        </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data: Object[];

    ngOnInit(): void {
        this.data = headerData;
    }
}
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';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule,
        ButtonModule
    ],
    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);

Header template for stacked header column

By using the headerTemplate template reference for the ng template, you can customize a stacked header element in the Tree Grid column.

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

@Component({
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' height='260'  [treeColumnIndex]='1' >
            <e-columns>
                <e-column headerText='Order Details'  [columns]='orderColumns'><ng-template #headerTemplate let-data > <div><a href="#">OrderColumns</a></div></ng-template> </e-column>
                <e-column headerText='Shipment Details' [columns]='shipColumns'></e-column>
                <e-column headerText='Price Details' [columns]='priceColumns'></e-column>
            </e-columns>
        </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data: Object[];
    public orderColumns: Object[];
    public shipColumns: Object[];
    public priceColumns: Object[];

    ngOnInit(): void {
        this.data = stackedData;
        this.orderColumns = [
            { field: 'orderID', headerText: 'Order ID', textAlign: 'Right', width: 90 },
            { field: 'orderName', headerText: 'Order Name', textAlign: 'Left', width: 180 },
            { field: 'orderDate', headerText: 'Order Date', textAlign: 'Right', width: 120, format: 'yMd'}
        ];
        this.shipColumns = [
            { field: 'shipMentCategory', headerText: 'Shipment Category', textAlign: 'Left', width: 150 },
            { field: 'shippedDate', headerText: 'Shipped Date', textAlign: 'Right', width: 120, format: 'yMd' },
            { field: 'units', headerText: 'Units', textAlign: 'Right', width: 90 }
        ];
        this.priceColumns = [
            { field: 'unitPrice', headerText: 'Price per unit', format: 'c2', type: 'number', width: 120, textAlign: 'Right' },
            { field: 'price', headerText: 'Total Price', width: 110, format: 'c2', type: 'number', textAlign: 'Right' }
        ];
    }
}
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';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule,
        ButtonModule
    ],
    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);

You can get the header table element by using the getHeaderTable method in tree grid.
You can get the column header element by field by using the getColumnHeaderByField method in tree grid. In this method you need to pass the field name as parameter.
You can get the column header element by index by using the getColumnHeaderByIndex method in tree grid. In this method you need to pass the index as parameter.
You can get the column header element by uid by using the getColumnHeaderByUid method in tree grid. In this method you need to pass the column header uid as parameter.