Column menu in Angular TreeGrid component

19 Sep 202424 minutes to read

The column menu in the Syncfusion Angular TreeGrid component provides options to enable features such as sorting, filtering, column chooser, and autofit. When click on the column header’s menu icon, a menu will be displayed with these integrated features. To enable the column menu, you need to set the showColumnMenu property to true in the Tree Grid configuration.

To use the column menu, inject the ColumnMenuService in the provider section of AppModule.

The default column menu items are displayed in following table.

Item	Description
`SortAscending`	Sort the current column in ascending order.
`SortDescending`	Sort the current column in descending order.
`AutoFit`	Auto fit the current column.
`AutoFitAll`	Auto fit all columns.
`ColumnChooser`	Choose the column visibility.
`Filter`	Show the filter option as given in `filterSettings.type`

app.component.ts
main.ts
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { ResizeService, FilterService, SortService, PageService, ColumnMenuService } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid height='250' [dataSource]='data' [allowResizing]='true' [treeColumnIndex]='1' childMapping='subtasks'  showColumnMenu="true"  [allowFiltering]="true" [allowSorting]="true" [filterSettings]="filterSettings">
                  <e-columns>
                        <e-column field='taskID' headerText='Task ID' textAlign='Right' width=140></e-column>
                        <e-column field='taskName' headerText='Task Name' textAlign='Left' width=240></e-column>
                        <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=160></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=150></e-column>
                        <e-column field='progress' headerText='Progress' textAlign='Right' width=150></e-column>
                    </e-columns>
                </ejs-treegrid>`,
    providers: [FilterService, PageService, SortService, ResizeService, ColumnMenuService]
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public filterSettings?: Object;
    ngOnInit(): void {
        this.data = sampleData;
        this.filterSettings = { type: 'Menu' };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can disable column menu for a particular column by defining the column.showColumnMenu as false.

You can customize the default items by defining the columnMenuItems with required items.

The custom column menu item feature allows you to add additional menu items to the column menu in the Syncfusion Tree Grid. These custom menu items can be defined using the columnMenuItems property, which accepts a collection of columnMenuItemModel objects. You can define the actions for these custom items in the columnMenuClick event.

Consider the following example, which demonstrates how to add a custom column menu item to clear the sorting of the tree grid:

app.component.ts
main.ts
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { FilterService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { ColumnMenuService, SortService, TreeGridComponent, PageService, SortSettingsModel, } from '@syncfusion/ej2-angular-treegrid';
import { MenuEventArgs } from '@syncfusion/ej2-navigations';

@Component({
    imports: [TreeGridModule,],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid height='250' allowSorting='true' allowPaging='true' [dataSource]='data' [treeColumnIndex]='1' childMapping='subtasks' [sortSettings]='sortSettings' showColumnMenu="true" [columnMenuItems]='columnMenuItems' (columnMenuClick)='columnMenuClick($event)'>
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' textAlign='Right' width=140></e-column>
                        <e-column field='taskName' headerText='Task Name' textAlign='Left' width=240></e-column>
                        <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=160></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=150></e-column>
                        <e-column field='progress' headerText='Progress' textAlign='Right' width=150></e-column>
                    </e-columns>
                </ejs-treegrid>`,
    providers: [SortService, ColumnMenuService, PageService, FilterService],
})
export class AppComponent implements OnInit {
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;

    public data?: object[];
    public columnMenuItems: any = [
        { text: 'Clear Sorting', id: 'treegridclearsorting' },
    ];
    public sortSettings: SortSettingsModel = {
        columns: [{ direction: 'Descending', field: 'taskID' }],
    };

    public columnMenuClick(args: MenuEventArgs) {
        debugger;
        if (args.item.id === 'treegridclearsorting') {
            (this.treegrid as TreeGridComponent).clearSorting();
        }
    }
    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));

Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the columnMenuOpenEventArgs.hide as true in the columnMenuOpen event.

In the following sample, the Filter item was hidden in the column menu when opened for the taskName column.

app.component.ts
main.ts
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent, SortService, ColumnMenuService, PageService, FilterService } from '@syncfusion/ej2-angular-treegrid';
import { FilterSettingsModel } from '@syncfusion/ej2-angular-treegrid';

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

    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;
    public data?: object[];
    public filterSettings: FilterSettingsModel = { type: 'Menu' };

    public columnMenuOpen(args: any) {
        for (const item of args.items) {
            if (item.text === 'Filter' && args.column.field === 'taskName') {
                (item as any).hide = true;
            } else {
                (item as any).hide = false;
            }
        }
    }

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

You can disable column menu for a particular column by defining the column.showColumnMenu as false.

To customize the column menu icon, you need to override the default tree grid class .e-icons.e-columnmenu with a custom CSS property called content. By specifying a Unicode character or an icon font’s CSS class, you can change the icon displayed in the column menu.

To customize the column menu icon, follow these steps:

1.Add the necessary CSS code to override the default tree grid class:

.e-treegrid .e-columnheader .e-icons.e-columnmenu::before {
    content: "\e99a";
}

2.Import the required icon stylesheets. You can use either the material or bootstrap5 style, depending on your preference. Add the following code to import the stylesheets:

