Headers in Angular TreeGrid component

25 Aug 202524 minutes to read

Header text

By default, the header text of a column in the TreeGrid displays the column’s field value. However, the default header title can be overridden by providing custom header text using the headerText property.

To enable the headerText property, define it in the e-column element. The following example demonstrates how to enable header text for a TreeGrid column.

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 { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { TreeGridComponent, ReorderService } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule,],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' height='285' [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-column field='progress' headerText='Progress' textAlign='Right' width=120></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));

  • The headerText property is optional. If not defined, the corresponding column’s field value is set as header text for that column.
  • The headerTemplate property can also be used to apply custom HTML content to the header cell.

Header template

The header element can be customized using the headerTemplate property. This property allows rendering custom HTML elements or Angular components to the header element.

In this example, custom elements are rendered for both taskName and duration column headers.

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 { Component, OnInit } from '@angular/core';
import { headerData } from './datasource';

@Component({
    imports: [TreeGridModule,],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' childMapping='subtasks' height='250' >
        <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" style="vertical-align: middle;"/>  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" style="vertical-align: middle;"/>  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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • The headerTemplate property is only applicable to TreeGrid columns that have a header element.
  • Any HTML or Angular component can be used in the header template to add additional functionality to the header element.

Stacked header

The TreeGrid allows grouping multiple levels of column headers by stacking columns. This feature enables organizing columns in a more structured and understandable way. This can be achieved by setting the column->columns property. Within this property, an array of column objects can be defined to group together as sub-headers under a main header. The headerText property of each sub-header column can be defined to set the text for that sub-header.

The appearance of stacked header elements can be customized using the headerTemplate property. This property accepts an ng-template reference, allowing definition of custom HTML elements or Angular components to the header element. The following example demonstrates using stacked headers with a custom headerTemplate in the Syncfusion® TreeGrid.

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 { Component, OnInit } from '@angular/core';
import { stackedData } from './datasource';

@Component({
    imports: [TreeGridModule,],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Align the text of header text

The text in column headers of the TreeGrid component can be horizontally aligned using the headerTextAlign property. By default, the text is aligned to the left, but the alignment can be changed by setting the value of the headerTextAlign property to one of the following options:

  • Left: Aligns the text to the left (default).
  • Center: Aligns the text to the center.
  • Right: Aligns the text to the right.
  • Justify: Header text is justified.

The following example demonstrates using the headerTextAlign property to align the text of a TreeGrid column header:

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 { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit, } from '@angular/core';
import { sampleData } from './datasource';
import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
import { Column, TreeGridComponent, } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule, DropDownListAllModule],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<div style="display: flex">
              <label style="padding: 30px 17px 0 0;">Align the text of header text :</label>
              <ejs-dropdownlist  style="padding: 26px 0 0 0" index="0" width="100" [dataSource]="alignmentData" (change)="changeAlignment($event)">
              </ejs-dropdownlist>
              </div>
            <ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks'>
                <e-columns>
                    <e-column field='taskID' headerText='Task ID' width=90></e-column>
                    <e-column field='taskName' headerText='Task Name' width=180></e-column>
                    <e-column field='startDate' headerText='Start Date' format='yMd' width=90></e-column>
                    <e-column field='approved' headerText='Approved' width='100'> </e-column>
                    <e-column field='duration' headerText='Duration' width=100></e-column>
                </e-columns>
            </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;

    public alignmentData: Object[] = [
        { text: 'Left', value: 'Left' },
        { text: 'Right', value: 'Right' },
        { text: 'Center', value: 'Center' },
        { text: 'Justify', value: 'Justify' }
    ];

    public changeAlignment(args: ChangeEventArgs): void {
        (this.treegrid as TreeGridComponent).grid.columns.forEach((col: any) => {
            (col as Column).headerTextAlign = args.value as any;
        });
        (this.treegrid as TreeGridComponent).refreshHeader();
    }
    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));

  • The headerTextAlign property only changes the alignment of the text in the column header, not the content of the column. To align both the column header and content, use the textAlign property.
  • The headerTextAlign property can also be used with the stacked header feature in the Syncfusion® TreeGrid. The property will align the header text in the sub-headers as well.

Autowrap the header text

The autowrap feature allows the cell content of the TreeGrid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in the Syncfusion® TreeGrid, set the appropriate width for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically.

To enable autowrap, set the allowTextWrap property to true. The auto wrap mode can also be configured by setting the textWrapSettings.wrapMode property.

The TreeGrid provides three options for configuring:

  • Both: This is the default value for wrapMode. With this option, both the TreeGrid header text and content is wrapped.
  • Header: With this option, only the TreeGrid header text is wrapped.
  • Content: With this option, only the TreeGrid content is wrapped.
  • If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the TreeGrid’s width.
  • If a column’s header text contains no white space, the text may not be wrapped.
  • If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, the headerTemplate and template properties of the column can be used to customize the appearance of the header and cell content.

In the following example, the textWrapSettings.wrapMode property is set to Header; only the TreeGrid header text wraps to the next line.

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 { TextWrapSettingsModel } from '@syncfusion/ej2-angular-grids';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent, WrapMode } from '@syncfusion/ej2-angular-treegrid';
import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';

