{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "gantt-default-editing",
  "framework": "angular",
  "type": "registry:component",
  "component": "Gantt",
  "variant": "default-editing",
  "dependencies": [
    "@syncfusion/ej2-angular-gantt"
  ],
  "description": "Gantt chart sample supporting task creation, editing, deletion, and dependency changes.",
  "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/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/gantt-default-editing.md"
  },
  "files": [
    {
      "target": "src/components/gantt-default-editing/default-editing.component.ts",
      "content": "import { Component, OnInit, ViewChild} from '@angular/core';\nimport { defaultEditingData, editingResources } from '../data';\nimport { DayMarkersService, EditService, GanttComponent, GanttModule, SelectionService, ToolbarService } from '@syncfusion/ej2-angular-gantt';\n@Component({\n    selector: 'ej2-ganttediting',\n    templateUrl: 'default-editing.html',\n    standalone: true,\n    providers: [ToolbarService, EditService, DayMarkersService, SelectionService],\n    imports: [ GanttModule]\n})\nexport class GanttEditingComponent implements OnInit {\n  @ViewChild('gantt')\n    public ganttObj!: GanttComponent;\n    public data!: object[];\n    public resources!: object[];\n    public resourceFields!: object ;\n    public taskSettings!: object;\n    public columns!: object[];\n    public timelineSettings!: object;\n    public gridLines!: string;\n    public labelSettings!: object;\n    public projectStartDate!: Date;\n    public projectEndDate!: Date;\n    public editSettings!: object;\n    public eventMarkers!: object[];\n    public toolbar!: string[];\n    public splitterSettings!: object;\n    private startDate!: Date;\n    public ngOnInit(): void {\n        this.data = defaultEditingData;\n        this.taskSettings = {\n            id: 'TaskID',\n            name: 'TaskName',\n            startDate: 'StartDate',\n            endDate: 'EndDate',\n            duration: 'Duration',\n            durationUnit: 'DurationUnit',\n            progress: 'Progress',\n            dependency: 'Predecessor',\n            parentID:'ParentId',\n            notes: 'info',\n            resourceInfo: 'resources'\n        };\n        this.resourceFields = {\n            id: 'resourceId',\n            name: 'resourceName'\n        };\n        this.editSettings = {\n            allowAdding: true,\n            allowEditing: true,\n            allowDeleting: true,\n            allowTaskbarEditing: true,\n            showDeleteConfirmDialog: true\n        };\n        this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'];\n        this.columns = [\n            { field: 'TaskID', width: 80 },\n            { field: 'TaskName', headerText: 'Job Name', width: 250, clipMode: 'EllipsisWithTooltip', validationRules: { required: true, minLength: [5, 'Task name should have a minimum length of 5 characters'] } },\n            { field: 'Duration', validationRules: { required: true} },\n            { field: 'StartDate' },\n            { field: 'EndDate', validationRules: { required: [this.customFn.bind(this), 'Please enter a value greater than the start date.'] } },\n            { field: 'Progress', validationRules: { required: true, min: 0, max: 100 } },\n            { field: 'Predecessor' }\n        ];\n        this.timelineSettings = {\n            topTier: {\n                unit: 'Week',\n                format: 'MMM dd, y',\n            },\n            bottomTier: {\n                unit: 'Day',\n                count: 1\n            },\n        };\n        this.gridLines = 'Both';\n        this.labelSettings = {\n            leftLabel: 'TaskName',\n            rightLabel: 'resources'\n        };\n        this.projectStartDate= new Date('03/26/2025');\n        this.projectEndDate= new Date('09/10/2025');\n       \n        this.resources = editingResources;\n        this.splitterSettings = {\n           columnIndex: 3\n        };\n        \n    }\n    public actionBegin(args: any): void {\n        if (args.columnName === \"EndDate\" || args.requestType === \"beforeOpenAddDialog\" || args.requestType === \"beforeOpenEditDialog\") {\n            this.startDate = args.rowData.ganttProperties.startDate;\n        }\n        if (args.requestType === \"taskbarediting\" && args.taskBarEditAction === \"ChildDrag\") {\n            this.startDate = args.data.ganttProperties.startDate;\n        }\n    }\n    public customFn(args: any): boolean {\n      var endDate;\n      var gantt = (document.getElementsByClassName('e-gantt')[0] as any).ej2_instances[0];\n      if (args.element && args.value) {\n        var dateOptions = { format: gantt.dateFormat, type: 'dateTime', skeleton: 'yMd' };\n        endDate =  gantt.globalize.parseDate(args.value, dateOptions);\n        if(!this.startDate && gantt.editModule.dialogModule['beforeOpenArgs']) {\n          this.startDate = gantt.editModule.dialogModule['beforeOpenArgs'].rowData['ganttProperties'].startDate;\n          endDate = (gantt.editModule.dialogModule['beforeOpenArgs'].rowData['ganttProperties'].endDate);\n        }\n        this.startDate.setHours(0, 0, 0, 0);\n        endDate.setHours(0, 0, 0, 0);\n      }\n      return this.startDate <= endDate;\n    }\n    public created(): void {\n        if (document.querySelector('.e-bigger')) {\n            this.ganttObj.rowHeight = 48;\n            this.ganttObj.taskbarHeight = 28;\n        }\n    }\n}\n"
    },
    {
      "target": "src/components/gantt-default-editing/default-editing.html",
      "content": "\n<div class=\"control-section\">\n    <ejs-gantt id=\"ganttDefault\" #gantt height=\"650px\" rowHeight=\"46\" taskbarHeight=\"25\" [dataSource]=\"data\" [taskFields]=\"taskSettings\" [columns]=\"columns\"\n        [timelineSettings]=\"timelineSettings\" [labelSettings]=\"labelSettings\" (created)=\"created()\" [treeColumnIndex]=\"1\"\n        [allowSelection]=\"true\" dateFormat=\"MMM dd, y\" [projectStartDate]=\"projectStartDate\" [projectEndDate]=\"projectEndDate\" [highlightWeekends]=\"true\"\n        [gridLines]=\"gridLines\" [eventMarkers]=\"eventMarkers\" [editSettings]=\"editSettings\" (actionBegin)=\"actionBegin($event)\"\n        [toolbar]=\"toolbar\" [resourceFields]=\"resourceFields\" [enableHover]=\"true\"\n        [resources]=\"resources\" [splitterSettings]=\"splitterSettings\">\n    </ejs-gantt>\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>"
    }
  ]
}