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.
@{
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" });
}
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" enableContextMenu="true" contextMenuItems="contextItems"
contextMenuOpen="contextMenuOpen" contextMenuClick="contextMenuClick">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks" dependency="Predecessor">
</e-gantt-taskfields>
<e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true">
</e-gantt-editsettings>
</ejs-gantt>
<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 ganttObj = 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;
}
}
</script>
public IActionResult Index()
{
ViewBag.DataSource = ProjectNewData();
return View();
}