Grids
Example of Context Menu in ASP.NET Core Gantt Chart Control
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.
Are you sure you want to Delete Record?
ID | Job Name | Start Date | Duration | Progress | Dependency |
|---|---|---|---|---|---|
| 1 | Project initiation | 4/2/2024 | 4 days | 0 | |
| 2 | Identify site location | 4/2/2024 | 0 days | 30 | |
| 3 | Perform soil test | 4/2/2024 | 4 days | 0 | 2FS |
| 4 | Soil test approval | 4/5/2024 | 0 days | 30 | 3FS |
| 5 | Project estimation | 4/8/2024 | 6 days | 15 | |
| 6 | Develop floor plan for estimation | 4/8/2024 | 3 days | 30 | 4FS |
| 7 | List materials | 4/11/2024 | 3 days | 0 | 6FS |
| 8 | Estimation approval | 4/15/2024 | 0 days | 0 | 7FS |
| 9 | Sign contract | 4/16/2024 | 1 day | 30 | 8FS |
| 10 | Project approval and kick off | 4/16/2024 | 0 days | 0 | 9FS |
| 11 | Site work | 4/17/2024 | 4 days | 15 | |
| 12 | Clear the building site | 4/17/2024 | 2 days | 30 | 9FS |
| 13 | Install temporary power service | 4/19/2024 | 2 days | 0 | 12FS |
| 14 | Foundation | 4/23/2024 | 12 days | 23 | |
| 15 | Excavate for foundations | 4/23/2024 | 3 days | 30 | 13FS |
| 16 | Dig footer | 4/24/2024 | 2 days | 0 | 15FF |
| 17 | Install plumbing grounds | 4/26/2024 | 4 days | 30 | 15FS |
| 18 | Pour a foundation and footer with concrete | 5/2/2024 | 1 day | 0 | 17FS |
| 19 | Cure basement walls | 5/3/2024 | 4 days | 30 | 18FS |
| 20 | Framing | 5/9/2024 | 12 days | 20 | |
| 21 | Add load-bearing structure | 5/9/2024 | 3 days | 30 | 19FS |
| 22 | Install floor joists | 5/14/2024 | 3 days | 0 | 21FS |
| 23 | Add ceiling joists | 5/14/2024 | 3 days | 30 | 22SS |
| 24 | Install subfloor panels | 5/17/2024 | 3 days | 0 | 23FS |
| 25 | Frame floor walls | 5/22/2024 | 3 days | 30 | 24FS |
| 26 | Frame floor decking | 5/22/2024 | 3 days | 30 | 25SS |
| 27 | Exterior finishing | 5/27/2024 | 9 days | 15 | |
| 28 | Cover outer walls and roof in OSB | 5/27/2024 | 3 days | 30 | 26FS |
| 29 | Add water resistive barrier | 5/30/2024 | 3 days | 0 | 28FS |
| 30 | Install roof shingles | 6/4/2024 | 3 days | 30 | 29FS |
| 31 | Install windows | 6/4/2024 | 3 days | 0 | 29FS |
| 32 | Utilities | 5/27/2024 | 12 days | 18 | |
| 33 | Install internal plumbing | 5/27/2024 | 3 days | 30 | 26FS |
| 34 | Install HVAC | 5/30/2024 | 3 days | 0 | 33FS |
| 35 | Electrical utilities | 6/4/2024 | 3 days | 30 | 34FS |
| 36 | Natural gas utilities | 6/7/2024 | 3 days | 0 | 35FS |
| 37 | Install bathroom fixtures | 6/7/2024 | 3 days | 30 | 35FS |
| 38 | Interior finsihing | 6/12/2024 | 18 days | 20 | |
| 39 | Install insulation | 6/12/2024 | 3 days | 30 | 37FS |
| 40 | Install drywall panels | 6/17/2024 | 3 days | 0 | 39FS |
| 41 | Spackle | 6/20/2024 | 3 days | 30 | 40FS |
| 42 | Apply primer | 6/25/2024 | 3 days | 0 | 41FS |
| 43 | Paint wall and ceilings | 6/28/2024 | 3 days | 30 | 42FS |
| 44 | Install modular kitchen | 7/3/2024 | 3 days | 30 | 43FS |
| 45 | Flooring | 7/8/2024 | 3 days | 15 | |
| 46 | Tile kitchen, bathroom and entry walls | 7/8/2024 | 3 days | 30 | 44FS |
| 47 | Tile floor | 7/8/2024 | 3 days | 0 | 46SS |
| 48 | Final acceptance | 7/11/2024 | 4 days | 15 | |
| 49 | Final inspection | 7/11/2024 | 2 days | 30 | 47FS |
| 50 | Cleanup for occupancy | 7/15/2024 | 2 days | 0 | 49FS |
| 51 | Property handover | 7/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 |
|---|
Validate Editing
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 the 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.-
AddAbove- 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.