@Component({
    imports: [TreeGridModule, ButtonModule, DropDownListModule],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<div style="display: flex">
               <label style="padding: 30px 17px 0 0" >Autowrap for header column :</label>
               <ejs-dropdownlist style="padding: 26px 0 0 0" index="0" width="100" [dataSource]=" dropdownData" (change)="valueChange($event)">
               </ejs-dropdownlist>
              </div>
    
              <ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks' allowPaging='true' allowTextWrap='true' 
               [textWrapSettings]='wrapSettings'>
                 <e-columns>
                    <e-column field='taskID' headerText='Task ID' [allowSorting]="false" textAlign='Right' width=120></e-column>
                    <e-column field='taskName' headerText='Task Name' textAlign='Left' width=80></e-column>
                    <e-column field='startDate' headerText='Start Date' [allowFiltering]="false" textAlign='Right' format='yMd' width=120></e-column>
                    <e-column field='duration' headerText='Duration' textAlign='Right' width=120></e-column>
                    <e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
                  </e-columns>
                </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data?: Object[];
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;
    public wrapSettings: TextWrapSettingsModel = { wrapMode: 'Header' };
    public dropdownData: Object[] = [
        { text: 'Header', value: 'Header' },
        { text: 'Both', value: 'Both' },
    ];

    valueChange(args: ChangeEventArgs): void {
        (this.treegrid as TreeGridComponent).textWrapSettings.wrapMode = (args.value as WrapMode);
    }
    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));

Change the height of header

Changing the height of the header can be useful when the default height is not sufficient to display the header content cell. For example, if a header contains a lot of text or if an image needs to be added to the header, the height of the header may need to be increased to accommodate the content. This can be achieved by changing the height of the header using CSS or by dynamically adjusting the height in JavaScript.

Using CSS

CSS can be used to override the default height of the .e-treegrid .e-headercell class to change the height of the header. Here is an example code snippet:

.e-treegrid .e-headercell {
  height: 130px;
}

Using methods

