Example of Context Menu in Javascript Gantt Chart Control

All Controls
/
Gantt Chart
/
Context Menu

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 control.

More Details...

1
Project initiation
Apr 02, 2024Apr 05, 20244 days0
2
Identify site location
Apr 02, 2024Apr 02, 20240 days30Martin Tamer
3
Perform soil test
Apr 02, 2024Apr 05, 20244 days02FSRose Fuller,Margaret Buchanan,Davolio Fuller
4
Soil test approval
Apr 05, 2024Apr 05, 20240 days303FS
5
Project estimation
Apr 08, 2024Apr 15, 20246 days15
6
Develop floor plan for estimation
Apr 08, 2024Apr 10, 20243 days304FS
7
List materials
Apr 11, 2024Apr 15, 20243 days06FSFuller King,Jack Davolio
8
Estimation approval
Apr 15, 2024Apr 15, 20240 days07FSConstruction Supervisor,Davolio Fuller
9
Sign contract
Apr 16, 2024Apr 16, 20241 day308FSConstruction Supervisor
10
Project approval and kick off
Apr 16, 2024Apr 16, 20240 days09FS
11
Site work
Apr 17, 2024Apr 22, 20244 days15
12
Clear the building site
Apr 17, 2024Apr 18, 20242 days309FSVan Jack,Fuller Buchanan
13
Install temporary power service
Apr 19, 2024Apr 22, 20242 days012FSVan Jack,Fuller Buchanan
14
Foundation
Apr 23, 2024May 08, 202412 days23
15
Excavate for foundations
Apr 23, 2024Apr 25, 20243 days3013FSRose Fuller,Jack Davolio
16
Dig footer
Apr 24, 2024Apr 25, 20242 days015FFJack Davolio
17
Install plumbing grounds
Apr 26, 2024May 01, 20244 days3015FSTamer Vinet
18
Pour a foundation and footer with concrete
May 02, 2024May 02, 20241 day017FSJack Davolio,Tamer Vinet,Vinet Fuller
19
Cure basement walls
May 03, 2024May 08, 20244 days3018FSVinet Fuller
20
Framing
May 09, 2024May 24, 202412 days20
21
Add load-bearing structure
May 09, 2024May 13, 20243 days3019FSFuller King,Davolio Fuller
22
Install floor joists
May 14, 2024May 16, 20243 days021FSRose Fuller,Margaret Buchanan
23
Add ceiling joists
May 14, 2024May 16, 20243 days3022SSDavolio Fuller
24
Install subfloor panels
May 17, 2024May 21, 20243 days023FSJack Davolio,Tamer Vinet
25
Frame floor walls
May 22, 2024May 24, 20243 days3024FSVinet Fuller
26
Frame floor decking
May 22, 2024May 24, 20243 days3025SSFuller King,Jack Davolio
27
Exterior finishing
May 27, 2024Jun 06, 20249 days15
28
Cover outer walls and roof in OSB
May 27, 2024May 29, 20243 days3026FSRose Fuller,Jack Davolio
29
Add water resistive barrier
May 30, 2024Jun 03, 20243 days028FSMartin Tamer,Vinet Fuller
30
Install roof shingles
Jun 04, 2024Jun 06, 20243 days3029FSJack Davolio,Tamer Vinet
31
Install windows
Jun 04, 2024Jun 06, 20243 days029FS
32
Utilities
May 27, 2024Jun 11, 202412 days18
33
Install internal plumbing
May 27, 2024May 29, 20243 days3026FSMartin Tamer,Vinet Fuller
34
Install HVAC
May 30, 2024Jun 03, 20243 days033FSFuller King,Tamer Vinet
35
Electrical utilities
Jun 04, 2024Jun 06, 20243 days3034FS
36
Natural gas utilities
Jun 07, 2024Jun 11, 20243 days035FS
37
Install bathroom fixtures
Jun 07, 2024Jun 11, 20243 days3035FSMargaret Buchanan,Fuller Buchanan
38
Interior finsihing
Jun 12, 2024Jul 05, 202418 days20
39
Install insulation
Jun 12, 2024Jun 14, 20243 days3037FSMartin Tamer,Jack Davolio
40
Install drywall panels
Jun 17, 2024Jun 19, 20243 days039FS
41
Spackle
Jun 20, 2024Jun 24, 20243 days3040FS
42
Apply primer
Jun 25, 2024Jun 27, 20243 days041FSVinet Fuller,Bergs Anton
43
Paint wall and ceilings
Jun 28, 2024Jul 02, 20243 days3042FSRose Fuller,Tamer Vinet
44
Install modular kitchen
Jul 03, 2024Jul 05, 20243 days3043FSDavolio Fuller,Fuller Buchanan
45
Flooring
Jul 08, 2024Jul 10, 20243 days15
46
Tile kitchen, bathroom and entry walls
Jul 08, 2024Jul 10, 20243 days3044FSFuller King,Tamer Vinet,Margaret Buchanan
47
Tile floor
Jul 08, 2024Jul 10, 20243 days046SSRose Fuller,Jack Davolio
48
Final Acceptance
Jul 11, 2024Jul 16, 20244 days15
49
Final inspection
Jul 11, 2024Jul 12, 20242 days3047FS
50
Cleanup for occupancy
Jul 15, 2024Jul 16, 20242 days049FSMartin Tamer,Davolio Fuller
51
Property handover
Jul 16, 2024Jul 16, 20240 days050FS
Project initiation
Identify site location
Martin Tamer
Perform soil test
Rose Fuller , Margaret Buchanan , Davolio Fuller
Soil test approval
Project estimation
Develop floor plan for estimation
List materials
Fuller King , Jack Davolio
Estimation approval
Construction Supervisor , Davolio Fuller
Sign contract
Construction Supervisor
Project approval and kick off
Site work
Clear the building site
Van Jack , Fuller Buchanan
Install temporary power service
Van Jack , Fuller Buchanan
Foundation
Excavate for foundations
Rose Fuller , Jack Davolio
Dig footer
Jack Davolio
Install plumbing grounds
Tamer Vinet
Pour a foundation and footer with concrete
Jack Davolio , Tamer Vinet , Vinet Fuller
Cure basement walls
Vinet Fuller
Framing
Add load-bearing structure
Fuller King , Davolio Fuller
Install floor joists
Rose Fuller , Margaret Buchanan
Add ceiling joists
Davolio Fuller
Install subfloor panels
Jack Davolio , Tamer Vinet
Frame floor walls
Vinet Fuller
Frame floor decking
Fuller King , Jack Davolio
Exterior finishing
Cover outer walls and roof in OSB
Rose Fuller , Jack Davolio
Add water resistive barrier
Martin Tamer , Vinet Fuller
Install roof shingles
Jack Davolio , Tamer Vinet
Install windows
Utilities
Install internal plumbing
Martin Tamer , Vinet Fuller
Install HVAC
Fuller King , Tamer Vinet
Electrical utilities
Natural gas utilities
Install bathroom fixtures
Margaret Buchanan , Fuller Buchanan
Interior finsihing
Install insulation
Martin Tamer , Jack Davolio
Install drywall panels
Spackle
Apply primer
Vinet Fuller , Bergs Anton
Paint wall and ceilings
Rose Fuller , Tamer Vinet
Install modular kitchen
Davolio Fuller , Fuller Buchanan
Flooring
Tile kitchen, bathroom and entry walls
Fuller King , Tamer Vinet , Margaret Buchanan
Tile floor
Rose Fuller , Jack Davolio
Final Acceptance
Final inspection
Cleanup for occupancy
Martin Tamer , Davolio Fuller
Property handover
Project approval and kick-off
Foundation inspection
Site manager inspection
Property handover and sign-off
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. DeleteTask - Delete the current record. Indent - Indent the selected record to one level Outdent - Outdent the selected record to one level 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.