Drag and drop record from external component in React Gantt component

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'));

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'));

<!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/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>