Example of undefined in React Gantt Component

All Controls
/
Gantt
/
Editing

This sample visualizes the various phases involved in constructing a residential house, from testing the soil to handing over the fully constructed property to the owner. This sample also demonstrates CRUD operations in 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

    • More Details...

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

    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.

    In this sample column.validation has been enabled for the columns.It uses the Form Validator control and the column validation property to define validation rules, displaying error messages for invalid fields.

    Gantt component features are segregated into individual feature-wise modules. To use editing feature, inject the Edit module. To use a selection feature, inject the Selection module.