Open add and edit dialogs in Angular Gantt component
18 Oct 20255 minutes to read
The add and edit dialogs in the Angular Gantt component enable efficient task creation and modification, streamlining project management workflows. The openAddDialog method opens a dialog to add a new task, populating fields like id, name, or startDate based on taskFields mappings. The openEditDialog method opens a dialog to modify the currently selected task, ideal for updating task details like duration or dependencies. For example, clicking a button to open the add dialog allows users to create a new task, while selecting a task and opening the edit dialog enables quick updates. These dialogs, requiring EditService injection and editSettings.allowAdding and editSettings.allowEditing enabled, integrate with resources, dependencies, and critical path calculations, supporting validation and events like actionBegin for customized workflows. To use openEditDialog effectively, select a row through user interaction or by setting selectedRowIndex, ensuring the dialog opens with the correct task data. Configure valid taskFields mappings to ensure dialog fields display and save data accurately, and enhance dialogs with custom fields using events like actionBegin or actionComplete for tailored workflows.
The following code example shows how to open add and dialog on separate button click actions.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttModule, GanttComponent, EditSettingsModel , EditService, SelectionService} from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { editingData, editingResources } from './data';
@Component({
imports: [GanttModule, ButtonModule],
providers: [EditService, SelectionService],
standalone: true,
selector: 'app-root',
template:
`<button ejs-button id='editDialog' (click)='edit()'>Edit Dialog</button>
<br><br><br>
<button ejs-button id='addDialog' (click)='add()'>Add Dialog</button>
<br><br><br>
<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [editDialogFields]="editDialogFields" [editSettings]="editSettings" [resourceNameMapping]= "resourceNameMapping" [resourceIDMapping]="resourceIdMapping" [resources]= "resources"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
@ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
public data?: object[];
public taskSettings?: object;
public editDialogFields?: object[];
public resourceNameMapping?: string;
public resourceIdMapping?: string;
public resources?: object[];
public labelSettings?: object;
public editSettings?: EditSettingsModel;
public ngOnInit(): void {
this.data = editingData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID',
notes: 'info',
resourceInfo: 'resources'
};
this.editDialogFields = [
{ type: 'General', headerText: 'General' },
{ type: 'Dependency' },
{ type: 'Resources' },
{ type: 'Notes' }
];
this.resourceNameMapping = 'resourceName';
this.resourceIdMapping = 'resourceId';
this.resources = editingResources;
this.editSettings = {
allowAdding: true,
allowEditing: true,
allowTaskbarEditing: true
};
}
public edit(): void {
this.ganttInstance.editModule.dialogModule.openEditDialog(this.ganttInstance.selectedRowIndex);
};
public add(): void {
this.ganttInstance.editModule.dialogModule.openAddDialog();
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));