Column menu in Angular Treegrid component
17 Nov 202216 minutes to read
The column menu has options to integrate features like sorting, filtering, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the showColumnMenu
property as true.
To use the column menu, inject the ColumnMenu
module in the treegrid.
The default 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. |
Filter |
Show the filter option as given in filterSettings.type
|
import { Component, OnInit,ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ResizeService,FilterService,SortService,PageService,ColumnMenuService } from '@syncfusion/ej2-angular-treegrid';
@Component({
selector: 'app-container',
template: `<ejs-treegrid #treegrid height='315' [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=100></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=130></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>`,
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 { 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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
SortService,
FilterService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Column menu events
During the column menu open and column menu click, the tree grid component triggers the two events as follows:
- The columnMenuOpen event triggers before the column menu opens.
- The columnMenuClick event triggers when the user clicks the column menu of the tree grid.
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ColumnMenuService } from '@syncfusion/ej2-angular-treegrid';
@Component({
selector: 'app-container',
template: `<ejs-treegrid #treegrid height='315' [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=130></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>`,
providers: [ColumnMenuService]
})
export class AppComponent implements OnInit {
public data: object[];
ngOnInit(): void {
this.data = sampleData;
}
columnMenuOpen() {
alert('columnMenuOpen event is Triggered');
}
columnMenuClick() {
alert('columnMenuClick event is Triggered');
}
}
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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
SortService,
FilterService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Custom column menu item
The Custom column menu items can be added by defining the columnMenuItems as a collection of the columnMenuItemModel.
Actions for these customized items can be defined in the columnMenuClick event.
import { Component, OnInit, ViewChild } 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({
selector: 'app-container',
template: `<ejs-treegrid #treegrid height='315' allowSorting='true' allowPaging='true' [dataSource]='data' [treeColumnIndex]='1' childMapping='subtasks' [sortSettings]='sortSettings' showColumnMenu="true" [columnMenuItems]='columnMenuItems'>
<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=160></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]
})
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) {
if (args.item.id === 'treegridclearsorting') {
this.treegrid.clearSorting();
}
}
ngOnInit(): void {
this.data = sampleData;
}
}
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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
SortService,
FilterService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Customize menu items for particular columns
Sometimes, you have a scenario that hides an item from the column menu for particular columns. In that case, 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.
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent, SortService, ColumnMenuService, PageService, FilterService } from '@syncfusion/ej2-angular-treegrid';
import { ColumnMenuItemModel, ColumnMenuOpenEventArgs, FilterSettingsModel } from '@syncfusion/ej2-angular-treegrid';
@Component({
selector: 'app-container',
template: `<ejs-treegrid #treegrid height='315' 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=160></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: ColumnMenuOpenEventArgs) {
for (const item of args.items) {
if (item.text === 'Filter' && args.column.field === 'taskName') {
(item as ColumnMenuItemModel).hide = true;
} else {
(item as ColumnMenuItemModel).hide = false;
}
}
}
ngOnInit(): void {
this.data = sampleData;
}
}
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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
SortService,
FilterService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
- You can disable column menu for a particular column by defining the columns.showColumnMenu as false.