To change the height of the header dynamically, the getHeaderContent method can be used to get the header content element of the TreeGrid. Then, the querySelectorAll method can be used to get all the header cell elements with the class e-headercell. Finally, each header cell element can be looped through and its style property set to adjust the height.

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 { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule, ButtonModule],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<div >
                <button ejs-button id="small" cssClass="e-small" (click)="changeHeaderHeight($event)">Change height 20px</button>
                <button ejs-button id="medium" cssClass="e-small" (click)="changeHeaderHeight($event)">Default height 42px</button>
                <button ejs-button  id="big" cssClass="e-small" (click)="changeHeaderHeight($event)">Change height 60px</button>
              </div>

              <ejs-treegrid #treegrid [dataSource]='data' height='250' [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-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
                  </e-columns>
              </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;

    ngOnInit(): void {
        this.data = sampleData;

    }
    changeHeaderHeight(event: MouseEvent): void {
        const heightMap: { [key: string]: string } = {
            small: '20px',
            medium: '42px',
            big: '60px'
        }; const headerCells = (this.treegrid as TreeGridComponent).getHeaderContent().querySelectorAll('.e-headercell');
        headerCells.forEach((headerCell: Element) => {
            (headerCell as HTMLElement).style.height = (heightMap)[
                (event.target as HTMLButtonElement).id
            ];
        });
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • The getHeaderTable method can also be used to get the table element of the header, and then adjust the height.
  • The height of row cannot be changed below the default height of 42px using the e-columnheader class.

Change header text dynamically

The Syncfusion® TreeGrid component provides a way to modify the header text of a corresponding column in real-time based on an event. This feature can be useful in various scenarios, such as displaying custom header text for a specific column or updating the header text dynamically based on input. By allowing for dynamic changes to the header text, the TreeGrid provides a more flexible and customizable experience.

Using Event

To modify the header text of a corresponding column dynamically, the headerCellInfo event provided by the Syncfusion® TreeGrid can be used. This event is triggered for each header cell element rendered in the TreeGrid.

When the headerCellInfo event is triggered, it provides a HeaderCellInfoEventArgs object as a parameter. This object contains the following properties:

  • cell: Defines the header cell that is being modified.
  • node: Defines the DOM element of the header cell that is being modified.

These properties can be used to access and modify the header text of the corresponding column. Once the header text is modified, the TreeGrid can be refreshed to reflect the changes by calling the refreshHeader method.

Using method

The TreeGrid component provides several methods that allow changing the column header text dynamically. Here are some of the methods that can be used:

  1. getColumnByField: This method takes a field name as a parameter and returns the entire column object that corresponds to that field name, including properties such as headerText, width, and alignment. This method can be used to modify any aspect of the column.

  2. getColumnHeaderByField: Retrieves the header element of a column based on its field name. The textContent property of the header element can be modified to change the header text. This method does not return a reference to the column object itself, only to the header element.

  3. getColumnIndexByField: Retrieves the index of a column based on its field name. The getColumnByIndex method can then be used to retrieve the column object and modify its headerText property to change the header text.

  4. getColumnByUid: Retrieves the column object based on its unique identifier (UID). The headerText property of the column object can be modified to change the header text.

  5. getColumnHeaderByIndex: Retrieves the header element of a column based on its zero-based index. The textContent property of the header element can be modified to change the header text. This method does not return a reference to the column object itself, only to the header element.

  6. getColumnIndexByUid: Retrieves the index of a column based on its unique identifier (UID). The getColumnByIndex method can then be used to retrieve the column object and modify its headerText property to change the header text.

  7. getColumnHeaderByUid: Retrieves the header element of a column based on its unique identifier (UID). The textContent property of the header element can be modified to change the header text. This method does not return a reference to the column object itself, only to the header element.

  • When changing the header text dynamically, make sure to refresh the TreeGrid to reflect the changes by calling the refreshHeader method.
  • The UID is automatically generated by the TreeGrid component and may change whenever the TreeGrid is refreshed or updated.

The following example demonstrates how to change the header text of a column using the getColumnByField method:

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 { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { TextBoxComponent } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [TreeGridModule, ButtonModule, DropDownListAllModule, TextBoxModule],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<div style="display: flex">
               <label style="padding: 30px 20px 0 0" > Select column name  :</label>
               <ejs-dropdownlist  #dropdown style="padding: 26px 0 0 0" index='0' width="220" [dataSource]="columns"  [fields]="field"></ejs-dropdownlist>
               </div>
   
               <div>
                  <label style="padding: 30px 17px 0 0" >Enter new header text :</label>
                  <ejs-textbox #textbox required placeholder="Enter new header text" width="220">
                   </ejs-textbox>
                </div>

                <div>
                    <label style="padding: 30px 17px 0 0" >Click the change button :</label>
                    <button ejs-button id="buttons" (click)="ChangeHeaderText()">Change</button>
                </div>

               <div style="padding: 20px 17px 0 0">
                  <ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks'  [allowFiltering]="true" [allowSorting]="true">
                     <e-columns>
                        <e-column field='taskID' headerText='Task ID' [allowSorting]="false" textAlign='Right' width=120></e-column>
                        <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                        <e-column field='startDate' headerText='Start Date' [allowFiltering]="false" textAlign='Right' format='yMd' width=120></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=120></e-column>
                        <e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
                      </e-columns>
                  </ejs-treegrid> 
                </div>`,
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public columns: Object[] = [
        { text: 'Task ID', value: 'taskID' },
        { text: 'Task Name', value: 'taskName' },
        { text: 'Start Date', value: 'startDate' },
        { text: 'Duration', value: 'duration' },
        { text: 'Progress', value: 'progress' }
    ];
    public field?: Object = { text: 'text', value: 'value' };
    @ViewChild('dropdown') public dropdown?: DropDownListComponent;
    @ViewChild('textbox') public textbox?: TextBoxComponent;
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;

    public ChangeHeaderText(): void {
        if ((this.textbox as TextBoxComponent).element.value.trim() !== '') {
            const column = (this.treegrid as TreeGridComponent).grid.getColumnByField(
                (((this.dropdown as DropDownListComponent).value as string))
            );
            column.headerText = (this.textbox as TextBoxComponent).element.value;
            (this.treegrid as TreeGridComponent).refreshHeader();
        }
    }
    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));

Changing the header text of all columns

To change the header text of all columns in the TreeGrid, loop through the Columns collection of the TreeGrid and set the headerText property for each column. Here is an example:

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 { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule, ButtonModule],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<div>
                    <label style="padding: 30px 17px 0 0" >Click the change button :</label>
                    <button ejs-button id="buttons" (click)="ChangeHeaderText()">Change</button>
                </div>

               <div style="padding: 20px 17px 0 0">
                  <ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks'  [allowFiltering]="true" [allowSorting]="true">
                     <e-columns>
                        <e-column field='taskID' headerText='Task ID' [allowSorting]="false" textAlign='Right' width=120></e-column>
                        <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                        <e-column field='startDate' headerText='Start Date' [allowFiltering]="false" textAlign='Right' format='yMd' width=120></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=120></e-column>
                        <e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
                      </e-columns>
                  </ejs-treegrid> 
                </div>`,
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public headerTextMap: { [key: string]: string } = {
        'taskID': 'Task ID',
        'taskName': 'Task Name',
        'startDate': 'Start Date',
        'duration': 'Duration',
        'progress': 'Progress'
    };

    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;

    public ChangeHeaderText(): void {
        this.treegrid?.columns.forEach((column: any) => {
            column.headerText = this.headerTextMap[column.field as string];
        });
        this.treegrid?.refreshHeader();
    }

    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));

