Example of Editing in Blazor Gantt Chart 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 CRUD operations in Gantt Chart. You can perform CRUD operations as follows,
Add- To add a new task, click the Add toolbar buttonEdit- To edit a task, double click a row or double click a taskbar or click the Edit toolbar button after selecting a rowIndent- To indent a task, click the Indent toolbar button after selecting a rowOutdent- To outdent a task, click the Outdent toolbar button after selecting a rowDelete- To delete a task, click the Delete toolbar button after selected a rowUpdate,Cancel- You can save or discard changes by clicking the Update and Cancel toolbar buttons respectively
ID | Job Name | Start Date | End Date | Duration | Progress | Dependency |
|---|
| 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 |
CRUD operations can be configured in Gantt Chart using GanttEditSettings and AllowTaskbarEditing. Gantt Chart has two Mode to manipulate the datasource
AutoDialog
In this demo, Auto mode is enabled for editing. On the TreeGrid side, you can start editing any row by double-clicking on it or clicking on the toolbar’s Edit button. Then, the currently selected row will be changed to edit state. On the Chart side, you can edit the tasks using the edit dialog by double-clicking on the taskbars and also you can edit the dependency connector lines using drag and drop action with connector line points available on either side of the parent taskbar, child taskbar, and milestones.
When the taskbar and connector point is dragged, the viewport shows left and right edges and the top and bottom edges, which automatically initiate horizontal and vertical scrolling.
To learn more about CRUD operations and managing tasks, refer to documentation section.