import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { ToolbarItem, EditSettingsModel, GanttComponent, Gantt, GanttModel, EditSettings } from '@syncfusion/ej2-angular-gantt';
@Component({
selector: 'app-syncfusion-gantt',
template:
`
<button (click)="addRecord()">Add</button>
<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings"
[editSettings]="editSettings" [toolbar]="toolbar" [columns]="columns" [addDialogFields]="addDialogFields"
[editDialogFields]="editDialogFields" ></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class SyncfusionGanttComponent implements OnInit {
public data: object[];
public taskSettings: object;
public editSettings: EditSettingsModel;
public toolbar: ToolbarItem[];
public columns: object[];
public addDialogFields: object[];
public editDialogFields: object[];
public ganttObj: GanttComponent;
public ed: EditSettings;
public ngOnInit() {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
ProjectNumber: 23,
subtasks: [
{
TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'),
Duration: 4, Progress: 50, ProjectNumber: 34
}
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.editSettings = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'ProjectNumber', headerText: 'Project Number', textAlign: 'Left', width: '150' },
{ field: 'TaskName', headerText: 'Task Name', width: '250' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
this.addDialogFields = [
{ type: 'General', fields: ['TaskID', 'TaskName', 'StartDate', 'Duration', 'Progress', 'ProjectNumber'] },
{ type: 'Dependency' },
{ type: 'Resources' },
{ type: 'Notes' },
],
this.editDialogFields = [
{ type: 'General', fields: ['TaskID', 'TaskName', 'StartDate', 'Duration', 'Progress', 'ProjectNumber'] },
{ type: 'Dependency' },
{ type: 'Resources' }
];
this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
}
addRecord = () => {
const data = {
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
ProjectNumber: 23
};
this.ganttObj.addRecord(data, );
}
}
