Open add edit dialog in Angular Gantt component

28 Sep 20235 minutes to read

In the Gantt component, add and edit dialogs can be opened dynamically by using openAddDialog and openEditDialog methods. The following code example shows how to open add and dialog on separate button click actions.

app.component.ts

import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { EditSettingsModel } from '@syncfusion/ej2-angular-gantt';
import { editingData , editingResources } from './data';

@Component({
    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{
    // Data for Gantt
    public data?: object[];
    public taskSettings?: object;
    public editDialogFields?: object[];
    public resourceNameMapping?: string;
    public resourceIdMapping?: string;
    public resources?: object[];
    public labelSettings?: object;
    public editSettings?: EditSettingsModel;
    @ViewChild('gantt', {static: true})
    public ganttObj?: GanttComponent| any;
    public ngOnInit(): void {
        this.data = editingData;
        this.taskSettings = {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                endDate: 'EndDate',
                duration: 'Duration',
                progress: 'Progress',
                dependency: 'Predecessor',
                child: 'subtasks',
                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 = {
                allowEditing: true,
                allowTaskbarEditing: true
        };
    }
    edit(): void {
        this.ganttObj.editModule.dialogModule.openEditDialog(this.ganttObj.selectedRowIndex);
        };
        add(): void {
        this.ganttObj.editModule.dialogModule.openAddDialog();
        };
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { EditService, SelectionService } from '@syncfusion/ej2-angular-gantt';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, GanttModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [EditService, SelectionService]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

NOTE: You should select any one of the row in the Gantt to open the edit dialog.