{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "gantt-default-editing",
  "framework": "react",
  "type": "registry:component",
  "component": "Gantt",
  "variant": "default-editing",
  "dependencies": [
    "@syncfusion/ej2-react-gantt"
  ],
  "description": "Gantt chart supports task editing, dependencies, custom dialog fields, and task markers.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/gantt-default-editing.md"
  },
  "files": [
    {
      "target": "src/components/gantt-default-editing/Gantt.tsx",
      "content": "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';\n\nlet editingData = [\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { TaskID: 6, TaskName: \"Site clearing\", StartDate: new Date(\"04/14/2025\"), Duration: 0, Progress: 100, ParentId: 5, Predecessor: \"4\", resources: [5] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { TaskID: 13, TaskName: \"Framing\", StartDate: new Date(\"05/01/2025\"), EndDate: new Date(\"05/07/2025\"), Duration: 5, Progress: 100, resources: [11, 12, 1] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] },\n    { 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] }\n];\n\nlet editingResources = [\n    { resourceId: 1, resourceName: 'Martin Tamer' },\n    { resourceId: 2, resourceName: 'Rose Fuller' },\n    { resourceId: 3, resourceName: 'Margaret Buchanan' },\n    { resourceId: 4, resourceName: 'Fuller King' },\n    { resourceId: 5, resourceName: 'Davolio Fuller' },\n    { resourceId: 6, resourceName: 'Van Jack' },\n    { resourceId: 7, resourceName: 'Fuller Buchanan' },\n    { resourceId: 8, resourceName: 'Jack Davolio' },\n    { resourceId: 9, resourceName: 'Tamer Vinet' },\n    { resourceId: 10, resourceName: 'Vinet Fuller' },\n    { resourceId: 11, resourceName: 'Bergs Anton' },\n    { resourceId: 12, resourceName: 'Construction Supervisor' }\n];\n\nconst Editing = () => {\n  let ganttInstance: GanttComponent;\n  let startDate: Date;\n  const taskFields: TaskFieldsModel = {\n    id: 'TaskID',\n    name: 'TaskName',\n    startDate: 'StartDate',\n    endDate: 'EndDate',\n    duration: 'Duration',\n    progress: 'Progress',\n    dependency: 'Predecessor',\n    parentID: 'ParentId',\n    notes: 'info',\n    resourceInfo: 'resources'\n  };\n  const resourceFields: ResourceFieldsModel = {\n    id: 'resourceId',\n    name: 'resourceName'\n  };\n  const editSettings: EditSettingsModel = {\n    allowAdding: true,\n    allowEditing: true,\n    allowDeleting: true,\n    allowTaskbarEditing: true,\n    showDeleteConfirmDialog: true\n  };\n  const customFn = (args) => {\n    var endDate: Date;\n    var gantt = (document.getElementsByClassName('e-gantt')[0] as any).ej2_instances[0];\n    if (args.element && args.value) {\n      endDate = new Date(args.value);\n      if (!startDate && gantt.editModule.dialogModule['beforeOpenArgs']) {\n        startDate = gantt.editModule.dialogModule['beforeOpenArgs'].rowData['ganttProperties'].startDate;\n        endDate = (gantt.editModule.dialogModule['beforeOpenArgs'].rowData['ganttProperties'].endDate);\n      }\n      startDate.setHours(0, 0, 0, 0);\n      endDate.setHours(0, 0, 0, 0);\n    }\n    return startDate <= endDate;\n  }\n  const actionbegin = (args) => {\n    if (args.columnName === \"EndDate\" || args.requestType === \"beforeOpenAddDialog\" || args.requestType === \"beforeOpenEditDialog\") {\n      startDate = args.rowData.ganttProperties.startDate;\n    }\n    if (args.requestType === \"taskbarediting\" && args.taskBarEditAction === \"ChildDrag\") {\n      startDate = args.data.ganttProperties.startDate;\n    }\n  }\n  const splitterSettings: SplitterSettingsModel = {\n    columnIndex: 3\n  };\n  const onCreated = (): void => {\n    if (document.querySelector('.e-bigger')) {\n      ganttInstance.rowHeight = 48;\n      ganttInstance.taskbarHeight = 28;\n    }\n  }\n  const projectStartDate: Date = new Date('03/26/2025');\n  const projectEndDate: Date = new Date('09/10/2025');\n  const gridLines: GridLine = 'Both';\n  const toolbar: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'];\n  const timelineSettings: TimelineSettingsModel = {\n    topTier: {\n      unit: 'Week',\n      format: 'MMM dd, y',\n    },\n    bottomTier: {\n      unit: 'Day',\n    },\n  };\n  const labelSettings: LabelSettingsModel = {\n    leftLabel: 'TaskName',\n    rightLabel: 'resources'\n  };\n\n  return (\n    <div className='control-pane'>\n      <div className='control-section'>\n        <GanttComponent id='Editing' ref={gantt => ganttInstance = gantt} dataSource={editingData} dateFormat={'MMM dd, y'}\n          treeColumnIndex={1} allowSelection={true} showColumnMenu={false} highlightWeekends={true} created={onCreated}\n          allowUnscheduledTasks={true} projectStartDate={projectStartDate} projectEndDate={projectEndDate} enableHover={true}\n          taskFields={taskFields} timelineSettings={timelineSettings} labelSettings={labelSettings} splitterSettings={splitterSettings}\n          height='650px' taskbarHeight={25} rowHeight={46} editSettings={editSettings} gridLines={gridLines} toolbar={toolbar} resourceFields={resourceFields} resources={editingResources} actionBegin={actionbegin}>\n          <ColumnsDirective>\n            <ColumnDirective field='TaskID' width='80' ></ColumnDirective>\n            <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>\n            <ColumnDirective field='StartDate'></ColumnDirective>\n            <ColumnDirective field='EndDate' validationRules={{ required: [customFn, 'Please enter a value greater than the start date.'] }}></ColumnDirective>\n            <ColumnDirective field='Duration' validationRules={{ required: true }}></ColumnDirective>\n            <ColumnDirective field='Progress' validationRules={{ required: true, min: 0, max: 100 }}></ColumnDirective>\n            <ColumnDirective field='Predecessor'></ColumnDirective>\n          </ColumnsDirective>\n          <EditDialogFieldsDirective>\n            <EditDialogFieldDirective type='General' headerText='General'></EditDialogFieldDirective>\n            <EditDialogFieldDirective type='Dependency'></EditDialogFieldDirective>\n            <EditDialogFieldDirective type='Resources'></EditDialogFieldDirective>\n            <EditDialogFieldDirective type='Notes'></EditDialogFieldDirective>\n          </EditDialogFieldsDirective>\n          <Inject services={[Edit, Selection, Toolbar, DayMarkers]} />\n        </GanttComponent>\n        <div style={{ float: 'right', margin: '10px' }}>Source:\n          <a href=\"https://en.wikipedia.org/wiki/Construction\" target=\"_blank\" rel=\"noopener noreferrer\">https://en.wikipedia.org/wiki/Construction</a>\n        </div>\n      </div>\n\n    </div>\n  )\n}\nexport default Editing;"
    }
  ]
}