# gantt-default-editing

> Gantt chart sample supporting task creation, editing, deletion, and dependency changes.

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

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-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/default-editing.component.ts

```typescript
import { Component, OnInit, ViewChild} from '@angular/core';
import { defaultEditingData, editingResources } from '../data';
import { DayMarkersService, EditService, GanttComponent, GanttModule, SelectionService, ToolbarService } from '@syncfusion/ej2-angular-gantt';
@Component({
    selector: 'ej2-ganttediting',
    templateUrl: 'default-editing.html',
    standalone: true,
    providers: [ToolbarService, EditService, DayMarkersService, SelectionService],
    imports: [ GanttModule]
})
export class GanttEditingComponent implements OnInit {
  @ViewChild('gantt')
    public ganttObj!: GanttComponent;
    public data!: object[];
    public resources!: object[];
    public resourceFields!: object ;
    public taskSettings!: object;
    public columns!: object[];
    public timelineSettings!: object;
    public gridLines!: string;
    public labelSettings!: object;
    public projectStartDate!: Date;
    public projectEndDate!: Date;
    public editSettings!: object;
    public eventMarkers!: object[];
    public toolbar!: string[];
    public splitterSettings!: object;
    private startDate!: Date;
    public ngOnInit(): void {
        this.data = defaultEditingData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            durationUnit: 'DurationUnit',
            progress: 'Progress',
            dependency: 'Predecessor',
            parentID:'ParentId',
            notes: 'info',
            resourceInfo: 'resources'
        };
        this.resourceFields = {
            id: 'resourceId',
            name: 'resourceName'
        };
        this.editSettings = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            showDeleteConfirmDialog: true
        };
        this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'];
        this.columns = [
            { field: 'TaskID', width: 80 },
            { field: 'TaskName', headerText: 'Job Name', width: 250, clipMode: 'EllipsisWithTooltip', validationRules: { required: true, minLength: [5, 'Task name should have a minimum length of 5 characters'] } },
            { field: 'Duration', validationRules: { required: true} },
            { field: 'StartDate' },
            { field: 'EndDate', validationRules: { required: [this.customFn.bind(this), 'Please enter a value greater than the start date.'] } },
            { field: 'Progress', validationRules: { required: true, min: 0, max: 100 } },
            { field: 'Predecessor' }
        ];
        this.timelineSettings = {
            topTier: {
                unit: 'Week',
                format: 'MMM dd, y',
            },
            bottomTier: {
                unit: 'Day',
                count: 1
            },
        };
        this.gridLines = 'Both';
        this.labelSettings = {
            leftLabel: 'TaskName',
            rightLabel: 'resources'
        };
        this.projectStartDate= new Date('03/26/2025');
        this.projectEndDate= new Date('09/10/2025');
       
        this.resources = editingResources;
        this.splitterSettings = {
           columnIndex: 3
        };
        
    }
    public actionBegin(args: any): void {
        if (args.columnName === "EndDate" || args.requestType === "beforeOpenAddDialog" || args.requestType === "beforeOpenEditDialog") {
            this.startDate = args.rowData.ganttProperties.startDate;
        }
        if (args.requestType === "taskbarediting" && args.taskBarEditAction === "ChildDrag") {
            this.startDate = args.data.ganttProperties.startDate;
        }
    }
    public customFn(args: any): boolean {
      var endDate;
      var gantt = (document.getElementsByClassName('e-gantt')[0] as any).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(!this.startDate && gantt.editModule.dialogModule['beforeOpenArgs']) {
          this.startDate = gantt.editModule.dialogModule['beforeOpenArgs'].rowData['ganttProperties'].startDate;
          endDate = (gantt.editModule.dialogModule['beforeOpenArgs'].rowData['ganttProperties'].endDate);
        }
        this.startDate.setHours(0, 0, 0, 0);
        endDate.setHours(0, 0, 0, 0);
      }
      return this.startDate <= endDate;
    }
    public created(): void {
        if (document.querySelector('.e-bigger')) {
            this.ganttObj.rowHeight = 48;
            this.ganttObj.taskbarHeight = 28;
        }
    }
}

```

### src/components/gantt-default-editing/default-editing.html

```html

<div class="control-section">
    <ejs-gantt id="ganttDefault" #gantt height="650px" rowHeight="46" taskbarHeight="25" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns"
        [timelineSettings]="timelineSettings" [labelSettings]="labelSettings" (created)="created()" [treeColumnIndex]="1"
        [allowSelection]="true" dateFormat="MMM dd, y" [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate" [highlightWeekends]="true"
        [gridLines]="gridLines" [eventMarkers]="eventMarkers" [editSettings]="editSettings" (actionBegin)="actionBegin($event)"
        [toolbar]="toolbar" [resourceFields]="resourceFields" [enableHover]="true"
        [resources]="resources" [splitterSettings]="splitterSettings">
    </ejs-gantt>
    <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>
```