Change the orientation of header text

By default, the text in the column headers of the Syncfusion® TreeGrid control is oriented horizontally. However, in some cases, the orientation of the header text may need to be changed to vertical, diagonal, or at a custom angle. This can be achieved by adding a custom CSS class to the column header cell using the customAttributes property of the TreeGrid columns.

Follow the steps below to change the orientation of the header text in TreeGrid:

Step 1: Create a CSS class with orientation style for TreeGrid header cell

To rotate the header text, a CSS class with the transform property that rotates the header text 90 degrees can be created. This class will be added to the header cell using the customAttributes property.

.orientationcss .e-headercelldiv {
    transform: rotate(90deg);
}

Step 2: Add the custom CSS class to the TreeGrid column

Once the CSS class has been created, it can be added to the particular column by using the customAttributes property. This property allows adding any custom attribute to the TreeGrid column.

For example, to add the orientationcss class to the EndDate column, the following code can be used:

<e-column field='EndDate' headerText='End Date' width='90' format="yMd" textAlign='Center' [customAttributes]='customAttributes' ></e-column>

Step 3: Resize the header cell height

After adding the custom CSS class to a column, the header cell height needs to be resized so that the rotated header text is fully visible. This can be achieved by using the ‘created’ event of the TreeGrid, as shown in the following code:

