Example of Editing in ASP.NET Core Gantt Chart Control

Gantt Chart
Editing

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 a Gantt chart. You can perform CRUD operations as follows,

  • Add - To add new task, click Add toolbar button.
  • Edit - To edit a task, double click a row or double click a taskbar or click toolbar Edit button after selecting a row.
  • Indent - To indent a task, click toolbar indent button after selecting a row./li>
  • Outdent - To outdent a task, click toolbar outdent button after selecting a row.
  • Delete - To delete a task, click toolbar Delete button after selecting a row.
  • Update, Cancel - You can save or discard changes by clicking toolbar Update and Cancel button respectively.

1
Project initiation
4/2/20244/5/20244 days0
2
Identify site location
4/2/20244/2/20240 days30
3
Perform soil test
4/2/20244/5/20244 days02FS
4
Soil test approval
4/5/20244/5/20240 days303FS
5
Project estimation
4/8/20244/15/20246 days15
6
Develop floor plan for estimation
4/8/20244/10/20243 days304FS
7
List materials
4/11/20244/15/20243 days06FS
8
Estimation approval
4/15/20244/15/20240 days07FS
9
Sign contract
4/16/20244/16/20241 day308FS
10
Project approval and kick off
4/16/20244/16/20240 days09FS
11
Site work
4/17/20244/22/20244 days15
12
Clear the building site
4/17/20244/18/20242 days309FS
13
Install temporary power service
4/19/20244/22/20242 days012FS
14
Foundation
4/23/20245/8/202412 days23
15
Excavate for foundations
4/23/20244/25/20243 days3013FS
16
Dig footer
4/24/20244/25/20242 days015FF
17
Install plumbing grounds
4/26/20245/1/20244 days3015FS
18
Pour a foundation and footer with concrete
5/2/20245/2/20241 day017FS
19
Cure basement walls
5/3/20245/8/20244 days3018FS
20
Framing
5/9/20245/24/202412 days20
21
Add load-bearing structure
5/9/20245/13/20243 days3019FS
22
Install floor joists
5/14/20245/16/20243 days021FS
23
Add ceiling joists
5/14/20245/16/20243 days3022SS
24
Install subfloor panels
5/17/20245/21/20243 days023FS
25
Frame floor walls
5/22/20245/24/20243 days3024FS
26
Frame floor decking
5/22/20245/24/20243 days3025SS
27
Exterior finishing
5/27/20246/6/20249 days15
28
Cover outer walls and roof in OSB
5/27/20245/29/20243 days3026FS
29
Add water resistive barrier
5/30/20246/3/20243 days028FS
30
Install roof shingles
6/4/20246/6/20243 days3029FS
31
Install windows
6/4/20246/6/20243 days029FS
32
Utilities
5/27/20246/11/202412 days18
33
Install internal plumbing
5/27/20245/29/20243 days3026FS
34
Install HVAC
5/30/20246/3/20243 days033FS
35
Electrical utilities
6/4/20246/6/20243 days3034FS
36
Natural gas utilities
6/7/20246/11/20243 days035FS
37
Install bathroom fixtures
6/7/20246/11/20243 days3035FS
38
Interior finsihing
6/12/20247/5/202418 days20
39
Install insulation
6/12/20246/14/20243 days3037FS
40
Install drywall panels
6/17/20246/19/20243 days039FS
41
Spackle
6/20/20246/24/20243 days3040FS
42
Apply primer
6/25/20246/27/20243 days041FS
43
Paint wall and ceilings
6/28/20247/2/20243 days3042FS
44
Install modular kitchen
7/3/20247/5/20243 days3043FS
45
Flooring
7/8/20247/10/20243 days15
46
Tile kitchen, bathroom and entry walls
7/8/20247/10/20243 days3044FS
47
Tile floor
7/8/20247/10/20243 days046SS
48
Final acceptance
7/11/20247/16/20244 days15
49
Final inspection
7/11/20247/12/20242 days3047FS
50
Cleanup for occupancy
7/15/20247/16/20242 days049FS
51
Property handover
7/16/20247/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
Fuller King
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
Fuller Buchanan
Utilities
Install internal plumbing
Martin Tamer , Vinet Fuller
Install HVAC
Fuller King , Tamer Vinet
Electrical utilities
Natural gas utilities
Bergs Anton
Install bathroom fixtures
Margaret Buchanan , Fuller Buchanan
Interior finsihing
Install insulation
Martin Tamer , Jack Davolio
Install drywall panels
Davolio Fuller
Spackle
Vinet Fuller
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
Construction Supervisor
Cleanup for occupancy
Martin Tamer , Davolio Fuller
Property handover
Project approval and kick-off
Foundation inspection
Site manager inspection
Property handover and sign-off

This CRUD operations can be configured in Gantt chart using editSettings and allowTaskbarEditing. Gantt chart has two modes to manipulate the datasource

  • Auto
  • Dialog
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 toolbar’s Edit button, then the currently selected row will be changed to edited state. On the chart side, you can edit the tasks using edit dialog by double clicking on the taskbars and you can edit the dependency connector lines using drag and drop action with connector line points available on either side of the taskbar. It is possible to connect parent-parent, child-child, child-parent and parent -child dependency relationships.
In this sample column.validationRules has been enabled for the columns. It uses the Form Validator control to define validation rules, displaying error messages for invalid field values.


Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab
Documentation
opens in a new tab
Forum
opens in a new tab
Blog
opens in a new tab
Copyright © 2001 - 2025 Syncfusion® Inc.