Grids
Example of Column Menu in ASP.NET Core Tree Grid Control
This sample demonstrates the default functionalities of the Column Menu. Click on multiple icon of each column to open the column menu.
Task ID | Task Name | Start Date | Duration | Progress |
|---|---|---|---|---|
| 1 | Planning | 3/2/2017 | 5 | 100 |
| 2 | Plan timeline | 3/2/2017 | 5 | 100 |
| 3 | Plan budget | 3/2/2017 | 5 | 100 |
| 4 | Allocate resources | 3/2/2017 | 5 | 100 |
| 5 | Planning complete | 7/2/2017 | 1 | 1 |
| 6 | Design | 10/2/2017 | 3 | 86 |
| 7 | Software Specification | 10/2/2017 | 3 | 60 |
| 8 | Develop prototype | 10/2/2017 | 3 | 100 |
| 9 | Get approval from customer | 2/13/2017 | 2 | 100 |
| 10 | Design complete | 2/14/2017 | 1 | 1 |
TreeGrid 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.
More information on the data binding can be found in this documentation section.