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

Column Menu

The Kendo UI Grid 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, filter and toggle the locked state of the columns, and add custom column actions.

Basic Usage

To configure the column menu, use the columnMenu option.

Example
View Source
Edit In Stackblitz  
Change Theme:

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

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 fields by default. To add the sort item without enabling sorting, use the sort option of the column menu. To hide the sort item for individual columns, use their sortable option.

Example
View Source
Edit In Stackblitz  
Change Theme:

Filter Item

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

Example
View Source
Edit In Stackblitz  
Change Theme:

Lock Item

By default, the lock item menu option is not displayed. To add the lock item, use the lock option of the column menu. To hide the lock item for individual columns, use their lockable option.

The prerequisites and limitations of the locked columns apply to the lock item.

Example
View Source
Edit In Stackblitz  
Change Theme:

Stick Item

By default, the stick item menu option is not displayed. To add the stick item, use the stick option of the column menu. To hide the stick item for individual columns, use their stickable option.

The prerequisites and limitations of the sticky columns apply to the stick item.

The following example demonstrates how to enable setting the sticky state of Grid columns through the column menu.

Example
View Source
Edit In Stackblitz  
Change Theme:

Set Column Position Item

The lock and stick items can be displayed either as root-level column menu items, or as sub-menu items in a dedicated expandable set-column-position item.

By default, the set-column-position item menu option is not displayed. To add the item to the menu, use the setColumnPosition option of the column menu.

The prerequisites and limitations of the sticky and locked columns apply to the set-column-position item.

The following example demonstrates how to add the item to the column menu.

Example
View Source
Edit In Stackblitz  
Change Theme:

Column-Chooser Item

By default, the column-chooser item menu option is displayed. To hide it, use the columnChooser option of the column menu.

Example
View Source
Edit In Stackblitz  
Change Theme:

Excluding Columns from the Column-Chooser

To exclude a column from the column-chooser list, set the includeInChooser property of the column to false.

Example
View Source
Edit In Stackblitz  
Change Theme:

Expandable Menu Items

The column-chooser, filter, and set-column-position menu items are expandable. By default, they are initially collapsed. To customize the initial expanded state of the items, use the ExpandableColumnMenuItem expanded option.

    <kendo-grid
        [columnMenu]="{
            filter: {expanded: true},
            stick: true,
            lock: true,
            setColumnPosition: {expanded: true}
        }"

Customizing the Content

The Grid allows you to customize the content of the column menu by using a template. To specify a template for all columns, nest an <ng-template> tag with the kendoGridColumnMenuTemplate directive inside the kendo-grid component. To specify a template for a specific column, nest the template inside the Column component.

You can also use the predefined column items inside the template by adding the following components:

You have to set the ColumnMenuService that is passed by the template to the service input of the predefined items.

Example
View Source
Edit In Stackblitz  
Change Theme:

Customizing the Position

By default, the Column Menu will be rendered as a last item in the header cell. To change the position of the menu icon in the header:

  1. Turn off the built-in column menu by setting [columnMenu]="false" on the column.
  2. Place the <kendo-grid-column-menu> component anywhere in the column header template.
  3. Bind the column property from the template context.
  4. Optionally, bind the sort and filter properties to the Grid state.
Example
View Source
Edit In Stackblitz  
Change Theme:

When used as a standalone component, the Column Menu ignores the sortable and filterable settings on the Grid. The menu items are configured through the component properties instead.

Standalone Column-Chooser

You can use the column-chooser item outside the column menu.

To allow the user to show and hide the columns without including the column-chooser item in the column menu, add the kendo-grid-column-chooser component inside the toolbar of the Kendo UI Grid for Angular.

Example
View Source
Edit In Stackblitz  
Change Theme: