Column Menu in TypeScript Gantt Chart Control

18 Nov 20182 minutes to read

The column menu in the TypeScript Gantt Chart control offers built-in actions including sorting, filtering, column chooser, and autofit. When you click the column menu icon, a menu appears with these features.

To activate the column menu feature, set the showColumnMenu property to true in the Gantt configuration and inject the ColumnMenu service in the Gantt Chart control.

The following built-in column menu items are available:

Item Description
SortAscending Sorts the column in ascending order.
SortDescending Sorts the column in descending order.
AutoFit Adjusts the width of the current column.
AutoFitAll Adjusts the width of all columns.
ColumnChooser Allows toggling column visibility .
Filter Displays filter options based on filterSettings.type.
  • You can customize the default column menu items by defining columnMenuItems with only the required items.

Add a custom column menu item

The TypeScript Gantt Chart control allows adding custom items to the column menu using the columnMenuItems property, which accepts a set of columnMenuItemModel objects.

Define the behavior of custom items through the columnMenuClick event.

The following example demonstrates how to add a custom column menu item to clear the sorting in the Gantt chart.

Customize column menu items per column

Control the visibility of column menu items for specific columns by using the columnMenuOpen event. To hide an item, set args.hide to true for the target item.

The following example demonstrates hiding the Filter item when the column menu opens for the TaskName column.

Render nested column menu items

Extend the column menu in Gantt Chart control by adding nested items using the columnMenuItems property. This property accepts an array of built-in item names or custom objects to define additional actions.

The following example demonstrates how to configure columnMenuItems to include a nested menu.

Customize the column menu icon

Customize the default column menu icon in Gantt Chart control by overriding the .e-icons.e-columnmenu class using the content CSS property. This allows you to use a Unicode character or a custom icon font.

To customize the column menu icon, follow these steps:

1. Add custom CSS to override the default icon:

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

2. Import the required icon stylesheets (e.g., Material or Bootstrap5):

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