Drag and Drop the Record from another component to Gantt

17 Feb 20224 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.

<ejs-gantt id='Gantt' dataSource="ViewBag.DataSource" height="280px" gridLines="Both" treeColumnIndex="1"
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration"
                        resourceInfo="Resources" progress="Progress" dependency="Predecessor" child="SubTasks">
    <e-gantt-editsettings allowEditing="true"></e-gantt-editsettings>
    <e-gantt-resourcefields id="ResourceId" name="ResourceName"></e-gantt-resourcefields>
    <e-gantt-labelSettings rightLabel="${if(Resources)}${Resources}${/if}"></e-gantt-labelSettings>
<ejs-treeview id="treedata" allowDragAndDrop="true" nodeDragStop="nodeDragStop">
    <e-treeview-fields dataSource="ViewBag.projectResources" id="ResourceId" text="ResourceName"></e-treeview-fields>
    function nodeDragStop(args) {
        var ganttChart = document.getElementById('Gantt').ej2_instances[0];
        var chartEle = ej.base.closest(args.target, '.e-chart-row');
        var gridEle = ej.base.closest(args.target, '.e-row');
        if (gridEle) {
            var index = ganttChart.treeGrid.getRows().indexOf(gridEle);
        var record = args.draggedNodeData;
        var selectedData = ganttChart.flatData[ganttChart.selectedRowIndex];
        var selectedDataResource = selectedData.taskData.Resources;
        var resources = [];
        if (selectedDataResource) {
            for (var i = 0; i < selectedDataResource.length; i++) {
        if (chartEle || gridEle) {
            var data = {
                TaskId: selectedData.taskData.TaskId,
                Resources: resources
            var elements = document.querySelectorAll('.e-drag-item');
            while (elements.length > 0 && elements[0].parentNode) {
public IActionResult Index()
    ViewBag.DataSource = GanttData.ProjectNewData();
    ViewBag.projectResources = projectResources();
    return View();

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