Drag and drop from another component in Angular Gantt component

27 Apr 20249 minutes to read
In Gantt, it is possible to drag a record from another component and drop it in Gantt chart with updating the Gantt record. Here, dragging an item from TreeView component to Gantt and that item is updated as a resource for the Gantt record, we can achieve this, by using nodeDragStop event of TreeView control.
app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule, GanttAllModule } from '@syncfusion/ej2-angular-gantt'
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
import { EditService, SelectionService, ToolbarService } from '@syncfusion/ej2-angular-gantt'

import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { editingData, editingResources } from './data';
import { DragAndDropEventArgs } from '@syncfusion/ej2-navigations';
import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
import { closest,addClass } from '@syncfusion/ej2-base';
import { GanttComponent, ToolbarItem, EditSettingsModel, SelectionSettingsModel } from '@syncfusion/ej2-angular-gantt';

@Component({
imports: [
         GanttModule, GanttAllModule, TreeViewModule
    ],

providers: [EditService, SelectionService, ToolbarService],
standalone: true,
    selector: 'app-root',
    template:
    `<p><b>Gantt</b></p>
    <ejs-gantt id="ganttDefault" #gantt height="280px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" [timelineSettings]="timelineSettings" [labelSettings]="labelSettings" [treeColumnIndex]="1" height="450px" [allowSelection]="true" dateFormat="MMM dd, y" [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate" [highlightWeekends]="true" [gridLines]="gridLines" [editSettings]="editSettings" [toolbar]="toolbar"
    [resourceFields]="resourceFields" [resources]="resources" [splitterSettings]="splitterSettings"></ejs-gantt>
    <p><b>List</b></p>
    <ejs-treeview id="tree1" #treeObj height="200px" [fields]='field' [allowDragAndDrop]='allowDragAndDrop' (nodeDragStop)="onDragStop($event)" ></ejs-treeview>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    // Data for Gantt
   public data?: object[];
    public taskSettings?: object;
    public columns?: object[];
    public labelSettings?: object;
    public selectionSettings?: object;
    public projectStartDate?: Date;
    public projectEndDate?: Date;
    public toolbar?: object;
    public splitterSettings?: object;
    public editSettings?: object;
    public gridLines?: string;
    public resources?: object[];
    public resourceFields?: object;
    public field: Object = { dataSource: editingResources, id: 'ResourceId', text: 'ResourceName' };
    public allowDragAndDrop: boolean = true;
    @ViewChild('gantt')
    public ganttObj?: GanttComponent| any;
timelineSettings: any;
    public ngOnInit(): void {
        this.data = editingData;
        this.resources = editingResources;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            parentID:'ParentID',
            notes: 'Info',
            resourceInfo: 'Resources'
        };
        this.editSettings = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            showDeleteConfirmDialog: true
        };
        this.selectionSettings = {
            type: 'Multiple'
        };
        this.resourceFields = {
            id: 'ResourceId',
            name: 'ResourceName'
        };
        this.labelSettings = {
            leftLabel: 'TaskName',
            rightLabel: 'Resources'
        };
        this.projectStartDate= new Date('03/28/2019');
        this.projectEndDate= new Date('07/06/2019');
        this.splitterSettings = {
            columnIndex: 2
        };
        this.gridLines= 'Both';
        this.toolbar =  [ 'Add', 'Update', 'Edit', 'Delete', 'ExpandAll', 'CollapseAll',];
    }
    created(): void {
        addClass([this.ganttObj.ganttChartModule.chartElement], 'e-droppable');
    };
    onDragStop(args: DragAndDropEventArgs): void {
        args.cancel = true;
        let chartEle: any = closest(args.target, '.e-chart-row');
        let gridEle: any = closest(args.target, '.e-row');
        if(gridEle){
          var index = this.ganttObj.treeGrid.getRows().indexOf(gridEle);
          this.ganttObj.selectRow(index);
        }
        if (chartEle) {
            var index = chartEle.rowIndex;
            this.ganttObj.selectRow(index);
        }
        let record: any = args.draggedNodeData;
        let selectedData = this.ganttObj.flatData[this.ganttObj.selectedRowIndex];
        let selectedDataResource = selectedData.taskData.Resources;
        let resources = [];
        if (selectedDataResource) {
            for (var i = 0; i < selectedDataResource.length; i++) {
              resources.push(selectedDataResource[i].ResourceId);
            }
        }
        resources.push(parseInt(record.id));
        if (chartEle || gridEle) {
            var data = {
                TaskID: selectedData.taskData.TaskID,
                Resources: resources
            };
            this.ganttObj.updateRecordByID(data);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
The following screenshot shows dropping record from another component in to Gantt, and Rose Fuller is added as resource for the task Develop floor plan estimation.
Dropping Record