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
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.
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.
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.
Column-Chooser Item
By default, the column-chooser item is enabled. To disable it, use the columnChooser option of the column menu.
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.
To exclude a column from the column-chooser list, set the includeInChooser property of the column to false.
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
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.
