Angular Data Grid Column Menu
The Angular Grid enables you to show a menu with quick actions for its columns.
The column menu provides a convenient way to apply data processing features to the specified columns. The user can sort and filter the grid data, toggle the locked and sticky state of the columns, or change their visibility. You can customize the order of the menu items and create custom controls as necessary.
To display the column menu on each column, set the columnMenu option of the Grid. The property accepts both boolean and ColumnMenuSettings parameters. The default value of the columnMenu option is false.
The following example demonstrates a basic column menu in action.
Configuring the Column Menu
To specify which items to appear in the column menu, pass a ColumnMenuSettings parameter object to the columnMenu option.
The available predefined column menu items are:
- View—Displays the column menu items as a
listor in atabbedview. Defaults tolist. - Sort item—Displays Sort Ascending and Sort Descending buttons, which apply the corresponding sorting to the current column. If the Grid is
sortable, this option defaults totruefor model-bound columns. - Filter item—Displays a Filter button and an expandable filter menu. If the Grid is
filterable, this option defaults totruefor model-bound columns. - Lock and unlock items—Determines if the users can lock and unlock the column through the column menu. Defaults to
false. - Stick and unstick items—Determines if the users can enable and disable sticky columns through the column menu. Defaults to
false. - Set-column-position item—Displays the Lock/Unlock and Stick/Unstick buttons under an expandable Set Column Position item instead on a root level. Defaults to
false. - Column Chooser item—Displays a Columns button and an expandable checkbox-style menu with all columns. It enables users to quickly show or hide the Grid columns. Defaults to
true.
Column Menu Layout
To display the column menu items into tabs, set the view option of the ColumnMenuSettings to tabbed:
<kendo-grid ...[columnMenu]="{ view: 'tabbed' }"></kendo-grid>When multiple column menu items are enabled, they are distributed into three tabs:
- Filter tab—Includes the Filter item only.
- General tab—Includes the sort, lock, stick and resize items.
- Columns tab—Includes the Column chooser item only.
The following example demonstrates the tabbed layout of the column menu when all items are enabled.
Sort Item
The sort item of the column menu is displayed by default if the following conditions are met:
- The
sortablefunctionality of the Grid is enabled. - The current column is bound to a field from the Grid model.
To add the sort item without enabling sorting, manually set the sort option of the ColumnMenuSettings to true. To hide the sort item for individual columns, set the sortable option of the column to false.
Filter Item
The filter item of the column menu is displayed by default if the following conditions are met:
- The
filterablefunctionality of the Grid is enabled. - The current column is bound to a field from the Grid model.
To add the filter item without enabling filtering, set the filter option of the ColumnMenuSettings to true. To hide the filter item for individual columns, set the filterable option of the column to false.
Lock and Unlock Items
The lock and unlock items of the column menu are not displayed by default. To add them, set the lock option of the ColumnMenuSettings to true. To hide the lock and unlock items for individual columns, set the lockable option of the corresponding column to false.
The prerequisites and limitations of the locked columns apply to the lock item too.
The following example demonstrates how to lock and unlock columns from the column menu.
Stick and Unstick Items
The stick and unstick items of the column menu are not displayed by default. To add them, set the stick option of the ColumnMenuSettings to true. To hide the stick and unstick items for individual columns, set the stickable option of the corresponding column to false.
The prerequisites and limitations of the sticky columns apply to the stick item too.
The following example demonstrates how to allow users to set the sticky state of Grid columns through the column menu.
Set-Column-Position Item
By default, the lock and stick items are displayed on the root level of the column menu. To nest them in an expandable Set Column Position sub-menu, set the setColumnPosition of the ColumnMenuSettingsto true.
The prerequisites and limitations of the sticky and locked columns apply to the set-column-position item too.
The following example demonstrates how to add the set-column-position item to the column menu.
Column Chooser Item
The column chooser item allows you to dynamically show and hide columns through a dedicated sub-menu with checkboxes. The column menu displays a column chooser item by default. To hide it, set the columnChooser option of the ColumnMenuSettings to false.
The following example demonstrates the column chooser item.
To exclude a column from the column chooser checkbox list, set the includeInChooser property of the respective column to false.
AutoSize-Column Item
The autosize-column item allows you to resize the column to the minimum possible width so that it fits the widest header or cell content without wrapping. The option is hidden by default. To display it you must set the following options:
resizableproperty of the Grid totrue.autoSizeColumnoption of theColumnMenuSettingstotrue.
Using autosize-column item option alongside the virtual columns functionality is not supported.
The following example demonstrates how to add the autosize-column item to the column menu.
AutoSize-All-Columns Item
The autosize-all-columns item allows you to resize all columns to the minimum possible width so that they fit the widest header or cell content without wrapping. The option is hidden by default. To display it you must set the following options:
resizableproperty of the Grid totrue.autoSizeAllColumnsoption of theColumnMenuSettingstotrue.
Using autosize-all-columns item option alongside the virtual columns functionality is not supported.
The following example demonstrates how to add the autosize-all-columns item to the column menu.
Expandable Menu Items
By default, the column chooser, filter, and set-column-position column menu items are initially collapsed. To change this behavior and make them initially expanded, set the expanded property of the ExpandableColumnMenuItem object to true.
Customizing the Content
You can customize the content of the column menu through templates. This approach allows you to specify a column menu template for:
- All Columns—Nest an
<ng-template>tag with thekendoGridColumnMenuTemplatedirective inside thekendo-gridcomponent. - Specific Column—Nest the template inside the column component tag, for example, inside
kendo-grid-column.
Before using the predefined column menu items inside the template, set the
ColumnMenuServicethat is passed by the template to theserviceinput of the column menu item.
To include the predefined column menu items in the template, add the following components:
kendo-grid-columnmenu-sortkendo-grid-columnmenu-filterkendo-grid-columnmenu-lockkendo-grid-columnmenu-stickkendo-grid-columnmenu-positionkendo-grid-columnmenu-chooserkendo-grid-columnmenu-autosize-columnkendo-grid-columnmenu-autosize-all-columns
To implement an entirely custom column menu item and include it in the template, use the kendo-grid-columnmenu-item component.
To enable the built-in keyboard navigation for column menu items used inside the template, set the kendoGridColumnMenuItem directive to the reference of the component:
<ng-template kendoGridColumnMenuTemplate let-service="service" let-column="column">
<kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" [service]="service">
</kendo-grid-columnmenu-sort>
</ng-template>The following example demonstrates how to define a custom column menu template.
Customizing the Position
By default, the Column Menu is rendered as the last item in the header cell. To change the position of the menu icon in the header:
- Disable the built-in column menu by setting
columnMenuon the respective column tofalse. - Nest an
<ng-template>tag inside the column and apply akendoGridHeaderTemplatedirective to it. - Place a
ColumnMenucomponent anywhere in the header template by nesting a<kendo-grid-column-menu>tag inside. - Bind the
columnproperty of theColumnMenucomponent to thecolumnfield that is passed by the template. - Optionally, bind the
sortandfilterproperties of theColumnMenucomponent to the respective Grid state.
When used as a standalone component, the
ColumnMenuignores thesortableandfilterablesettings of the Grid. You must configure the respective column menu items through the component properties instead.
The following example demonstrates the described approach for changing the column menu position inside the cell header template.
Hiding the Column Menu per Column
By default, the column menu appears for all columns. To disable the column menu for specific columns, use the columnMenu option of the respective column and set it to false.
Using 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, use the ColumnChooser component separately by nesting a <kendo-grid-column-chooser> tag inside the Grid toolbar.