# gantt-default-editing

> Gantt chart supports task editing, dependencies, custom dialog fields, and task markers.

**Framework:** react  **Component:** Gantt  **Variant:** default-editing

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/react/ts/gantt-default-editing.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-gantt
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/gantt-default-editing/Gantt.tsx

```tsx
import { GanttComponent, type TaskFieldsModel, EditDialogFieldsDirective, DayMarkers, EditDialogFieldDirective, Inject, Edit, Selection, Toolbar, ColumnsDirective, ColumnDirective, type GridLine, type ResourceFieldsModel, type EditSettingsModel, type SplitterSettingsModel, type TimelineSettingsModel, type LabelSettingsModel, type ToolbarItem } from '@syncfusion/ej2-react-gantt';

let editingData = [
    { TaskID: 1, TaskName: "Planning and permits", StartDate: new Date("04/02/2025"), EndDate: new Date("04/10/2025"), Duration: 7, Progress: 100, resources: [1, 2, 3] },
    { TaskID: 2, TaskName: "Site evaluation", StartDate: new Date("04/02/2025"), EndDate: new Date("04/04/2025"), Duration: 2, Progress: 100, ParentId: 1, resources: [1] },
    { TaskID: 3, TaskName: "Obtain permits", StartDate: new Date("04/07/2025"), EndDate: new Date("04/09/2025"), Duration: 3, Progress: 100, ParentId: 1, Predecessor: "2", resources: [2, 4] },
    { TaskID: 4, TaskName: "Finalize planning", StartDate: new Date("04/10/2025"), EndDate: new Date("04/11/2025"), Duration: 2, Progress: 100, ParentId: 1, Predecessor: "3", resources: [3] },
    { TaskID: 5, TaskName: "Site preparation", StartDate: new Date("04/14/2025"), EndDate: new Date("04/18/2025"), Duration: 5, Progress: 100, resources: [5, 6, 12] },
    { TaskID: 6, TaskName: "Site clearing", StartDate: new Date("04/14/2025"), Duration: 0, Progress: 100, ParentId: 5, Predecessor: "4", resources: [5] },
    { TaskID: 7, TaskName: "Grading and excavation", StartDate: new Date("04/15/2025"), EndDate: new Date("04/17/2025"), Duration: 3, Progress: 100, ParentId: 5, Predecessor: "6", resources: [6, 7] },
    { TaskID: 8, TaskName: "Foundation work", StartDate: new Date("04/18/2025"), EndDate: new Date("04/21/2025"), Duration: 4, Progress: 100, ParentId: 5, Predecessor: "7", resources: [12] },
    { TaskID: 9, TaskName: "Foundation and basement", StartDate: new Date("04/22/2025"), EndDate: new Date("04/28/2025"), Duration: 5, Progress: 100, ParentId: 5, resources: [8, 9, 10] },
    { TaskID: 10, TaskName: "Pour foundation", StartDate: new Date("04/22/2025"), EndDate: new Date("04/23/2025"), Duration: 2, Progress: 100, ParentId: 9, Predecessor: "8", resources: [8] },
    { TaskID: 11, TaskName: "Cure foundation", StartDate: new Date("04/24/2025"), EndDate: new Date("04/25/2025"), Duration: 2, Progress: 100, ParentId: 9, Predecessor: "10", resources: [9] },
    { TaskID: 12, TaskName: "Basement walls", StartDate: new Date("04/28/2025"), EndDate: new Date("04/30/2025"), Duration: 3, Progress: 100, ParentId: 9, Predecessor: "11", resources: [10, 11] },
    { TaskID: 13, TaskName: "Framing", StartDate: new Date("05/01/2025"), EndDate: new Date("05/07/2025"), Duration: 5, Progress: 100, resources: [11, 12, 1] },
    { TaskID: 14, TaskName: "Frame floors", StartDate: new Date("05/01/2025"), EndDate: new Date("05/02/2025"), Duration: 2, Progress: 100, ParentId: 13, Predecessor: "12", resources: [11] },
    { TaskID: 15, TaskName: "Frame walls", StartDate: new Date("05/05/2025"), EndDate: new Date("05/06/2025"), Duration: 2, Progress: 100, ParentId: 13, Predecessor: "14", resources: [12] },
    { TaskID: 16, TaskName: "Install trusses", StartDate: new Date("05/07/2025"), EndDate: new Date("05/08/2025"), Duration: 2, Progress: 100, ParentId: 13, Predecessor: "15", resources: [1, 2] },
    { TaskID: 17, TaskName: "Roofing", StartDate: new Date("05/09/2025"), EndDate: new Date("05/13/2025"), Duration: 3, Progress: 100, Predecessor: "16", resources: [3, 4] },
    { TaskID: 18, TaskName: "Mechanical, Electrical, Plumbing", StartDate: new Date("05/14/2025"), EndDate: new Date("05/24/2025"), Duration: 9, Progress: 50, resources: [5, 6, 7] },
    { TaskID: 19, TaskName: "HVAC installation", StartDate: new Date("05/14/2025"), EndDate: new Date("05/16/2025"), Duration: 3, Progress: 100, ParentId: 18, Predecessor: "17", resources: [5] },
    { TaskID: 20, TaskName: "Plumbing installation", StartDate: new Date("05/19/2025"), EndDate: new Date("05/21/2025"), Duration: 3, Progress: 50, ParentId: 18, Predecessor: "19", resources: [6] },
    { TaskID: 21, TaskName: "Electrical installation", StartDate: new Date("05/22/2025"), EndDate: new Date("05/24/2025"), Duration: 3, Progress: 0, ParentId: 18, Predecessor: "20", resources: [7, 8] },
    { TaskID: 22, TaskName: "Interior finishing", StartDate: new Date("05/26/2025"), EndDate: new Date("06/17/2025"), Duration: 15, Progress: 0, Predecessor: "21", resources: [9, 10, 11] },
    { TaskID: 23, TaskName: "Insulation and drywall", StartDate: new Date("05/26/2025"), EndDate: new Date("05/30/2025"), Duration: 5, Progress: 0, ParentId: 22, Predecessor: "21", resources: [9] },
    { TaskID: 24, TaskName: "Interior painting", StartDate: new Date("06/02/2025"), EndDate: new Date("06/05/2025"), Duration: 4, Progress: 0, ParentId: 22, Predecessor: "23", resources: [10] },
    { TaskID: 25, TaskName: "Flooring installation", StartDate: new Date("06/06/2025"), EndDate: new Date("06/09/2025"), Duration: 4, Progress: 0, ParentId: 22, Predecessor: "24", resources: [11] },
    { TaskID: 26, TaskName: "Cabinet and fixture setup", StartDate: new Date("06/10/2025"), EndDate: new Date("06/12/2025"), Duration: 3, Progress: 0, ParentId: 22, Predecessor: "25", resources: [12] },
    { TaskID: 27, TaskName: "Final fixture installation", StartDate: new Date("06/13/2025"), EndDate: new Date("06/15/2025"), Duration: 3, Progress: 0, ParentId: 22, Predecessor: "26", resources: [1] },
    { TaskID: 28, TaskName: "Exterior finishing", StartDate: new Date("06/16/2025"), EndDate: new Date("06/19/2025"), Duration: 4, Progress: 0, Predecessor: "27", resources: [2, 3] },
    { TaskID: 29, TaskName: "Landscaping", StartDate: new Date("06/20/2025"), EndDate: new Date("06/25/2025"), Duration: 5, Progress: 0, Predecessor: "28", resources: [4, 5] },
    { TaskID: 30, TaskName: "Final inspection", StartDate: new Date("06/26/2025"), EndDate: new Date("06/30/2025"), Duration: 3, Progress: 0, Predecessor: "29", resources: [6] },
    { TaskID: 31, TaskName: "Correction of issues", StartDate: new Date("07/01/2025"), EndDate: new Date("07/03/2025"), Duration: 3, Progress: 0, Predecessor: "30", resources: [7, 8] },
    { TaskID: 32, TaskName: "Final walkthrough", StartDate: new Date("07/04/2025"), EndDate: new Date("07/07/2025"), Duration: 2, Progress: 0, Predecessor: "31", resources: [9] },
    { TaskID: 33, TaskName: "Handover preparation", StartDate: new Date("07/08/2025"), EndDate: new Date("07/10/2025"), Duration: 3, Progress: 0, Predecessor: "32", resources: [10] },
    { TaskID: 34, TaskName: "Client handover", StartDate: new Date("07/11/2025"), EndDate: new Date("07/12/2025"), Duration: 2, Progress: 0, Predecessor: "33", resources: [11] },
    { TaskID: 35, TaskName: "Warranty period begins", StartDate: new Date("07/14/2025"), EndDate: new Date("07/15/2025"), Duration: 2, Progress: 0, Predecessor: "34", resources: [12] },
    { TaskID: 36, TaskName: "Routine maintenance visits", StartDate: new Date("07/16/2025"), EndDate: new Date("07/25/2025"), Duration: 10, Progress: 0, Predecessor: "35", resources: [1, 2] },
    { TaskID: 37, TaskName: "First year warranty review", StartDate: new Date("07/28/2025"), EndDate: new Date("08/01/2025"), Duration: 5, Progress: 0, Predecessor: "36", resources: [3, 4] },
    { TaskID: 38, TaskName: "Final project documentation", StartDate: new Date("08/04/2025"), EndDate: new Date("08/06/2025"), Duration: 3, Progress: 0, Predecessor: "37", resources: [5] },
    { TaskID: 39, TaskName: "Celebrate project completion", StartDate: new Date("08/07/2025"), EndDate: new Date("08/09/2025"), Duration: 3, Progress: 0, Predecessor: "38", resources: [6, 7] },
    { TaskID: 40, TaskName: "Begin next project planning", StartDate: new Date("08/10/2025"), EndDate: new Date("08/13/2025"), Duration: 4, Progress: 0, Predecessor: "39", resources: [8, 9] }
];

let editingResources = [
    { resourceId: 1, resourceName: 'Martin Tamer' },
    { resourceId: 2, resourceName: 'Rose Fuller' },
    { resourceId: 3, resourceName: 'Margaret Buchanan' },
    { resourceId: 4, resourceName: 'Fuller King' },
    { resourceId: 5, resourceName: 'Davolio Fuller' },
    { resourceId: 6, resourceName: 'Van Jack' },
    { resourceId: 7, resourceName: 'Fuller Buchanan' },
    { resourceId: 8, resourceName: 'Jack Davolio' },
    { resourceId: 9, resourceName: 'Tamer Vinet' },
    { resourceId: 10, resourceName: 'Vinet Fuller' },
    { resourceId: 11, resourceName: 'Bergs Anton' },
    { resourceId: 12, resourceName: 'Construction Supervisor' }
];

const Editing = () => {
  let ganttInstance: GanttComponent;
  let startDate: Date;
  const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    parentID: 'ParentId',
    notes: 'info',
    resourceInfo: 'resources'
  };
  const resourceFields: ResourceFieldsModel = {
    id: 'resourceId',
    name: 'resourceName'
  };
  const editSettings: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };
  const customFn = (args) => {
    var endDate: Date;
    var gantt = (document.getElementsByClassName('e-gantt')[0] as any).ej2_instances[0];
    if (args.element && args.value) {
      endDate = new Date(args.value);
      if (!startDate && gantt.editModule.dialogModule['beforeOpenArgs']) {
        startDate = gantt.editModule.dialogModule['beforeOpenArgs'].rowData['ganttProperties'].startDate;
        endDate = (gantt.editModule.dialogModule['beforeOpenArgs'].rowData['ganttProperties'].endDate);
      }
      startDate.setHours(0, 0, 0, 0);
      endDate.setHours(0, 0, 0, 0);
    }
    return startDate <= endDate;
  }
  const actionbegin = (args) => {
    if (args.columnName === "EndDate" || args.requestType === "beforeOpenAddDialog" || args.requestType === "beforeOpenEditDialog") {
      startDate = args.rowData.ganttProperties.startDate;
    }
    if (args.requestType === "taskbarediting" && args.taskBarEditAction === "ChildDrag") {
      startDate = args.data.ganttProperties.startDate;
    }
  }
  const splitterSettings: SplitterSettingsModel = {
    columnIndex: 3
  };
  const onCreated = (): void => {
    if (document.querySelector('.e-bigger')) {
      ganttInstance.rowHeight = 48;
      ganttInstance.taskbarHeight = 28;
    }
  }
  const projectStartDate: Date = new Date('03/26/2025');
  const projectEndDate: Date = new Date('09/10/2025');
  const gridLines: GridLine = 'Both';
  const toolbar: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'];
  const timelineSettings: TimelineSettingsModel = {
    topTier: {
      unit: 'Week',
      format: 'MMM dd, y',
    },
    bottomTier: {
      unit: 'Day',
    },
  };
  const labelSettings: LabelSettingsModel = {
    leftLabel: 'TaskName',
    rightLabel: 'resources'
  };

  return (
    <div className='control-pane'>
      <div className='control-section'>
        <GanttComponent id='Editing' ref={gantt => ganttInstance = gantt} dataSource={editingData} dateFormat={'MMM dd, y'}
          treeColumnIndex={1} allowSelection={true} showColumnMenu={false} highlightWeekends={true} created={onCreated}
          allowUnscheduledTasks={true} projectStartDate={projectStartDate} projectEndDate={projectEndDate} enableHover={true}
          taskFields={taskFields} timelineSettings={timelineSettings} labelSettings={labelSettings} splitterSettings={splitterSettings}
          height='650px' taskbarHeight={25} rowHeight={46} editSettings={editSettings} gridLines={gridLines} toolbar={toolbar} resourceFields={resourceFields} resources={editingResources} actionBegin={actionbegin}>
          <ColumnsDirective>
            <ColumnDirective field='TaskID' width='80' ></ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Job Name' width='250' clipMode='EllipsisWithTooltip' validationRules={{ required: true, minLength: [5, 'Task name should have a minimum length of 5 characters'], }}></ColumnDirective>
            <ColumnDirective field='StartDate'></ColumnDirective>
            <ColumnDirective field='EndDate' validationRules={{ required: [customFn, 'Please enter a value greater than the start date.'] }}></ColumnDirective>
            <ColumnDirective field='Duration' validationRules={{ required: true }}></ColumnDirective>
            <ColumnDirective field='Progress' validationRules={{ required: true, min: 0, max: 100 }}></ColumnDirective>
            <ColumnDirective field='Predecessor'></ColumnDirective>
          </ColumnsDirective>
          <EditDialogFieldsDirective>
            <EditDialogFieldDirective type='General' headerText='General'></EditDialogFieldDirective>
            <EditDialogFieldDirective type='Dependency'></EditDialogFieldDirective>
            <EditDialogFieldDirective type='Resources'></EditDialogFieldDirective>
            <EditDialogFieldDirective type='Notes'></EditDialogFieldDirective>
          </EditDialogFieldsDirective>
          <Inject services={[Edit, Selection, Toolbar, DayMarkers]} />
        </GanttComponent>
        <div style={{ float: 'right', margin: '10px' }}>Source:
          <a href="https://en.wikipedia.org/wiki/Construction" target="_blank" rel="noopener noreferrer">https://en.wikipedia.org/wiki/Construction</a>
        </div>
      </div>

    </div>
  )
}
export default Editing;
```