Configure custom fields in Angular Gantt component

18 Oct 20258 minutes to read

The Angular Gantt component allows you to enhance task data management by adding custom fields to the add/edit dialogs, seamlessly integrating them into the General tab using the actionBegin and actionComplete events. For example, adding a priority dropdown to the General tab enables users to assign task priorities during creation or editing. Inject EditService and enable editSettings.allowAdding and editSettings.allowEditing to support dialog modifications. Configure valid taskFields mappings or custom data properties (e.g., priority) to persist custom field values in the data source. Use actionBegin to define custom field properties (e.g., textbox, dropdown) before the dialog opens, and actionComplete to handle field data after user input. This feature supports various field types, such as dropdowns or numerics, and integrates with task scheduling, dependencies, and critical path, ensuring custom fields align with project workflows. Ensure the dialog module is configured to render custom fields accurately, enhancing flexibility in task management.

import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttComponent, ToolbarItem,  SelectionSettingsModel,ActionBeginArgs, ActionCompleteArgs, GanttModule, EditService, SelectionService, ToolbarService } from '@syncfusion/ej2-angular-gantt';
import { CheckBox } from "@syncfusion/ej2-buttons";
import { TextBox, NumericTextBox, MaskedTextBox } from "@syncfusion/ej2-inputs";
import { DatePicker, DateTimePicker } from "@syncfusion/ej2-calendars";
import { DropDownList } from "@syncfusion/ej2-dropdowns";
import { editingData } from './data';

@Component({
  imports: [GanttModule],
  providers: [EditService, SelectionService, ToolbarService],
  standalone: true,
  selector: 'app-root',
  template:
    `<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="editingData" [taskFields]="taskSettings"  [toolbar]="toolbar" [editDialogFields]="editDialogFields" [addDialogFields]="addDialogFields" [editSettings]="editSettings" [columns]="columns" (actionBegin)="actionBegin($event)" (actionComplete)="actionComplete($event)"> </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent | any;
  public divElement?: any;
  public inputs = {
    booleanedit: CheckBox,
    dropdownedit: DropDownList,
    datepickeredit: DatePicker,
    datetimepickeredit: DateTimePicker,
    maskededit: MaskedTextBox,
    numericedit: NumericTextBox,
    stringedit: TextBox
  };
  public editingData?: object[];
  public taskSettings?: object;
  public editSettings?: object;
  public editDialogFields?: object[];
  public addDialogFields?: object[];
  public columns?: object[];
  public toolbar?: ToolbarItem[];
  public selectionSettings?: SelectionSettingsModel;

  public ngOnInit(): void {
    this.editingData = editingData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID',
    };
    this.editSettings = {
      allowEditing: true,
      allowAdding: true,
      allowDeleting: true,
      mode: "Dialog"
    };
    this.editDialogFields = [
      { type: 'General', headerText: 'General' },
      { type: 'Dependency' },
      { type: 'Resources' },
      { type: 'Notes' }
    ];
    this.addDialogFields = [
      { type: 'General', headerText: 'General' },
      { type: 'Dependency' },
      { type: 'Resources' },
      { type: 'Notes' }
    ];
    this.columns = [
      { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
      { field: 'TaskName', headerText: 'Task Name', width: '250' },
      { field: 'StartDate', headerText: 'Start Date', width: '150' },
      { field: 'EndDate', headerText: 'End Date', width: '150' },
      { field: 'Duration', headerText: 'Duration', width: '150' },
      { field: 'Progress', headerText: 'Progress', width: '150' },
      { field: 'CustomField', headerText: 'CustomField', width: '150' }
    ];
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll'];
  }
  
  public actionBegin(args: ActionBeginArgs): void {
    if (args.requestType === "beforeOpenEditDialog" || args.requestType === "beforeOpenAddDialog") {
      var column = this.ganttInstance.columnByField["CustomField"];
      this.divElement = this.ganttInstance.createElement("div", { className: "e-edit-form-column" });
      var inputElement: any;
      inputElement = this.ganttInstance.createElement("input", {
        attrs: {
          type: "text",
          id: this.ganttInstance.controlId + "" + column.field,
          name: column.field,
          title: column.field
        }
      });
      this.divElement.appendChild(inputElement);
      var input = {
        enabled: true,
        floatLabelType: "Auto",
        placeholder: "CustomField",
        value: (args.rowData as any).CustomField
      };
      var inputObj = new (this as any).inputs[column.editType](input);
      inputObj.appendTo(inputElement);
    }
  };

  public actionComplete(args: ActionCompleteArgs): void {
    if (args.requestType === "openEditDialog" || args.requestType === "openAddDialog") {
      var generalTab = document.getElementById(this.ganttInstance.controlId + "GeneralTabContainer");
      generalTab!.appendChild(this.divElement);
    }
  };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See also