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 disable 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 disable the filter item for individual columns, use their filterable option.

Example
View Source
Edit In Stackblitz  
Change Theme:

Lock Item

Bu default, the lock item is disabled. To add the lock item, use the lock option of the column menu. To disable 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:

Column-Chooser Item

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

Example
View Source
Edit In Stackblitz  
Change Theme:

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:

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:

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 kendo-grid-columnmenu-sort, kendo-grid-columnmenu-filter, kendo-grid-columnmenu-lock, and kendo-grid-columnmenu-chooser 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.