Change orientation of header text in Angular TreeGrid component

25 Aug 20255 minutes to read

The orientation of header text in the TreeGrid component can be changed using the customAttributes property.

Follow these steps:

Step 1:

Define a CSS class with the desired orientation style for the TreeGrid header cell.

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

Step 2:

Apply the custom CSS class to a specific column using the customAttributes property.

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

Step 3:

Adjust the header cell height in the create event using the following code.

public setHeaderHeight() {
    /** Obtain the width of the headerText content */
    const textWidth: number = (document.querySelector(".orientationcss > div") as HTMLElement).scrollWidth;
    const headerCell: NodeList = document.querySelectorAll(".e-headercell");
    for(let i: number = 0; i < headerCell.length; i++) {
      /** Assign the obtained textWidth as the height of the headerCell */
      ((headerCell as any).item(i)).style.height = textWidth + 'px';
    }
  }

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 { 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';
        }
    }
}

main.ts

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

For additional details, refer to the Angular TreeGrid feature tour page. Explore the Angular TreeGrid example to learn more about presenting and manipulating data.