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.
By default, the column menu appears for all columns. To disable the column menu for specific columns, use the columnMenu option of the column.
Configuring the Items
The column menu provides options for configuring its items.
The available predefined column menu items are:
- Sort item
- Filter item
- Lock (unlock) item
- Stick (unstick) item
- Set-column-position item
- Column-chooser item
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.
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.
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.
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.
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.
Column-Chooser Item
By default, the column-chooser item menu option is displayed. To hide it, use the columnChooser option of the column menu.
Excluding Columns from the Column-Chooser
To exclude a column from the column-chooser list, set the includeInChooser property of the column to false.
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:
- kendo-grid-columnmenu-sort
- kendo-grid-columnmenu-filter
- kendo-grid-columnmenu-lock
- kendo-grid-columnmenu-stick
- kendo-grid-columnmenu-position
- kendo-grid-columnmenu-chooser
You have to set the ColumnMenuService that is passed by the template to the
serviceinput of the predefined items.
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:
- Turn off the built-in column menu by setting
[columnMenu]="false"on the column. - Place the <kendo-grid-column-menu> component anywhere in the column header template.
- Bind the
columnproperty from the template context. - Optionally, bind the
sortandfilterproperties to the Grid state.
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.