<link href="https://cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/ej2-icons/styles/bootstrap5.css" rel="stylesheet" />

Here is an example that demonstrates how to customize the column menu icon in the Syncfusion Tree Grid:

app.component.ts
main.ts
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent, SortService, ColumnMenuService, PageService, FilterService } from '@syncfusion/ej2-angular-treegrid';
import { FilterSettingsModel } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule,],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid height='250' allowSorting='true' allowPaging='true' [dataSource]='data' [treeColumnIndex]='1' childMapping='subtasks' [filterSettings]='filterSettings' [allowFiltering]='true' showColumnMenu="true">
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' textAlign='Right' width=140></e-column>
                        <e-column field='taskName' headerText='Task Name' textAlign='Left' width=240></e-column>
                        <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=160></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=150></e-column>
                        <e-column field='progress' headerText='Progress' textAlign='Right' width=150></e-column>
                    </e-columns>
                </ejs-treegrid>`,
    providers: [SortService, ColumnMenuService, PageService, ColumnMenuService, FilterService]
})
export class AppComponent implements OnInit {

    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;
    public data?: object[];
    public filterSettings: FilterSettingsModel = { type: 'Menu' };

    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 nested column menu feature provides an extended menu option in the tree grid column headers, allows you to access additional actions and options related to the columns.

To enable the nested column menu feature, you need to define the columnMenuItems property in your component. The columnMenuItems property is an array that contains the items for the column menu. Each item can be a string representing a built-in menu item or an object defining a custom menu item.

Here is an example of how to configure the columnMenuItems property to include a nested menu:

app.component.ts
main.ts
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent, SortService, ColumnMenuService, PageService, FilterService, FilterSettingsModel } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule,],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid height='250' allowSorting='true' allowPaging='true' [dataSource]='data' [treeColumnIndex]='1' childMapping='subtasks' [columnMenuItems]='columnMenuItems' [filterSettings]='filterSettings' [allowFiltering]='true' showColumnMenu="true"  (columnMenuClick)='columnMenuClick($event)'>
                  <e-columns>
                        <e-column field='taskID' headerText='Task ID' textAlign='Right' width=140></e-column>
                        <e-column field='taskName' headerText='Task Name' textAlign='Left' width=240></e-column>
                        <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=160></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=150></e-column>
                        <e-column field='progress' headerText='Progress' textAlign='Right' width=150></e-column>
                    </e-columns>
                </ejs-treegrid>`,
    providers: [SortService, ColumnMenuService, PageService, ColumnMenuService, FilterService,],
})
export class AppComponent implements OnInit {
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;
    public data?: object[];
    public filterSettings: FilterSettingsModel = { type: 'Menu' };
    public columnMenuItems: any = [
        'SortAscending',
        'SortDescending',
        'Filter',
        {
            text: 'Sub Menu',
            items: [
                { text: 'Option 1', id: 'option1' },
                { text: 'Option 2', id: 'option2' },
                { text: 'Option 3', id: 'option3' },
                {
                    text: 'Nested Sub Menu',
                    items: [
                        { text: 'Nested Option 1', id: 'nestedoption1' },
                        { text: 'Nested Option 2', id: 'nestedoption2' },
                    ],
                },
            ],
        },
    ];
    ngOnInit(): void {
        this.data = sampleData;
    }
    public columnMenuClick(args: any) {
        if (args.item.id === 'option1') {
            // custom function
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The column menu in Syncfusion Angular Tree Grid provides a set of events that allow customization of behavior and performing actions when the column menu is opened or clicked. The below events are helpful for adding additional functionality or implementing specific actions based on interactions with the column menu.

The columnMenuOpen event triggers before the column menu opens.
The columnMenuClick event triggers when clicks the column menu of the tree grid.

app.component.ts
main.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 } from '@angular/core';
import { sampleData } from './datasource';
import { ColumnMenuService } from '@syncfusion/ej2-angular-treegrid';

@Component({
imports: [ TreeGridModule,],
providers: [PageService, SortService, FilterService,ColumnMenuService],
standalone: true,
    selector: 'app-container',
    template: `<div style="margin-left:180px"><p style="color:red;" id="message"></p></div>
          
                <ejs-treegrid #treegrid height='250' [dataSource]='data' [treeColumnIndex]='1' childMapping='subtasks' showColumnMenu="true" (columnMenuOpen)="columnMenuOpen()" (columnMenuClick)="columnMenuClick()">
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' textAlign='Right' width=100></e-column>
                        <e-column field='taskName' headerText='Task Name' textAlign='Left' width=240></e-column>
                        <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=130></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=150></e-column>
                        <e-column field='progress' headerText='Progress' textAlign='Right' width=150></e-column>
                    </e-columns>
                </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];
    public message?: string;
    ngOnInit(): void {
        this.data = sampleData;
    }
    columnMenuOpen() {
        this.message = 'columnMenuOpen event is Triggered';
    }
    columnMenuClick() {
        this.message = 'columnMenuClick event is Triggered';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Column menu in Angular TreeGrid component

Add custom column menu item

Customize menu items for particular columns

Customize the icon of column menu

Render nested column menu

Column menu events