Angular TreeList Column Menu
The TreeList allows 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 TreeList data, toggle the locked 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 TreeList. 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:
- Sort item—Displays Sort Ascending and Sort Descending buttons, which apply the corresponding sorting to the current column. If the TreeList is
sortable
, this option defaults totrue
for model-bound columns. - Filter item—Displays a Filter button and an expandable filter menu. If the TreeList is
filterable
, this option defaults totrue
for model-bound columns. - Lock and unlock items—Determines if the users can lock and unlock the column through the column menu. Defaults to
false
. - Column Chooser item—Displays a Columns button and an expandable checkbox-style menu with all columns. This menu allows the users quickly show or hide the TreeList columns. Defaults to
true
.
Sort Item
The sort item of the column menu is displayed by default if the following conditions are met:
- The
sortable
functionality of the TreeList is enabled. - The current column binds to a field from the TreeList 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
filterable
functionality of the TreeList is enabled. - The current column binds to a field from the TreeList 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.
The following example demonstrates how to lock and unlock columns from 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
.
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 thekendoTreeListColumnMenuTemplate
directive inside thekendo-treelist
component. - Specific Column—Nest the template inside the column component tag, for example, inside
kendo-treelist-column
.
Before using the predefined column menu items inside the template, set ColumnMenuService that is passed by the template to the
service
input of the column menu item.
To include the predefined column menu items in the template, add the following components:
kendo-treelist-columnmenu-sort
kendo-treelist-columnmenu-filter
kendo-treelist-columnmenu-lock
kendo-treelist-columnmenu-chooser
The following example demonstrates how to define a custom column menu template.
Customizing the Position
By default, the column menu renders as the last item in the header cell. To change the position of the menu icon in the header, follow the steps below:
- Disable the built-in column menu by setting
columnMenu
on the respective column tofalse
. - Nest an
<ng-template>
tag inside the column and apply aHeaderTemplateDirective
directive to it. - Place a
ColumnMenu
component anywhere in the header template by nesting a<kendo-treelist-column-menu>
tag inside. - Bind the
column
property of theColumnMenu
component to thecolumn
field that is passed by the template. - Optionally, bind the
sort
andfilter
properties of theColumnMenu
component to the respective TreeList state.
When used as a standalone component, the
ColumnMenu
ignores the sortable and filterable settings of the TreeList. 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-treelist-column-chooser>
tag inside the TreeList toolbar
.