Example of Editing in ASP.NET MVC 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 selected a row
  • Indent - To indent a task, click toolbar indent button after selecting a row
  • Outdent - To outdent a task, click toolbar outdent button after selecting a row
  • Delete - To delete a task, click toolbar Delete button after selected a row
  • Update,Cancel - You can save or discard changes by click 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 wwork
    		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 wwork
    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 the either side of 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 MVC web apps today with Syncfusion® ASP.NET MVC components
    100+ high-performance and responsive UI components
    Dedicated support
    Hassle-free licensing
    TRY IT FOR FREE
    opens in a new tab