setHeaderHeight(args) {
    let textWidth: number = document.querySelector('.orientationcss > div').scrollWidth;//Obtain the width of the headerText content.
    let headerCell: NodeList = document.querySelectorAll('.e-headercell');
    for(let i: number = 0; i < headerCell.length; i++) {
        (<HTMLElement>headerCell.item(i)).style.height = textWidth + 'px'; //Assign the obtained textWidth as the height of the headerCell.
    }
}
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 { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { projectData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None,
    template: `<ejs-treegrid #treegrid [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [height]='194' [treeColumnIndex]='1' (created)='setHeaderHeight($event)'  >
                     <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' width='90' format="yMd" textAlign='Right' ></e-column>
                        <e-column field='EndDate' headerText='End Date' width='90' format="yMd" textAlign='Center' [customAttributes]='customAttributes' ></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-columns>
                </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data: Object[] = [];
    public customAttributes?: Object;

    ngOnInit(): void {
        this.data = projectData;
        this.customAttributes = { class: 'orientationcss' };
    }
    setHeaderHeight(args: any) {
        const textWidth: number = (document.querySelector('.orientationcss > div') as Element).scrollWidth as number; // Obtain the width of the headerText content.
        const headerCell: NodeList = document.querySelectorAll('.e-headercell');
        for (let i = 0; i < headerCell.length; i++) {
            // Assign the obtained textWidth as the height of the headerCell.
            (headerCell.item(i) as HTMLElement).style.height = textWidth + 'px';
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Translate header text using ngx-translate

The ngx-translate library provides internationalization (i18n) and localization (l10n) support for Angular applications. With ngx-translate, Angular applications can be easily translated into multiple languages.

In the context of the Syncfusion® Angular TreeGrid component, ngx-translate can be used to translate the header text of the TreeGrid’s columns. There are two ways to achieve this: through header text and through header template.

Through header text

To translate the header text of the TreeGrid’s columns using ngx-translate through header text, the translate pipe can be used for the headerText property.

Step 1: Create and Configure the TranslateService

import { Component, ViewChild } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(public translate: TranslateService) {
  }

  @ViewChild('treegrid', { static: true })
  public treegrid!: TreeGridComponent;
  public flag: boolean = true;
  public data: Object[] = [];

  changeLanguage(lang: string) {
    this.translate.use(lang);

    setTimeout(() => {
      this.treegrid.refreshHeader();
    }, 500);
  }

  ngOnInit(): void {
    this.data = [
      {
        OrderID: 10248,
        CustomerID: 'VINET',
        lineId: 5,
        start: 'Reims',
        destination: 'France',
        subtasks [
         {
           OrderID: 10249,
           CustomerID: 'TOMSP',
           lineId: 6,
           start: 'Münster',
           destination: 'Germany',
          },
         {
           OrderID: 10250,
           CustomerID: 'HANAR',
           lineId: 2,
           start: 'Rio de Janeiro',
           destination: 'Brazil',
         },
        ]
      }
    ];
  }
}

Step 2: Import the TranslateModule and TranslateLoader in the app.module.ts file. The HttpClientModule also needs to be imported to enable HTTP requests for loading translation files.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';
import { TreeGridAllModule } from '@syncfusion/ej2-angular-treegrid';
import { CommonModule } from '@angular/common';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient],
      },
      defaultLanguage: '',
    }),
    CommonModule,
    TreeGridAllModule,
    BrowserModule,
    ButtonModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

In the above code, the required modules are imported and a function called HttpLoaderFactory is defined that returns an instance of TranslateHttpLoader, which is used to load translation files.

Step 3: Use the translate pipe in the HTML code to translate the headerText of the column.

<h1> Ngx translate pipe for header text in Angular TreeGrid component</h1>
<h1></h1>
<div class="container-fluid py-3">
  <div class="btn-group btn-group-sm py-5">
    <button  ejs-button type="button" class="btn btn-sm btn-info"
     (click)="changeLanguage('en')">en</button>
    <button  ejs-button type="button" class="btn btn-sm btn-success"
    (click)="changeLanguage('de')">de</button>
    <button  ejs-button ejs-button type="button" ejs-button class="btn btn-sm btn-warning"
    (click)="changeLanguage('es-ES')">es</button>
  </div>
</div>
<div style="padding:20px 0px 0px 0px">
  <ejs-treegrid #treegrid [dataSource]="data" childMapping="subtasks" treeColumnIndex='1' height="350">
    <e-columns>
      <e-column field="OrderID" headerText="Order ID" width="120" textAlign="Right"></e-column>
      <e-column field="lineId" headerText="{{ 'Line' | translate }}" width="120" textAlign="Right">
      </e-column>
      <e-column field="start" headerText="{{ 'Start' | translate }}" width="140">
      </e-column>
      <e-column field="destination" headerText="{{ 'Destination' | translate }}" width="170">
      </e-column>
    </e-columns>
  </ejs-treegrid>
<div>

Step 4: Add the json file with the translation text in the required languages,

en.json { 

    "Line": "Line",
    "Start": "Start",
    "Destination": "Destination"

}
de.json { 
 "changeLanguage": "Ändere Sprache",
    "Line": "Linie",
    "Start": "Startpunkt",
    "Destination": "Zielpunkt"
}
es-ES.json {
    "changeLanguage": "cambiar idioma",
    "Line": "Línea",
    "Start": "Comenzar",
    "Destination": "Destino"
  }

Through header template

To translate the header text of the TreeGrid’s columns using ngx-translate through header template, the translate pipe can be used in the header templates of the TreeGrid component.

Here are the steps to use ngx-translate pipe for TreeGrid’s header template in Angular TreeGrid component:

Step 1: Create and Configure the TranslateService

import { Component, ViewChild } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(public translate: TranslateService) {
  }

  @ViewChild('treegrid', { static: true })
  public treegrid!: TreeGridComponent;
  public flag: boolean = true;
  public data: Object[] = [];

  changeLanguage(lang: string) {
    this.translate.use(lang);
  }

  ngOnInit(): void {
    this.data = [
      {
        OrderID: 10248,
        CustomerID: 'VINET',
        lineId: 5,
        start: 'Reims',
        destination: 'France',
        subtasks [
         {
           OrderID: 10249,
           CustomerID: 'TOMSP',
           lineId: 6,
           start: 'Münster',
           destination: 'Germany',
          },
         {
           OrderID: 10250,
           CustomerID: 'HANAR',
           lineId: 2,
           start: 'Rio de Janeiro',
           destination: 'Brazil',
         },
        ]
      }
    ];
  }
}

Step 2: Import the required modules in app.module.ts file along with translate loader function,

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';
import { TreeGridAllModule } from '@syncfusion/ej2-angular-treegrid';
import { CommonModule } from '@angular/common';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient],
      },
      defaultLanguage: 'en-US',
    }),
    CommonModule,
    TreeGridAllModule,
    BrowserModule,
    ButtonModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 3: Use the ngx-translate pipe in the Angular TreeGrid component header templates to translate the headers dynamically.

<h1> Ngx translate pipe for header template in Angular TreeGrid component</h1>
<h1></h1><div class="container-fluid py-3">
  <div class="btn-group btn-group-sm py-5">
    <button ejs-button type="button" class="btn btn-sm btn-info" 
    (click)="changeLanguage('en-US')"> en-US</button>
    <button ejs-button type="button" class="btn btn-sm btn-success"
    (click)="changeLanguage('de-DE')"> de-DE</button>
  </div>
</div>
<div style="padding:20px 0px 0px 0px">
  <ejs-treegrid [dataSource]="data" childMapping='subtasks' treeColumnIndex=1 height="350">
    <e-columns>
      <e-column
        field="OrderID"
        headerText="Order ID"
        width="120"
        textAlign="Right"
      ></e-column>
      <e-column field="lineId" width="120" textAlign="Right"
        ><ng-template #headerTemplate let-data>
          <div>
            {{ 'Line' | translate }}
          </div>
        </ng-template></e-column
      >
      <e-column field="start" width="140"
        ><ng-template #headerTemplate let-data>
          <div>
            {{ 'Start' | translate }}
          </div>
        </ng-template></e-column
      >
      <e-column field="destination" width="170"
        ><ng-template #headerTemplate let-data>
          <div>
            {{ 'Destination' | translate }}
          </div>
        </ng-template></e-column>
    </e-columns>
  </ejs-treegrid>
</div>

Step 4: Add the json file with the translation text in the required languages,

en.json { 

    "Line": "Line",
    "Start": "Start",
    "Destination": "Destination"
}
de.json { 
 "changeLanguage": "Ändere Sprache",
    "Line": "Linie",
    "Start": "Startpunkt",
    "Destination": "Zielpunkt"
}

Custom tooltip for header

Custom tooltips for headers provide additional information when hovering over a column header in the Syncfusion® TreeGrid. This can be useful when there is not enough space to display all information related to a column, or when additional context may be helpful.

To enable custom tooltips for headers, the beforeRender event of the Tooltip component can be used. This event is triggered for each header cell before it is rendered, allowing addition of a custom tooltip to the header cell using the tooltip component.

The following example demonstrates how to use the beforeRender event to add a custom tooltip to a header cell:

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 { Component, OnInit, } from '@angular/core';
import { sampleData } from './datasource';
import { TooltipComponent, TooltipEventArgs , TooltipAllModule} from "@syncfusion/ej2-angular-popups";

@Component({
    imports: [TreeGridModule,  TooltipAllModule],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `  <ejs-tooltip #tooltip (beforeRender)="beforeRender($event)" target=".e-headertext">
                    <ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks'  [allowFiltering]="true" [allowSorting]="true">
                      <e-columns>
                          <e-column field='taskID' headerText='Task ID' [allowSorting]="false" textAlign='Right' width=120></e-column>
                          <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                          <e-column field='startDate' headerText='Start Date' [allowFiltering]="false" textAlign='Right' format='yMd' width=120></e-column>
                          <e-column field='duration' headerText='Duration' textAlign='Right' width=120></e-column>
                          <e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
                      </e-columns>
                    </ejs-treegrid> 
                </ejs-tooltip>`,
})
export class AppComponent implements OnInit {

    public data?: Object[];
    @ViewChild('tooltip')
    public toolTip?: TooltipComponent;
    public columnDescriptions: { [key: string]: string } = {
        "Task ID": "A unique number assigned to each task.",
        "Task Name": "The process of the task name.",
        "Duration": "The duration of the task.",
        "Progress": "The progress state of the task.",
        "Start Date": "The date when the order was placed.",
    };
    ngOnInit(): void {
        this.data = sampleData;
    }
    beforeRender(args: TooltipEventArgs) {
        const description = this.columnDescriptions[args.target.innerText];
        if (description) {
            (this.toolTip as TooltipComponent).content = args.target.innerText + ": " + description;
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • The headerCellInfo event can also be used to customize the header tooltip. This event is triggered for each header cell after it is rendered.

Customize header text styles

Customizing the TreeGrid header styles allows modifying the appearance of the column header in the TreeGrid control to meet design requirements. The font, background color, and other styles of the header cells can be customized. To customize the header styles in the TreeGrid, CSS, properties, methods, or event support provided by the Syncfusion® Angular TreeGrid component can be used.

Using CSS

Styles can be applied to the header cells using CSS selectors. The TreeGrid provides a class name for each header cell element, which can be used to apply styles to that specific header cell. The .e-headercell class can be used to change the background color and text color of the column header.

  .e-treegrid .e-headercell {
    background-color: #a2d6f4;
    color:rgb(3, 2, 2);
  }

The following example demonstrates how to customize the appearance of a specific column header in the TreeGrid using className.

import { NgModule, ViewChild, ViewEncapsulation } 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 { Component, OnInit, } from '@angular/core';
import { sampleData } from './datasource';
@Component({
    imports: [TreeGridModule,],
    encapsulation:ViewEncapsulation.None,
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks'>
                 <e-columns>
                    <e-column field='taskID' headerText='Task ID' textAlign='Right' width=120></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=120></e-column>
                    <e-column field='duration' headerText='Duration' textAlign='Right' width=120></e-column>
                    <e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
                 </e-columns>
               </ejs-treegrid>`,
    styles:[`  .e-treegrid .e-headercell {
        background-color: #a2d6f4;
        color:rgb(3, 2, 2);
      }
      `]
})
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));

