Copy and Paste records in Gantt

17 Feb 20224 minutes to read

You can copy and paste a record in the Gantt chart by using the addRecord method and custom context menu. It is also possible to copy and paste the parent record with multiple hierarchical child records on the required position.

CSHTML

@{
    List<object> contextItems = new List<object> { "AutoFitAll", "AutoFit", "TaskInformation", "DeleteTask", "Save", "Cancel",
             "SortAscending", "SortDescending", "Add", "DeleteDependency", "Convert"};
    contextItems.Add(new { text= "Copy", target= ".e-content", id= "copy" });
    contextItems.Add(new { text= "Paste", target= ".e-content", id= "paste" });

}

 @Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name("TaskName"
 ).StartDate("StartDate").Duration("Duration").Progress("Progress").Dependency("Predecessor").Child("SubTasks")
 ).EnableContextMenu(true).EditSettings(es => es.AllowAdding(true).AllowEditing(true).AllowDeleting(true)
 ).ContextMenuItems(contextItems).ContextMenuOpen("ContextMenuOpen").ContextMenuClick("ContextMenuClick").Render()

 <script>
     var copiedRecord;
        function ContextMenuOpen(args) {
            if (args.type !== 'Header') {
            if (copiedRecord) {
                args.hideItems.push('Copy');
            } else {
                args.hideItems.push('Paste');
             }
        }
    }
     function ContextMenuClick(args) {
            var gantt = document.getElementById("Gantt").ej2_instances[0];
            if (args.item.id === 'copy') {
            copiedRecord = args.rowData;
            copiedRecord.taskData.TaskID = gantt.currentViewData.length + 1;
        }
        if (args.item.id === 'paste') {
            gantt.addRecord(copiedRecord.taskData,'Below',args.rowData.index);
            if(copiedRecord.hasChildRecords) {
                addChildRecords(copiedRecord, args.rowData.index + 1);
            }
            copiedRecord = undefined;
        }
    }
    function addChildRecords(record, index) {
    for(var i=0; i<record.childRecords.length; i++) {
          var childRecord = record.childRecords[i];
          childRecord.taskData.TaskID = gantt.currentViewData.length + 1;
          gantt.addRecord(childRecord.taskData,'Child',index);
          if(childRecord.hasChildRecords) {
              addChildRecords(childRecord, index + (i+1));
          }
    }
  } 
    </script>

Copypasterecords.cs

public IActionResult Index()
        {
            ViewBag.DataSource = ProjectNewData();
            return View();
        }