Column menu in Angular Grid component
2 Sep 202524 minutes to read
The column menu in the Syncfusion® Angular Grid component provides options to enable features such as sorting, grouping, 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 Grid 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. |
Group | Group the current column. |
Ungroup | Ungroup the current column. |
AutoFit | Autofit the current column. |
AutoFitAll | Autofit all columns. |
ColumnChooser | Choose the column visibility. |
Filter | Show the filter option as given in filterSettings.type |
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { SortService, GroupService, ColumnMenuService, PageService, FilterService } from '@syncfusion/ej2-angular-grids';
import { GroupSettingsModel, FilterSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
imports: [
GridModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' id="gridcomp" allowPaging='true' allowGrouping='true' allowSorting='true' showColumnMenu='true'
[groupSettings]='groupOptions' allowFiltering='true' [filterSettings]='filterSettings'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='140' textAlign="Right"></e-column>
<e-column field='CustomerID' headerText='Customer Name'></e-column>
<e-column field='Freight' headerText='Freight' format='C2' textAlign="Right"></e-column>
<e-column field='ShipCountry' headerText='Ship Country' [visible]='false' width='150'></e-column>
<e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
</e-columns>
</ejs-grid>
`,
providers: [SortService, GroupService, ColumnMenuService, PageService, FilterService]
})
export class AppComponent implements OnInit {
public data: object[]=[];
public groupOptions?: GroupSettingsModel;
public filterSettings?: FilterSettingsModel;
ngOnInit(): void {
this.data = data;
this.groupOptions = { showGroupedColumn: true };
this.filterSettings = { type: 'CheckBox' };
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
- The column menu can be disabled for a particular column by setting columns.showColumnMenu to false.
- The default items can be customized by defining the columnMenuItems with required items.
Prevent column menu for particular column
The Syncfusion Angular Grid component provides the ability to prevent the column menu from appearing for specific columns. This feature is useful when certain columns should not be customizable through the column menu.
To prevent the column menu for a particular column, set the showColumnMenu property to false for that specific column configuration. This disables the column menu options specifically for the designated column, while other columns retain the column menu functionality.
The following example demonstrates how to prevent the column menu for a specific column. In this example, the column menu is disabled for the OrderID column by setting the showColumnMenu
property to false:
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { SortService, GroupService, ColumnMenuService, PageService, FilterService } from '@syncfusion/ej2-angular-grids';
import { GroupSettingsModel, FilterSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
imports: [
GridModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' id="gridcomp" allowPaging='true' allowGrouping='true' allowSorting='true' showColumnMenu='true'
[groupSettings]='groupOptions' allowFiltering='true' [filterSettings]='filterSettings'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='90' textAlign="Right" [showColumnMenu]='false'></e-column>
<e-column field='CustomerID' headerText='Customer Name' width='100'></e-column>
<e-column field='Freight' headerText='Freight' format='C2' textAlign="Right" width='80'></e-column>
<e-column field='ShipCity' headerText='Ship City' width='100'></e-column>
</e-columns>
</ejs-grid>`,
providers: [SortService, GroupService, ColumnMenuService, PageService, FilterService]
})
export class AppComponent implements OnInit {
public data: object[]=[];
public groupOptions?: GroupSettingsModel;
public filterSettings?: FilterSettingsModel;
ngOnInit(): void {
this.data = data;
this.groupOptions = { showGroupedColumn: true };
this.filterSettings = { type: 'CheckBox' };
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Add custom column menu item
The custom column menu item feature allows addition of additional menu items to the column menu in the Syncfusion Grid. 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 Grid:
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, SortService, ColumnMenuService, PageService } from '@syncfusion/ej2-angular-grids';
import { MenuEventArgs } from '@syncfusion/ej2-navigations';
import { SortSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
imports: [
GridModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='data' id="gridcomp" allowPaging='true' allowSorting='true'
showColumnMenu='true' [sortSettings]='sortSettings' [columnMenuItems]='columnMenuItems' (columnMenuClick)='columnMenuClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='140' textAlign="Right"></e-column>
<e-column field='CustomerID' headerText='Customer Name' showInColumnChooser='false'></e-column>
<e-column field='Freight' headerText='Freight' format='C2' textAlign="Right"></e-column>
<e-column field='ShipCountry' headerText='Ship Country' [visible]='false' width='150'></e-column>
<e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
</e-columns>
</ejs-grid>`,
providers: [SortService, ColumnMenuService, PageService]
})
export class AppComponent implements OnInit {
@ViewChild('grid')
public grid?: GridComponent;
public data?: object[];
public columnMenuItems?: any = [{ text: 'Clear Sorting', id: 'gridclearsorting' }];
public sortSettings?: SortSettingsModel = {columns: [{direction: 'Ascending', field: 'OrderID'}]};
public columnMenuClick(args: MenuEventArgs) {
if ((args as any).item.id === 'gridclearsorting') {
(this.grid as any).clearSorting();
}
}
ngOnInit(): void {
this.data = data;
}
}
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 scenarios where specific items need to be hidden from the column menu for particular columns, set the columnMenuOpenEventArgs.hide property to true in the columnMenuOpen event.
The following example demonstrates hiding the Filter item in the column menu when it opens for the OrderID column:
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, SortService, GroupService, ColumnMenuService, PageService, FilterService } from '@syncfusion/ej2-angular-grids';
import { ColumnMenuItemModel, ColumnMenuOpenEventArgs, FilterSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
imports: [
GridModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='data' id="gridcomp" allowPaging='true' allowSorting='true' showColumnMenu='true'
[filterSettings]='filterSettings' (columnMenuOpen)='columnMenuOpen($event)' [allowFiltering]='true' [allowGrouping]='true'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='140' textAlign="Right"></e-column>
<e-column field='CustomerID' headerText='Customer Name' showInColumnChooser='false'></e-column>
<e-column field='Freight' headerText='Freight' format='C2' textAlign="Right"></e-column>
<e-column field='ShipCountry' headerText='Ship Country' [visible]='false' width='150'></e-column>
<e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
</e-columns>
</ejs-grid>
`,
providers: [SortService, ColumnMenuService, PageService, GroupService, ColumnMenuService, FilterService]
})
export class AppComponent implements OnInit {
@ViewChild('grid')
public grid?: GridComponent;
public data?: object[];
public filterSettings: FilterSettingsModel = { type: 'Menu' };
public columnMenuOpen(args: ColumnMenuOpenEventArgs) {
for (const item of (args as any).items) {
if (item.text === 'Filter' && (args as any).column.field === 'OrderID') {
(item as ColumnMenuItemModel).hide = true;
}
}
}
ngOnInit(): void {
this.data = data;
}
}
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 grid 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.
Here is an example of how to configure the columnMenuItems
property to include a nested menu:
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { SortService, GroupService, ColumnMenuService, PageService, FilterService } from '@syncfusion/ej2-angular-grids';
import { GroupSettingsModel, FilterSettingsModel, ColumnMenuClickEventArgs } from '@syncfusion/ej2-angular-grids';
@Component({
imports: [
GridModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' id='gridcomp' allowPaging='true' allowGrouping='true' allowSorting='true' showColumnMenu='true'
[groupSettings]='groupOptions' allowFiltering='true' [filterSettings]='filterSettings' [columnMenuItems]='columnMenuItems'
(columnMenuClick)='columnMenuClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='100' textAlign='Right'></e-column>
<e-column field='CustomerID' headerText='Customer Name' textAlign='Right' width='150'></e-column>
<e-column field='Freight' headerText='Freight' format='C2' textAlign='Right' width='150'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
<e-column field='ShipCity' headerText='Ship City' width='150' ></e-column>
</e-columns>
</ejs-grid>
`,
providers: [SortService, GroupService, ColumnMenuService, PageService, FilterService]
})
export class AppComponent implements OnInit {
public data?: object[];
public groupOptions?: GroupSettingsModel;
public filterSettings?: FilterSettingsModel;
public columnMenuItems: object = [
'SortAscending',
'SortDescending',
'Group',
'Ungroup',
'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 = data;
this.groupOptions = { showGroupedColumn: true };
this.filterSettings = { type: 'CheckBox' };
}
public columnMenuClick(args: ColumnMenuClickEventArgs) {
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));
Customize the icon of column menu
To customize the column menu icon, override the default 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, the icon displayed in the column menu can be changed.
To customize the column menu icon, follow these steps:
- Add the necessary CSS code to override the default grid class:
.e-grid .e-columnheader .e-icons.e-columnmenu::before {
content: "\e99a";
}
- 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" />
Here is an example that demonstrates how to customize the column menu icon in the Syncfusion Grid:
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit } from '@angular/core';
import { ColumnMenuService } from '@syncfusion/ej2-angular-grids';
import { data } from './datasource';
@Component({
imports: [
GridModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='data' [height]='315' showColumnMenu='true' >
<e-columns>
<e-column field='OrderID' headerText='Order ID' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' format='C2' width=90></e-column>
<e-column field='ShipName' headerText='Ship Name' width=120></e-column>
</e-columns>
</ejs-grid>`,
providers: [ColumnMenuService]
})
export class AppComponent implements OnInit {
public data?: object[];
ngOnInit(): void {
this.data = data;
}
}
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 Syncfusion Angular Grid 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 user interactions with the column menu.
-
The columnMenuOpen event triggers before the column menu opens.
-
The columnMenuClick event triggers when the user clicks the column menu of the grid.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { SortService, GroupService, ColumnMenuService, PageService, FilterService } from '@syncfusion/ej2-angular-grids';
import { GroupSettingsModel, FilterSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
imports: [
GridModule
],
standalone: true,
selector: 'app-root',
template: `<p id='message'>{{ message }}</p><ejs-grid [dataSource]='data' id="gridcomp" allowPaging='true' allowGrouping='true' allowSorting='true' showColumnMenu='true'
[groupSettings]='groupOptions' allowFiltering='true' [filterSettings]='filterSettings'
(columnMenuOpen)="columnMenuOpen()" (columnMenuClick)="columnMenuClick()">
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='140' textAlign="Right"></e-column>
<e-column field='CustomerID' headerText='Customer Name'></e-column>
<e-column field='Freight' headerText='Freight' format='C2' textAlign="Right"></e-column>
<e-column field='ShipCountry' headerText='Ship Country' [visible]='false' width='150'></e-column>
<e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
</e-columns>
</ejs-grid>`,
providers: [SortService, GroupService, ColumnMenuService, PageService, FilterService]
})
export class AppComponent implements OnInit {
public data?: object[];
public groupOptions?: GroupSettingsModel;
public filterSettings?: FilterSettingsModel;
public message?: string;
ngOnInit(): void {
this.data = data;
this.groupOptions = { showGroupedColumn: true };
this.filterSettings = { type: 'CheckBox' };
}
columnMenuOpen() {
this.message = `columnMenuOpen event triggered`;
}
columnMenuClick() {
this.message = `columnMenuClick event triggered`;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));