Having trouble getting help?
Contact Support
Contact Support
Change header text dynamically in Angular Treegrid component
27 Apr 20244 minutes to read
You can change the column headerText
dynamically through an external button.
Follow the given steps to change the header text dynamically:
Step 1:
Get the column object corresponding to the field name by using the getColumnByField
method.
Then change the header Text value.
/** get the JSON object of the column corresponding to the field name */
const column = this.treegridObj.getColumnByField("Duration");
/** assign a new header text to the column */
column.headerText = "Changed Text";
Step 2:
To reflect the changes in the Tree Grid header, invoke the refreshColumns
method.
this.treegridObj.refreshColumns();
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 { Component, OnInit, ViewChild } from '@angular/core';
import { projectData } from './datasource';
import { Column, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
@Component({
imports: [
TreeGridModule,
ButtonModule,
DropDownListAllModule
],
providers: [PageService,
SortService,
FilterService],
standalone: true,
selector: 'app-container',
template: `<button #btn1 ejs-button cssClass="e-flat" [isToggle]="true" (click)="click()">Change Header Text</button>
<ejs-treegrid #treegridObj [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [treeColumnIndex]='1' [height]='210'>
<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='Right'></e-column>
<e-column field='Duration' headerText='Duration' width='90' textAlign='Right'></e-column>
<e-column field='Priority' headerText='Priority' width='90'></e-column>
</e-columns>
</ejs-treegrid>`,
})
export class AppComponent implements OnInit {
public data: Object[] = [];
@ViewChild('treegridObj')
public treegridObj?: TreeGridComponent;
ngOnInit(): void {
this.data = projectData;
}
click() {
const column = this.treegridObj?.getColumnByField('Duration'); // get the JSON object of the column corresponding to the field name
(column as Column).headerText = 'Changed Text'; // assign a new header text to the column
this.treegridObj?.refreshColumns();
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
You can refer to our
Angular Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore ourAngular Tree Grid example
to knows how to present and manipulate data.