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.
ID | Job Name | Start Date | Duration | Progress | Dependency |
|---|---|---|---|---|---|
| 1 | Project initiation | Apr 02, 2024 | 4 days | 0 | |
| 2 | Identify site location | Apr 02, 2024 | 0 days | 30 | |
| 3 | Perform Soil test | Apr 02, 2024 | 4 days | 0 | 2FS |
| 4 | Soil test approval | Apr 05, 2024 | 0 days | 30 | 3FS |
| 5 | Project estimation | Apr 08, 2024 | 6 days | 15 | |
| 6 | Develop floor plan for estimation | Apr 08, 2024 | 3 days | 30 | 4FS |
| 7 | List materials | Apr 11, 2024 | 3 days | 0 | 6FS |
| 8 | Estimation approval | Apr 15, 2024 | 0 days | 0 | 7FS |
| 9 | Sign contract | Apr 16, 2024 | 1 day | 30 | 8FS |
| 10 | Project approval and kick off | Apr 16, 2024 | 0 days | 0 | 9FS |
| 11 | Site work | Apr 17, 2024 | 4 days | 15 | |
| 12 | Clear the building site | Apr 17, 2024 | 2 days | 30 | 9FS |
| 13 | Install temporary power service | Apr 19, 2024 | 2 days | 0 | 12FS |
| 14 | Foundation | Apr 23, 2024 | 12 days | 23 | |
| 15 | Excavate for foundations | Apr 23, 2024 | 3 days | 30 | 13FS |
| 16 | Dig footer | Apr 24, 2024 | 2 days | 0 | 15FF |
| 17 | Install plumbing grounds | Apr 26, 2024 | 4 days | 30 | 15FS |
| 18 | Pour a foundation and footer with concrete | May 02, 2024 | 1 day | 0 | 17FS |
| 19 | Cure basement walls | May 03, 2024 | 4 days | 30 | 18FS |
| 20 | Framing | May 09, 2024 | 12 days | 20 | |
| 21 | Add load-bearing structure | May 09, 2024 | 3 days | 30 | 19FS |
| 22 | Install floor joists | May 14, 2024 | 3 days | 0 | 21FS |
| 23 | Add ceiling joists | May 14, 2024 | 3 days | 30 | 22SS |
| 24 | Install subfloor panels | May 17, 2024 | 3 days | 0 | 23FS |
| 25 | Frame floor walls | May 22, 2024 | 3 days | 30 | 24FS |
| 26 | Frame floor decking | May 22, 2024 | 3 days | 30 | 25SS |
| 27 | Exterior finishing | May 27, 2024 | 9 days | 15 | |
| 28 | Cover outer walls and roof in OSB | May 27, 2024 | 3 days | 30 | 26FS |
| 29 | Add water resistive barrier | May 30, 2024 | 3 days | 0 | 28FS |
| 30 | Install roof shingles | Jun 04, 2024 | 3 days | 30 | 29FS |
| 31 | Install windows | Jun 04, 2024 | 3 days | 0 | 29FS |
| 32 | Utilities | May 27, 2024 | 12 days | 18 | |
| 33 | Install internal plumbing | May 27, 2024 | 3 days | 30 | 26FS |
| 34 | Install HVAC | May 30, 2024 | 3 days | 0 | 33FS |
| 35 | Electrical utilities | Jun 04, 2024 | 3 days | 30 | 34FS |
| 36 | Natural gas utilities | Jun 07, 2024 | 3 days | 0 | 35FS |
| 37 | Install bathroom fixtures | Jun 07, 2024 | 3 days | 30 | 35FS |
| 38 | Interior finsihing | Jun 12, 2024 | 18 days | 20 | |
| 39 | Install insulation | Jun 12, 2024 | 3 days | 30 | 37FS |
| 40 | Install drywall panels | Jun 17, 2024 | 3 days | 0 | 39FS |
| 41 | Spackle | Jun 20, 2024 | 3 days | 30 | 40FS |
| 42 | Apply primer | Jun 25, 2024 | 3 days | 0 | 41FS |
| 43 | Paint wall and ceilings | Jun 28, 2024 | 3 days | 30 | 42FS |
| 44 | Install modular kitchen | Jul 03, 2024 | 3 days | 30 | 43FS |
| 45 | Flooring | Jul 08, 2024 | 3 days | 15 | |
| 46 | Tile kitchen, bathroom and entry walls | Jul 08, 2024 | 3 days | 30 | 44FS |
| 47 | Tile floor | Jul 08, 2024 | 3 days | 0 | 46SS |
| 48 | Final Acceptance | Jul 11, 2024 | 4 days | 15 | |
| 49 | Final inspection | Jul 11, 2024 | 2 days | 30 | 47FS |
| 50 | Cleanup for occupancy | Jul 15, 2024 | 2 days | 0 | 49FS |
| 51 | Property handover | Jul 16, 2024 | 0 days | 0 | 50FS |
Mar 25, 2024 | Mar 31, 2024 | Apr 07, 2024 | Apr 14, 2024 | Apr 21, 2024 | Apr 28, 2024 | May 05, 2024 | May 12, 2024 | May 19, 2024 | May 26, 2024 | Jun 02, 2024 | Jun 09, 2024 | Jun 16, 2024 | Jun 23, 2024 | Jun 30, 2024 | Jul 07, 2024 | Jul 14, 2024 | Jul 21, 2024 |
|---|
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 |
|---|
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 levelOutdent - Outdent the selected record to one levelDeleteTask - 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 in to milestone task and vice versa.Add
Above - Add a new row above the selected row Below - Add a new row below the selected rowChild - Add a new row as child to the selected rowMilestone - Add a milestone task below to selected rowCustom 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.ContextMenu module into the services.