Example of Context Menu in Angular Gantt Component

This sample demonstrates the various phases involved in constructing a residential house, from testing the soil to handing over the fully constructed property to the owner. This also demonstrates the usage of default and custom context menu in Gantt component.

1
Planning and Permits
Apr 02, 20257 days100
2
Site Evaluation
Apr 02, 20252 days100
3
Obtain Permits
Apr 04, 20253 days1002FS
4
Finalize Planning
Apr 09, 20252 days1003FS
5
Site Preparation
Apr 10, 202514 days100
6
Site Clearing
Apr 10, 20250 days1004FS
7
Grading and Excavation
Apr 11, 20253 days1006FS
8
Foundation Work
Apr 16, 20254 days1007FS
9
Foundation and Basement
Apr 22, 20257 days100
10
Pour Foundation
Apr 22, 20252 days1008FS
11
Cure Foundation
Apr 24, 20252 days10010FS
12
Basement Walls
Apr 28, 20253 days10011FS
13
Framing
May 01, 20256 days100
14
Frame Floors
May 01, 20252 days10012FS
15
Frame Walls
May 05, 20252 days10014FS
16
Install Trusses
May 07, 20252 days10015FS
17
Roofing
May 09, 20253 days10016FS
18
Mechanical, Electrical, Plumbing
May 14, 20259 days50
19
HVAC Installation
May 14, 20253 days10017FS
20
Plumbing Installation
May 19, 20253 days5019FS
21
Electrical Installation
May 22, 20253 days020FS
22
Interior Finishing
May 27, 202519 days021FS
23
Insulation and Drywall
May 27, 20255 days021FS
24
Interior Painting
Jun 03, 20254 days023FS
25
Flooring Installation
Jun 09, 20254 days024FS
26
Cabinet and Fixture Setup
Jun 13, 20253 days025FS
27
Final Fixture Installation
Jun 18, 20253 days026FS
28
Exterior Finishing
Jun 23, 20254 days027FS
29
Landscaping
Jun 27, 20255 days028FS
30
Final Inspection
Jul 04, 20253 days029FS
31
Correction of Issues
Jul 09, 20253 days030FS
32
Final Walkthrough
Jul 14, 20252 days031FS
33
Handover Preparation
Jul 16, 20253 days032FS
34
Client Handover
Jul 21, 20252 days033FS
35
Warranty Period Begins
Jul 23, 20252 days034FS
36
Routine Maintenance Visits
Jul 25, 202510 days035FS
37
First Year Warranty Review
Aug 08, 20255 days036FS
38
Final Project Documentation
Aug 15, 20253 days037FS
39
Celebrate Project Completion
Aug 20, 20253 days038FS
40
Begin Next Project Planning
Aug 25, 20254 days039FS
Planning and Permits
Martin Tamer , Rose Fuller , Margaret Buchanan
Site Evaluation
Martin Tamer
Obtain Permits
Rose Fuller , Fuller King
Finalize Planning
Margaret Buchanan
Site Preparation
Davolio Fuller , Van Jack , Construction Supervisor
Site Clearing
Davolio Fuller
Grading and Excavation
Van Jack , Fuller Buchanan
Foundation Work
Construction Supervisor
Foundation and Basement
Jack Davolio , Tamer Vinet , Vinet Fuller
Pour Foundation
Jack Davolio
Cure Foundation
Tamer Vinet
Basement Walls
Vinet Fuller , Bergs Anton
Framing
Bergs Anton , Construction Supervisor , Martin Tamer
Frame Floors
Bergs Anton
Frame Walls
Construction Supervisor
Install Trusses
Martin Tamer , Rose Fuller
Roofing
Margaret Buchanan , Fuller King
Mechanical, Electrical, Plumbing
Davolio Fuller , Van Jack , Fuller Buchanan
HVAC Installation
Davolio Fuller
Plumbing Installation
Van Jack
Electrical Installation
Fuller Buchanan , Jack Davolio
Interior Finishing
Tamer Vinet , Vinet Fuller , Bergs Anton
Insulation and Drywall
Tamer Vinet
Interior Painting
Vinet Fuller
Flooring Installation
Bergs Anton
Cabinet and Fixture Setup
Construction Supervisor
Final Fixture Installation
Martin Tamer
Exterior Finishing
Rose Fuller , Margaret Buchanan
Landscaping
Fuller King , Davolio Fuller
Final Inspection
Van Jack
Correction of Issues
Fuller Buchanan , Jack Davolio
Final Walkthrough
Tamer Vinet
Handover Preparation
Vinet Fuller
Client Handover
Bergs Anton
Warranty Period Begins
Construction Supervisor
Routine Maintenance Visits
Martin Tamer , Rose Fuller
First Year Warranty Review
Margaret Buchanan , Fuller King
Final Project Documentation
Davolio Fuller
Celebrate Project Completion
Van Jack , Fuller Buchanan
Begin Next Project Planning
Jack Davolio , Tamer Vinet
Source: https://en.wikipedia.org/
Description

Gantt has an option to show the context menu while performing right click on it. You can configure the default and custom menu items in the context menu using the contextMenuItems property. Each menu item will be displayed contextually based on its target. In this demo we have rendered following default and custom menu items

Default items:

  • AutoFitAll - Auto fit all columns.
  • AutoFit - Auto fit the current column.
  • TaskInformation - Edit the current record.
  • Indent - Indent the selected record to one level
  • Outdent - Outdent the selected record to one level
  • DeleteTask - Delete the current record.
  • Save - Save the edited record.
  • Cancel - Cancel the edited state.
  • SortAscending - Sort the current column in ascending order.
  • SortDescending - Sort the current column in descending order.
  • DeleteDependency - Delete the dependency of the current record.
  • Convert - Convert the normal task into milestone task and vice versa.
  • Add
    • Above - Add a new row above the selected row
    • Below - Add a new row below the selected row
    • Child - Add a new row as child to the selected row
    • Milestone - Add a milestone task below to selected row

Custom items:

In this demo, custom menu items have been enabled in the context menu to perform expanding and collapsing the parent rows,

  • Expand the Row - Used to expand the parent row and it will render where the row is in a collapsed state.
  • Collapse the Row - Used to collapse the parent row and it will render where the row is in a expanded state.

    • To use context menu feature, we need to inject ContextMenu module using the Gantt.Inject(ContextMenu) method.


    More information on the Essential® Angular Gantt Chart can be found in this documentation section.