Column menu in Angular TreeGrid component

25 Aug 202524 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 the column header’s menu icon is clicked, a menu displays with these integrated features. To enable the column menu, set the showColumnMenu property to true in the TreeGrid configuration.

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

The default column menu items are displayed in the 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 
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));

Column menu can be disabled for a particular column by defining the column.showColumnMenu as false.

The default items can be customized by defining the columnMenuItems with required items.

Add custom column menu item

The custom column menu item feature allows adding additional menu items to the column menu in the Syncfusion® TreeGrid. These custom menu items can be defined using the columnMenuItems property, which accepts a collection of columnMenuItemModel objects. Actions for these custom items can be defined in the columnMenuClick event.

The following example demonstrates how to add a custom column menu item to clear the sorting of the TreeGrid:

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

Customize menu items for particular columns

In some scenarios, specific items need to be hidden from the column menu for particular columns. This can be achieved by defining the columnMenuOpenEventArgs.hide as true in the columnMenuOpen event.

In the following example, the Filter item is hidden in the column menu when opened for the taskName column.

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, ResizeService } 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, ResizeService]
})
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));

Customize the icon of column menu

To customize the column menu icon, override the default TreeGrid class .e-icons.e-columnmenu with a custom CSS property called content. By specifying a Unicode character or an icon font’s CSS class, the icon displayed in the column menu can be changed.

To customize the column menu icon, follow these steps:

  1. Add the necessary CSS code to override the default TreeGrid class:
.e-treegrid .e-columnheader .e-icons.e-columnmenu::before {
    content: "\e99a";
}
  1. Import the required icon stylesheets. Either the material or bootstrap5 style can be used, depending on 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" />

The following example demonstrates how to customize the column menu icon in the Syncfusion® TreeGrid:

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, ResizeService  } 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, ResizeService ]
})
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));

Render nested column menu

The nested column menu feature provides an extended menu option in the TreeGrid column headers, allowing access to additional actions and options related to the columns.

To enable the nested column menu feature, define the columnMenuItems property in the 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.

The following example demonstrates how to configure the columnMenuItems property to include a nested menu:

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

Column menu events

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

  1. The columnMenuOpen event triggers before the column menu opens.
  2. The columnMenuClick event triggers when the column menu of the TreeGrid is clicked.
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, ResizeService } from '@syncfusion/ej2-angular-treegrid';

@Component({
imports: [ TreeGridModule,],
providers: [PageService, SortService, FilterService, ColumnMenuService, ResizeService],
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));