Blazor Tree Grid Example - Column Menu
This sample demonstrates the default functionalities of the Column Menu. Click on multiple icon of each column to open the column menu.
Task ID Press Enter to sort. Press Alt Down to open Column Menu | Task Name Press Enter to sort. Press Alt Down to open Column Menu | Start Date Press Enter to sort. Press Alt Down to open Column Menu | End Date Press Enter to sort. Press Alt Down to open Column Menu | Duration Press Enter to sort. Press Alt Down to open Column Menu | Priority Press Enter to sort. Press Alt Down to open Column Menu |
|---|
| 1 | Parent task 1 | 8/28/2022 | 9/15/2027 | 34 | Critical |
| 2 | Child task 1 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 3 | Child task 2 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 4 | Sub task 1 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 5 | Sub task 2 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 6 | Sub task 3 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 7 | Parent task 2 | 8/29/2022 | 9/16/2027 | 52 | Low |
| 8 | Child task 3 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 9 | Child task 4 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 10 | Sub task 4 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 11 | Sub task 5 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 12 | Sub task 6 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 13 | Parent task 3 | 8/30/2022 | 9/17/2027 | 25 | High |
| 14 | Child task 5 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 15 | Child task 6 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 16 | Sub task 7 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 17 | Sub task 8 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 18 | Sub task 9 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 19 | Parent task 4 | 8/31/2022 | 9/18/2027 | 52 | Low |
| 20 | Child task 7 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 21 | Child task 8 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 22 | Sub task 10 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 23 | Sub task 11 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 24 | Sub task 12 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 25 | Parent task 5 | 9/1/2022 | 9/19/2027 | 14 | Critical |
| 26 | Child task 9 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 27 | Child task 10 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 28 | Sub task 13 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 29 | Sub task 14 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 30 | Sub task 15 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 31 | Parent task 6 | 9/2/2022 | 9/20/2027 | 52 | High |
| 32 | Child task 11 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 33 | Child task 12 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 34 | Sub task 16 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 35 | Sub task 17 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 36 | Sub task 18 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 37 | Parent task 7 | 9/3/2022 | 9/21/2027 | 34 | Critical |
| 38 | Child task 13 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 39 | Child task 14 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 40 | Sub task 19 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 41 | Sub task 20 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 42 | Sub task 21 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 43 | Parent task 8 | 9/4/2022 | 9/22/2027 | 52 | Low |
| 44 | Child task 15 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 45 | Child task 16 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 46 | Sub task 22 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 47 | Sub task 23 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 48 | Sub task 24 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 49 | Parent task 9 | 9/5/2022 | 9/23/2027 | 25 | High |
| 50 | Child task 17 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 51 | Child task 18 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 52 | Sub task 25 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 53 | Sub task 26 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 54 | Sub task 27 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 55 | Parent task 10 | 9/6/2022 | 9/24/2027 | 52 | Low |
| 56 | Child task 19 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 57 | Child task 20 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 58 | Sub task 28 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 59 | Sub task 29 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 60 | Sub task 30 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 61 | Parent task 11 | 9/7/2022 | 9/25/2027 | 34 | Critical |
| 62 | Child task 21 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 63 | Child task 22 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 64 | Sub task 31 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 65 | Sub task 32 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 66 | Sub task 33 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 67 | Parent task 12 | 9/8/2022 | 9/26/2027 | 52 | High |
| 68 | Child task 23 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 69 | Child task 24 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 70 | Sub task 34 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 71 | Sub task 35 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 72 | Sub task 36 | 8/31/2022 | 7/1/2024 | 67 | Normal |
The column menu has an integrated option to interact with the features like sorting, filtering, column chooser, and autoFit. This feature 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- Chooses visibility of columns.Filter- Filter the current column.
More information on the Column Menu can be found in this documentation section.