Having trouble getting help?
Contact Support
Contact Support
Customize column styles in Angular Treegrid component
27 Apr 20243 minutes to read
You can customise the appearance of header and content of the particular column using the customAttributes
property.
To customize the Tree Grid column, follow the given steps:
Step 1:
Create a CSS class with custom style to override the default style for rowcell and headercell.
.e-treegrid .e-rowcell.customcss{
background-color: #ecedee;
font-family: 'Bell MT';
color: 'red';
font-size: '20px';
}
.e-treegrid .e-headercell.customcss{
background-color: #2382c3;
color: white;
font-family: 'Bell MT';
font-size: '20px';
}
Step 2:
Add the custom CSS class to particular column by using customAttributes
property.
<e-column field='TaskName' headerText='Task Name' width='170' [customAttributes]='customAttributes'></e-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 {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { projectData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [
TreeGridModule,
ButtonModule
],
providers: [PageService,
SortService,
FilterService],
standalone: true,
selector: 'app-container',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None,
template: `<ejs-treegrid [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [treeColumnIndex]='1' [height]='317'>
<e-columns>
<e-column field='TaskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
<e-column field='TaskName' headerText='Task Name' width='100' [customAttributes]='customAttributes'></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-columns>
</ejs-treegrid>`,
})
export class AppComponent implements OnInit {
public data: Object[] = [];
public customAttributes?: Object;
ngOnInit(): void {
this.data = projectData;
this.customAttributes = {class: 'customcss'};
}
}
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.