Drag and drop record from external component in React Gantt component

18 May 2022 / 2 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.

Source

Preview

index.jsx

index.html

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection } from '@syncfusion/ej2-react-gantt';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { closest } from '@syncfusion/ej2-base';
import { editingData, editingResources } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            resourceInfo: 'resources',
            child: 'subtasks'
        };
        this.resourceFields = {
            id: 'resourceId',
            name: 'resourceName'
        };
        this.editSettings = {
            allowEditing: true
        };
        this.labelSettings = {
            rightLabel: 'resources'
        };
        this.fields = { dataSource: editingResources, id: 'resourceId', text: 'resourceName' };
        this.allowDragAndDrop = true;
    }
    nodeDragStop(args) {
        let chartEle = closest(args.target, '.e-chart-row');
        let gridEle = closest(args.target, '.e-row');
        if (gridEle) {
            var index = this.ganttInstance.treeGrid.getRows().indexOf(gridEle);
            this.ganttInstance.selectRow(index);
        }
        let record = args.draggedNodeData;
        let selectedData = this.ganttInstance.flatData[this.ganttInstance.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.ganttInstance.updateRecordByID(data);
            var elements = document.querySelectorAll('.e-drag-item');
            while (elements.length > 0 && elements[0].parentNode) {
                elements[0].parentNode.removeChild(elements[0]);
            }
        }
    }
    ;
    render() {
        return <div><GanttComponent dataSource={editingData} taskFields={this.taskFields} resources={editingResources} editSettings={this.editSettings} height='450px' resourceFields={this.resourceFields} labelSettings={this.labelSettings} ref={gantt => this.ganttInstance = gantt}>
           <Inject services={[Edit, Selection]}/>
        </GanttComponent>
        <TreeViewComponent fields={this.fields} allowDragAndDrop={this.allowDragAndDrop} nodeDragStop={this.nodeDragStop.bind(this)}/>);
        </div>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/20.1.55/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, ToolbarItem }from '@syncfusion/ej2-react-gantt';
import { DragAndDropEventArgs } from '@syncfusion/ej2-navigations';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { closest,addClass } from '@syncfusion/ej2-base';
import { editingData, editingResources } from './datasource';
class App extends React.Component<{}, {}>{
    private ganttInstance: any;
    public taskFields: any = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      dependency: 'Predecessor',
      resourceInfo: 'resources',
      child: 'subtasks'
    };
    public resourceFields = {
        id: 'resourceId',
        name: 'resourceName'
    };
    public editSettings = {
      allowEditing: true
    };
    public labelSettings = {
      rightLabel: 'resources'
    };
    public fields = { dataSource: editingResources, id: 'resourceId', text: 'resourceName' };
    public allowDragAndDrop = true;
    public nodeDragStop(args: DragAndDropEventArgs): void {
        let chartEle: any = closest(args.target, '.e-chart-row');
        let gridEle: any = closest(args.target, '.e-row');
        if(gridEle){
          var index = this.ganttInstance.treeGrid.getRows().indexOf(gridEle);
          this.ganttInstance.selectRow(index);
        }
        let record: any = args.draggedNodeData;
        let selectedData = this.ganttInstance.flatData[this.ganttInstance.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.ganttInstance.updateRecordByID(data);
            var elements = document.querySelectorAll('.e-drag-item');
            while (elements.length > 0 && elements[0].parentNode) {
                elements[0].parentNode.removeChild(elements[0]);
            }
        }
    };
  
    render() {
        return <div><GanttComponent dataSource={editingData} taskFields={this.taskFields} resources={editingResources} editSettings={this.editSettings}
         height='450px' resourceFields={this.resourceFields}  labelSettings={this.labelSettings} ref={gantt => this.ganttInstance = gantt}>
           <Inject services={[ Edit, Selection]} />
        </GanttComponent>
        <TreeViewComponent fields={this.fields} allowDragAndDrop={this.allowDragAndDrop} nodeDragStop={this.nodeDragStop.bind(this)}/>);
        </div>
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

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

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!