# gantt-default-editing

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

**Framework:** vue  **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/vue/gantt-default-editing.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-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.vue

```vue
<template>
    <div>
        <div class="control-section">
            <div class="content-wrapper">
                <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :dateFormat="dateFormat"
                    :taskFields="taskFields" :editSettings="editSettings" :toolbar="toolbar" :allowSelection="true"
                    :gridLines="gridLines" :height="height" :treeColumnIndex="1" :actionBegin="actionBegin" :enableHover="true"
                    :resourceFields="resourceFields" :resources="resources" :highlightWeekends="true" :rowHeight="46" :taskbarHeight="25"
                    :timelineSettings="timelineSettings" :columns="columns" :eventMarkers="eventMarkers"
                    :labelSettings="labelSettings" :editDialogFields="editDialogFields"
                    :projectStartDate="projectStartDate" :projectEndDate="projectEndDate"
                    :splitterSettings="splitterSettings">
                </ejs-gantt>
            </div>
        </div>

    </div>
</template>
<script>
import { GanttComponent, Edit, Selection, Toolbar, DayMarkers } from "@syncfusion/ej2-vue-gantt";
var startDate;

const 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 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] }
];

function customFn(args) {
    var endDate;
    var gantt = document.getElementsByClassName('e-gantt')[0].ej2_instances[0]
    if (args.element && args.value) {
        var dateOptions = { format: gantt.dateFormat, type: 'dateTime', skeleton: 'yMd' };
        endDate = gantt.globalize.parseDate(args.value, dateOptions);
        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 endDateValidation = { required: [customFn, 'Please enter a value greater than the start date.'] };
export default {
    components: {
        'ejs-gantt': GanttComponent
    },
    data: function () {
        return {
            data: editingData,
            dateFormat: 'MMM dd, y',
            taskFields: {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                endDate: 'EndDate',
                duration: 'Duration',
                progress: 'Progress',
                dependency: 'Predecessor',
                parentID: 'ParentId',
                notes: 'info',
                resourceInfo: 'resources'
            },
            editSettings: {
                allowAdding: true,
                allowEditing: true,
                allowDeleting: true,
                allowTaskbarEditing: true,
                showDeleteConfirmDialog: true
            },
            toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'],
            gridLines: 'Both',
            height: '650px',
            resourceFields: {
                id: 'resourceId',
                name: 'resourceName'
            },
            resources: editingResources,
            timelineSettings: {
                topTier: {
                    unit: 'Week',
                    format: 'MMM dd, y'
                },
                bottomTier: {
                    unit: 'Day'
                }
            },
            columns: [
                { field: 'TaskID', width: 80 },
                { field: 'TaskName', headerText: 'Job Name', width: '260', clipMode: 'EllipsisWithTooltip', validationRules: { required: true, minLength: [5, 'Task name should have a minimum length of 5 characters'] } },
                { field: 'StartDate' },
                { field: 'EndDate', validationRules: endDateValidation },
                { field: 'Duration', validationRules: { required: true } },
                { field: 'Progress', validationRules: { required: true, min: 0, max: 100 } },
                { field: 'Predecessor' }
            ],
            labelSettings: {
                leftLabel: 'TaskName',
                rightLabel: 'resources'
            },
            editDialogFields: [
                { type: 'General', headerText: 'General' },
                { type: 'Dependency' },
                { type: 'Resources' },
                { type: 'Notes' },
            ],
            projectStartDate: new Date('03/26/2025'),
            projectEndDate: new Date('09/01/2025'),
            splitterSettings: {
                columnIndex: 3
            }
        };
    },
    provide: {
        gantt: [Edit, Selection, Toolbar, DayMarkers]
    },
    methods: {
        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;
            }
        }
    }
}
</script>

```

### src/components/gantt-default-editing/GanttView.vue

```vue
<template>
  <Gantt />
</template>

<script setup>
import Gantt from '../../components/Gantt.vue'
</script>
```