New to Kendo UI for Angular? Start a free 30-day trial

Column Menu

The Kendo UI Gantt for Angular enables you to show a menu with quick actions for its columns.

The column menu is a convenient way to apply sort order, to filter, and to control the visibility of the columns.

Basic Usage

To configure the column menu, use the columnMenu option.

By default, the column menu appears for all columns. To disable the column menu for specific columns, set the columnMenu option of the column to false.

The following example demonstrates a Gantt component with enabled column menu for all columns except for the first one.

Example
View Source
Edit In Stackblitz  
Change Theme:

Configuring the Items

The column menu provides options for configuring its items.

The available predefined column menu items are:

Sort Item

If sorting is enabled, the sort item is displayed for columns with a defined field configuration by default. To add the sort item without enabling sorting through clicking the column header, use the sort option of the column menu. To disable the sort item for individual columns, use their sortable option.

The following example demonstrates how to enable sorting only through the column menu for all columns except for the first one.

Example
View Source
Edit In Stackblitz  
Change Theme:

Filter Item

If filtering is enabled, the filter item is displayed for columns with a defined field configuration by default. To add the filter item without the need to enable filtering, use the filter option of the column menu. To disable the filter item for individual columns, use their filterable option.

The following example demonstrates how to enable filtering from the column menu for all columns except for the first one.

Example
View Source
Edit In Stackblitz  
Change Theme:

Column-Chooser Item

By default, the column-chooser item is enabled. To disable it, set the columnChooser option of the column menu to false. To exclude a single column from the column-chooser list, set the includeInChooser property of the column to false.

The following example demonstrates how to enable the column chooser for all columns except for the first one.

Example
View Source
Edit In Stackblitz  
Change Theme: