Example of Column Menu in Angular Tree Grid Component

This sample demonstrates the default functionalities of the Column Menu. Click on multiple icon of each column to open the column menu.

1
Planning
2/3/2017
Normal
2
Plan timeline
2/3/2017
Normal
3
Plan budget
2/3/2017
Low
4
Allocate resources
2/3/2017
Critical
5
Planning complete
2/7/2017
Low
6
Design
2/10/2017
High
7
Software Specification
2/10/2017
Normal
8
Develop prototype
2/10/2017
Critical
9
Get approval from customer
2/13/2017
Low
10
Design Documentation
2/13/2017
High
1 of 4 pages (36 items)
Description

Tree Grid has an option to show column menu while click on multiple icon of each column. The column menu has an integrated option to interact the features like sorting, filtering, column chooser and and autoFit. This features can be enabled by defining the showColumnMenu as true. The default items are

  • SortAscending - Sort the current column in ascending order.
  • SortDescending - Sort the current column in descending order.
  • AutoFit - Auto fit current column.
  • AutoFitAll - Auto fit all columns.
  • ColumnChooser - Choose the column visibility.
  • Filter - Filter option is shown to filter the current column.

In this demo, Column Menu feature has enabled by defining showColumnMenu as true with sorting, filtering, column chooser and autoFit options.

Injecting Module:

Tree Grid component features are segregated into individual feature-wise modules. To use Column Menu feature, we need to inject ColumnMenuService into the @NgModule.providers section.

More information about Column Menu can be found in this documentation section.