Copy paste records in React Gantt component

2 Feb 202314 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.

index.jsx

import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    import { GanttComponent, Inject, Edit, Selection, ContextMenu } from '@syncfusion/ej2-react-gantt';
    import { data } from './datasource';
    function App () {
            const taskFields = {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                duration: 'Duration',
                progress: 'Progress',
                dependency: 'Predecessor',
                child: 'subtasks'
            };
            const editSettings = {
                allowAdding: true,
                allowEditing: true,
                allowDeleting: true
            };
            const contextMenuItems = [{ text: 'Copy', target: '.e-content', id: 'copy' },
                { text: 'Paste', target: '.e-content', id: 'paste' }
            ];
        
       let  copiedRecord;
       let gantt;
      function  contextMenuClick(args) {
            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 contextMenuOpen(args ) {
            if (args.type !== 'Header') {
                if (copiedRecord) {
                    args.hideItems.push('Copy');
                } else {
                    args.hideItems.push('Paste');
                 }
            }
        };
       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,'Below',index);
                  if(childRecord.hasChildRecords) {
                     addChildRecords(childRecord, index + (i+1));
                  }
            }
          };
            return <GanttComponent dataSource={data} taskFields={taskFields} editSettings={editSettings} enableContextMenu={true} contextMenuItems={contextMenuItems} contextMenuClick={contextMenuClick} contextMenuOpen={contextMenuOpen} ref={gantt => gantt = gantt} height='450px'>
                <Inject services={[Edit, ContextMenu, Selection]}/>
            </GanttComponent>
    };
    ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, ContextMenu } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App () {
        const taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            child: 'subtasks'
        };
        const editSettings = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true
        };
        const contextMenuItems = [{ text: 'Copy', target: '.e-content', id: 'copy' },
            { text: 'Paste', target: '.e-content', id: 'paste' }
        ];
    
   let  copiedRecord: any;
   let gantt:any;
  function  contextMenuClick(args:any) {
        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 contextMenuOpen(args:any ) {
        if (args.type !== 'Header') {
            if (copiedRecord) {
                args.hideItems.push('Copy');
            } else {
                args.hideItems.push('Paste');
             }
        }
    };
   function  addChildRecords(record: any, index: any) {
        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,'Below',index);
              if(childRecord.hasChildRecords) {
                 addChildRecords(childRecord, index + (i+1));
              }
        }
      };
        return <GanttComponent dataSource={data} taskFields={taskFields} editSettings={editSettings} enableContextMenu={true} enableContextMenu={true} contextMenuItems={contextMenuItems} contextMenuClick={contextMenuClick} contextMenuOpen={contextMenuOpen} ref={gantt => gantt = gantt} height='450px'>
            <Inject services={[Edit, ContextMenu, Selection]}/>
        </GanttComponent>;
};
ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>