{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "gantt-default-editing",
  "framework": "vue",
  "type": "registry:component",
  "component": "Gantt",
  "variant": "default-editing",
  "dependencies": [
    "@syncfusion/ej2-vue-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/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/gantt-default-editing.md"
  },
  "files": [
    {
      "target": "src/components/gantt-default-editing/Gantt.vue",
      "content": "<template>\n    <div>\n        <div class=\"control-section\">\n            <div class=\"content-wrapper\">\n                <ejs-gantt ref='gantt' id=\"GanttContainer\" :dataSource=\"data\" :dateFormat=\"dateFormat\"\n                    :taskFields=\"taskFields\" :editSettings=\"editSettings\" :toolbar=\"toolbar\" :allowSelection=\"true\"\n                    :gridLines=\"gridLines\" :height=\"height\" :treeColumnIndex=\"1\" :actionBegin=\"actionBegin\" :enableHover=\"true\"\n                    :resourceFields=\"resourceFields\" :resources=\"resources\" :highlightWeekends=\"true\" :rowHeight=\"46\" :taskbarHeight=\"25\"\n                    :timelineSettings=\"timelineSettings\" :columns=\"columns\" :eventMarkers=\"eventMarkers\"\n                    :labelSettings=\"labelSettings\" :editDialogFields=\"editDialogFields\"\n                    :projectStartDate=\"projectStartDate\" :projectEndDate=\"projectEndDate\"\n                    :splitterSettings=\"splitterSettings\">\n                </ejs-gantt>\n            </div>\n        </div>\n\n\n    </div>\n</template>\n<script>\nimport { GanttComponent, Edit, Selection, Toolbar, DayMarkers } from \"@syncfusion/ej2-vue-gantt\";\nvar startDate;\n\nconst 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 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];\n\nfunction customFn(args) {\n    var endDate;\n    var gantt = document.getElementsByClassName('e-gantt')[0].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 (!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}\nconst endDateValidation = { required: [customFn, 'Please enter a value greater than the start date.'] };\nexport default {\n    components: {\n        'ejs-gantt': GanttComponent\n    },\n    data: function () {\n        return {\n            data: editingData,\n            dateFormat: 'MMM dd, y',\n            taskFields: {\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            editSettings: {\n                allowAdding: true,\n                allowEditing: true,\n                allowDeleting: true,\n                allowTaskbarEditing: true,\n                showDeleteConfirmDialog: true\n            },\n            toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'],\n            gridLines: 'Both',\n            height: '650px',\n            resourceFields: {\n                id: 'resourceId',\n                name: 'resourceName'\n            },\n            resources: editingResources,\n            timelineSettings: {\n                topTier: {\n                    unit: 'Week',\n                    format: 'MMM dd, y'\n                },\n                bottomTier: {\n                    unit: 'Day'\n                }\n            },\n            columns: [\n                { field: 'TaskID', width: 80 },\n                { field: 'TaskName', headerText: 'Job Name', width: '260', clipMode: 'EllipsisWithTooltip', validationRules: { required: true, minLength: [5, 'Task name should have a minimum length of 5 characters'] } },\n                { field: 'StartDate' },\n                { field: 'EndDate', validationRules: endDateValidation },\n                { field: 'Duration', validationRules: { required: true } },\n                { field: 'Progress', validationRules: { required: true, min: 0, max: 100 } },\n                { field: 'Predecessor' }\n            ],\n            labelSettings: {\n                leftLabel: 'TaskName',\n                rightLabel: 'resources'\n            },\n            editDialogFields: [\n                { type: 'General', headerText: 'General' },\n                { type: 'Dependency' },\n                { type: 'Resources' },\n                { type: 'Notes' },\n            ],\n            projectStartDate: new Date('03/26/2025'),\n            projectEndDate: new Date('09/01/2025'),\n            splitterSettings: {\n                columnIndex: 3\n            }\n        };\n    },\n    provide: {\n        gantt: [Edit, Selection, Toolbar, DayMarkers]\n    },\n    methods: {\n        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    }\n}\n</script>\n"
    },
    {
      "target": "src/components/gantt-default-editing/GanttView.vue",
      "content": "<template>\n  <Gantt />\n</template>\n\n<script setup>\nimport Gantt from '../../components/Gantt.vue'\n</script>"
    }
  ]
}