Having trouble getting help?
Contact Support
Contact Support
Customize the icon for column menu in Angular Treegrid component
27 Apr 20243 minutes to read
You can customize the column menu icon by overriding the default Tree Grid class .e-icons.e-columnmenu with a custom property content as mentioned below,
.e-treegrid .e-columnheader .e-icons.e-columnmenu::before {
content: "\e903";
}
In the below sample, Tree Grid is rendered with a customized column menu icon.
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, ColumnMenuService } 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,
providers: [ColumnMenuService],
template: `<ejs-treegrid #treegrid [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [treeColumnIndex]='1' [height]='315' showColumnMenu=true>
<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[] = [];
ngOnInit(): void {
this.data = projectData;
}
}
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.