Using property

The appearance of the column headers in TreeGrid can be customized using the customAttributes property. The customAttributes property takes an object with the name-value pair to customize the CSS properties for TreeGrid header cells. Multiple CSS properties can also be set to the custom class using the customAttributes property.

To customize the header of a column, follow the steps below:

Step 1: Define a CSS class that specifies the styles to apply to the header cell of the column. For example, to change the background color and text color of the header cell, define a CSS class like this:

    .e-treegrid .e-headercell.customcss {
       background-color: rgb(43, 205, 226);
      color: black;
    }

Step 2: Set the customAttributes property of the desired column to an object that contains the CSS class customcss. This CSS class will be applied to the header cell of the specified column in the TreeGrid.

     <e-column field='taskID' headerText='Task ID' textAlign='Right' [customAttributes]="{class:'customcss'}" width=120></e-column>

The following example demonstrates how to customize the appearance of the TaskID column using custom attributes.

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 { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { sampleData } from './datasource';
@Component({
    imports: [TreeGridModule,],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    encapsulation: ViewEncapsulation.None,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks'>
                 <e-columns>
                    <e-column field='taskID' headerText='Task ID' textAlign='Right' [customAttributes]="{class:'customcss'}" width=120></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=120></e-column>
                    <e-column field='duration' headerText='Duration' textAlign='Right'[customAttributes]="{class:'customcss'}" width=120></e-column>
                    <e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
                  </e-columns>
                </ejs-treegrid>`,
    styleUrls: ['./custom-column.style.css']
})
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));

Using method

The Syncfusion® TreeGrid component provides methods to customize the appearance of the TreeGrid columns header.

  1. getColumnHeaderByIndex: This method is used to customize the appearance of a specific column header in the TreeGrid by specifying the index of the column for which to customize the header.

  2. getColumnHeaderByField: This method is used to retrieve the header element of a specific column by its field name. The retrieved element can be used to customize the appearance of the header element.

  3. getColumnHeaderByUid: This method is used to retrieve the header element of a specific column by its unique ID. The retrieved element can be used to customize the appearance of the header element.

  4. getColumnIndexByField:This method is used to retrieve the index of a specific column by its field name. The retrieved index can be used to access the header element and customize its appearance.

  5. getColumnIndexByUid: This method is used to retrieve the index of a specific column by its unique ID. The retrieved index can be used to access the header element and customize its appearance.

The following example demonstrates how to use these methods to change the style of a specific column header:

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 { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule,],
    encapsulation: ViewEncapsulation.None,
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' height='250' (dataBound)="dataBound()" [treeColumnIndex]='1' childMapping='subtasks'>
                 <e-columns>
                    <e-column field='taskID' headerText='Task ID' textAlign='Right' [customAttributes]="{class:'customcss'}" width=120></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=120></e-column>
                    <e-column field='duration' headerText='Duration' textAlign='Right'[customAttributes]="{class:'customcss'}" width=120></e-column>
                    <e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
                </e-columns>
            </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data?: Object[];
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;

    ngOnInit(): void {
        this.data = sampleData;
    }
    dataBound() {
        ((this.treegrid as TreeGridComponent).getColumnHeaderByIndex(0) as HTMLElement).style.color = '#0d0b0b';
        ((this.treegrid as TreeGridComponent).getColumnHeaderByField('taskName') as HTMLElement).style.background = '#f45ddeab';
        ((this.treegrid as TreeGridComponent).getColumnHeaderByField('taskName') as HTMLElement).style.color = '#0d0b0b';
        ((this.treegrid as TreeGridComponent).getColumnHeaderByUid('grid-column39') as HTMLElement).style.background = '#f45ddeab';
        const columnIndex = (this.treegrid as TreeGridComponent).getColumnIndexByField('duration');
        ((this.treegrid as TreeGridComponent).getColumnHeaderByIndex(columnIndex) as HTMLElement).style.color = '#0d0b0b';
        const index = (this.treegrid as TreeGridComponent).getColumnIndexByUid('grid-column39');
        ((this.treegrid as TreeGridComponent).getColumnHeaderByIndex(index) as HTMLElement).style.color = '#0d0b0b';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • The UID is automatically generated by the TreeGrid component and may change whenever the TreeGrid is refreshed or updated.

Using event

To customize the appearance of the TreeGrid header, the headerCellInfo event of the TreeGrid can be handled. This event is triggered when each header cell is rendered in the TreeGrid, and provides an object that contains information about the header cell. This object can be used to modify the styles of the header column.

The following example demonstrates how to add a headerCellInfo event handler to the TreeGrid. In the event handler, it is checked whether the current header column is the Start Date field and then the appropriate CSS class is applied to the cell based on its value.

import { NgModule, ViewEncapsulation } 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 { HeaderCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { Column, } from '@syncfusion/ej2-treegrid';
@Component({
    imports: [TreeGridModule,],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    encapsulation: ViewEncapsulation.None,
    template: `<ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks'  (headerCellInfo)="onHeaderCellInfo($event)">
                  <e-columns>
                    <e-column field='taskID' headerText='Task ID' [allowSorting]="false" textAlign='Right' width=120></e-column>
                    <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                    <e-column field='startDate' headerText='Start Date' [allowFiltering]="false" textAlign='Right' format='yMd' width=120></e-column>
                    <e-column field='duration' headerText='Duration' textAlign='Right' width=120></e-column>
                    <e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
                  </e-columns>
                </ejs-treegrid>`,
    styles: [`
        .e-treegrid .e-headercell.customcss {
              background-color: #a2d6f4;
              color:rgb(3, 2, 2);
              }`]
})
export class AppComponent implements OnInit {

    public data?: Object[];

    ngOnInit(): void {
        this.data = sampleData;
    }
    public onHeaderCellInfo(args: HeaderCellInfoEventArgs) {
        if ((args.cell as any).column.field == 'startDate') {
            (args.node as Element).classList.add('customcss');
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

How to refresh header

The refresh header feature in the Syncfusion® Angular TreeGrid allows updating the header section of the TreeGrid whenever changes are made to the TreeGrid’s columns. This feature is useful when changes in the header need to be reflected immediately, such as modifying the column header text, width, or alignment.

To use the refresh header feature, the refreshHeader method of the TreeGrid component can be called. This method updates the TreeGrid header with the latest changes made to the columns.

The following example demonstrates how to use the refreshHeader method to update the TreeGrid header:

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 { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
    imports: [TreeGridModule, ButtonModule],
    providers: [PageService, SortService, FilterService],
    standalone: true,
    selector: 'app-container',
    template: ` <button ejs-button (click)="refreshHeader()">Refresh Header</button>
                <ejs-treegrid #treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks'>
                  <e-columns>
                    <e-column field='taskID' headerText='Task ID' textAlign='Right' width=120></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=120></e-column>
                    <e-column field='duration' headerText='Duration' textAlign='Right' width=120></e-column>
                    <e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
                   </e-columns>
                </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data?: Object[];
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;

    ngOnInit(): void {
        this.data = sampleData;
    }
    public refreshHeader(): void {
        const column = (this.treegrid as TreeGridComponent).grid.getColumnByIndex(1);
        column.headerText = 'New Header Text'; // update the header text of the column object
        (this.treegrid as TreeGridComponent).refreshHeader(); // refresh the grid header
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • The refreshHeader method updates only the TreeGrid header and not the entire TreeGrid.
  • To refresh the entire TreeGrid, the refresh method can be used instead.

How to get header element

To get the header element in a Syncfusion® TreeGrid, one of the following methods can be used:

  1. getHeaderContent: This method returns the header div element of the TreeGrid. This method can be used to access the entire header content of the TreeGrid.

     const headerElement = this.treegrid.getHeaderContent();

  2. getHeaderTable: This method returns the header table element of the TreeGrid. This method can be used to access only the header table of the TreeGrid.

     const headerTableElement = this.treegrid.getHeaderTable();

  3. getColumnHeaderByUid: This method returns the column header element by its unique identifier.

     const columnHeaderElement = this.treegrid.getColumnHeaderByUid("e-treegrid2");

  4. getColumnHeaderByIndex: This method returns the column header element by its index.

     const columnHeaderElement = this.treegrid.getColumnHeaderByIndex(0);

  5. getColumnHeaderByField: This method returns the column header element by its field name.

     const columnHeaderElement = this.treegrid.getColumnHeaderByField("taskID");
  • The UID is automatically generated by the TreeGrid component and may change whenever the TreeGrid is refreshed or updated.