Example of Context Menu in Blazor Gantt Chart Component
This sample demonstrates the usage of context menu in Gantt component. Context menu allows you to perform quick actions by right clicking anywhere on the Gantt.
ID | Name | Start Date | End Date | Duration | Progress | Dependency | Notes |
|---|
| 1 | Planning and Permits | 4/2/2025 | 4/10/2025 | 7 days | 100 | ||
| 2 | Site Evaluation | 4/2/2025 | 4/3/2025 | 2 days | 100 | ||
| 3 | Obtain Permits | 4/4/2025 | 4/8/2025 | 3 days | 100 | 2FS | |
| 4 | Finalize Planning | 4/9/2025 | 4/10/2025 | 2 days | 100 | 3FS | |
| 5 | Site Preparation | 4/10/2025 | 4/30/2025 | 14 days | 100 | ||
| 6 | Site Clearing | 4/10/2025 | 4/10/2025 | 0 days | 100 | 4FS | |
| 7 | Grading and Excavation | 4/11/2025 | 4/15/2025 | 3 days | 100 | 6FS | |
| 8 | Foundation Work | 4/16/2025 | 4/21/2025 | 4 days | 100 | 7FS | |
| 9 | Foundation and Basement | 4/22/2025 | 4/30/2025 | 7 days | 100 | ||
| 10 | Pour Foundation | 4/22/2025 | 4/23/2025 | 2 days | 100 | 8FS | |
| 11 | Cure Foundation | 4/24/2025 | 4/25/2025 | 2 days | 100 | 10FS | |
| 12 | Basement Walls | 4/28/2025 | 4/30/2025 | 3 days | 100 | 11FS | |
| 13 | Framing | 5/1/2025 | 5/8/2025 | 6 days | 100 | ||
| 14 | Frame Floors | 5/1/2025 | 5/2/2025 | 2 days | 100 | 12FS | |
| 15 | Frame Walls | 5/5/2025 | 5/6/2025 | 2 days | 100 | 14FS | |
| 16 | Install Trusses | 5/7/2025 | 5/8/2025 | 2 days | 100 | 15FS | |
| 17 | Roofing | 5/9/2025 | 5/13/2025 | 3 days | 100 | 16FS | |
| 18 | Mechanical, Electrical, Plumbing | 5/14/2025 | 5/26/2025 | 9 days | 50 | ||
| 19 | HVAC Installation | 5/14/2025 | 5/16/2025 | 3 days | 100 | 17FS | |
| 20 | Plumbing Installation | 5/19/2025 | 5/21/2025 | 3 days | 50 | 19FS | |
| 21 | Electrical Installation | 5/22/2025 | 5/26/2025 | 3 days | 0 | 20FS | |
| 22 | Interior Finishing | 5/27/2025 | 6/20/2025 | 19 days | 0 | 21FS | |
| 23 | Insulation and Drywall | 5/27/2025 | 6/2/2025 | 5 days | 0 | 21FS | |
| 24 | Interior Painting | 6/3/2025 | 6/6/2025 | 4 days | 0 | 23FS | |
| 25 | Flooring Installation | 6/9/2025 | 6/12/2025 | 4 days | 0 | 24FS | |
| 26 | Cabinet and Fixture Setup | 6/13/2025 | 6/17/2025 | 3 days | 0 | 25FS | |
| 27 | Final Fixture Installation | 6/18/2025 | 6/20/2025 | 3 days | 0 | 26FS | |
| 28 | Exterior Finishing | 6/23/2025 | 6/26/2025 | 4 days | 0 | 27FS | |
| 29 | Landscaping | 6/27/2025 | 7/3/2025 | 5 days | 0 | 28FS | |
| 30 | Final Inspection | 7/4/2025 | 7/8/2025 | 3 days | 0 | 29FS | |
| 31 | Correction of Issues | 7/9/2025 | 7/11/2025 | 3 days | 0 | 30FS | |
| 32 | Final Walkthrough | 7/14/2025 | 7/15/2025 | 2 days | 0 | 31FS | |
| 33 | Handover Preparation | 7/16/2025 | 7/18/2025 | 3 days | 0 | 32FS | |
| 34 | Client Handover | 7/21/2025 | 7/22/2025 | 2 days | 0 | 33FS | |
| 35 | Warranty Period Begins | 7/23/2025 | 7/24/2025 | 2 days | 0 | 34FS | |
| 36 | Routine Maintenance Visits | 7/25/2025 | 8/7/2025 | 10 days | 0 | 35FS | |
| 37 | First Year Warranty Review | 8/8/2025 | 8/14/2025 | 5 days | 0 | 36FS | |
| 38 | Final Project Documentation | 8/15/2025 | 8/19/2025 | 3 days | 0 | 37FS | |
| 39 | Celebrate Project Completion | 8/20/2025 | 8/22/2025 | 3 days | 0 | 38FS | |
| 40 | Begin Next Project Planning | 8/25/2025 | 8/28/2025 | 4 days | 0 | 39FS |
Mar 25, 2025 | Mar 30, 2025 | Apr 06, 2025 | Apr 13, 2025 | Apr 20, 2025 | Apr 27, 2025 | May 04, 2025 | May 11, 2025 | May 18, 2025 | May 25, 2025 | Jun 01, 2025 | Jun 08, 2025 | Jun 15, 2025 | Jun 22, 2025 | Jun 29, 2025 | Jul 06, 2025 | Jul 13, 2025 | Jul 20, 2025 | Jul 27, 2025 | Aug 03, 2025 | Aug 10, 2025 | Aug 17, 2025 | Aug 24, 2025 | Aug 31, 2025 |
T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S |
In this demo, default context menu items are rendered using EnableContextMenu.
Following items are shown while right click on grid header:
AutoFitAll- Auto fit all columns.AutoFit- Auto fit the current column.SortAscending- Sort the current column in ascending order.SortDescending- Sort the current column in descending order.
Following items are shown while right click on both grid and chart content of Gantt:
TaskInformation- Edit the current record.DeleteTask- Delete the current record.Save- Save the edited record. It is shown when a cell is in edit mode.Cancel- Cancel the edited state. It is shown when a cell is in edit mode.DeleteDependency- Delete the dependency of the current record.Convert-Convert the normal task into a milestone task and vice versa.AddAbove- Add a new row above the selected rowBelow- Add a new row below the selected rowChild- Add a new row as a child to the selected rowMilestone- Add a milestone task below to the selected row
You can configure the default and custom menu items in the context menu using the ContextMenuItems property. More information about CRUD operations and managing tasks can be found in this documentation section.