New Row Position in React Gantt Chart Component

18 Nov 201816 minutes to read

In Gantt, a new row can be added in one of the following positions: Top, Bottom, Above, Below and Child. This position can be specified through the newRowPostion property. We can make use of the toolbarClick event to create a context menu that specifies the position in which the new row is to be added when adding a record through toolbar click.

The following code snippets demonstrate how to achieve this.

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, Selection, Toolbar, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { ContextMenuComponent } from '@syncfusion/ej2-react-navigations';
import { data } from './datasource';
function  App (){
    const  taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
  };
  const editOptions = {
      allowAdding: true
  };
  let ganttInstance;
  const toolbarOptions = ['Add'];
 let cMenu
 function  toolbarClick(args) {
        if (args.item.id === 'GanttExport_add') {
            cMenu.open(40, 20);
        }
    }
  const menuItems = [
            {
                text: 'Bottom'
            },
            {
                text: 'Above'
            },
            {
                text: 'Below'
            },
            {
                text: 'Child'
            },
            {
                text: 'Top'
            }
        ];
      function  select(args) {
            if (args.item.text === "Bottom") {
            ganttInstance.editSettings.newRowPosition = "Bottom";
            ganttInstance.openAddDialog();
        } else if (args.item.text === "Above") {
            if (ganttInstance.selectedRowIndex == -1) {
                alert("Please select any row");
            } else {
                ganttInstance.editSettings.newRowPosition = "Above";
                ganttInstance.openAddDialog();
            }
        } else if (args.item.text === "Below") {
            if (ganttInstance.selectedRowIndex == -1) {
                alert("Please select any row");
            } else {
                ganttInstance.editSettings.newRowPosition = "Child";
                ganttInstance.openAddDialog();
            }
        } else if (args.item.text === "Child") {
            if (ganttInstance.selectedRowIndex == -1) {
                alert("Please select any row");
            } else {
                ganttInstance.editSettings.newRowPosition = "Child";
                ganttInstance.openAddDialog();
            }
        } else if (args.item.text === "Top") {
            ganttInstance.editSettings.newRowPosition = "Top";
            ganttInstance.openAddDialog();
        }
        }

        return<div>
        <ContextMenuComponent id='contextmenu' ref={(scope) => cMenu = scope} items={menuItems} select={select}/>
        <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
        editSettings={editOptions} toolbar={toolbarOptions} toolbarClick={toolbarClick} height = '450px' ref={gantt => ganttInstance = gantt}>
            <Inject services={[Edit, Selection, Toolbar]} />
        </GanttComponent></div>
};
ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
    GanttComponent, Inject, EditSettingsModel, Selection, Edit,
    Toolbar, ContextMenu as GanttContextMenu, TaskFieldsModel
} from '@syncfusion/ej2-react-gantt';

import { ContextMenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import { data } from './datasource';

function App() {

    const taskFields: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const editSettings: EditSettingsModel = {
        allowAdding: true
    };

    const toolbar: string[] = ['Add'];

    const menuItems: MenuItemModel[] = [
        { text: 'Bottom' },
        { text: 'Above' },
        { text: 'Below' },
        { text: 'Child' },
        { text: 'Top' }
    ];

    let ganttInstance: any = null;
    let contextMenuObj: any = null;

    function select(args: any) {
        if (args.item.text === "Bottom") {
            ganttInstance.editSettings.newRowPosition = "Bottom";
            ganttInstance.openAddDialog();
        } else if (args.item.text === "Above") {
            if (ganttInstance.selectedRowIndex == -1) {
                alert("Please select any row");
            } else {
                ganttInstance.editSettings.newRowPosition = "Above";
                ganttInstance.openAddDialog();
            }
        } else if (args.item.text === "Below") {
            if (ganttInstance.selectedRowIndex == -1) {
                alert("Please select any row");
            } else {
                ganttInstance.editSettings.newRowPosition = "Below";
                ganttInstance.openAddDialog();
            }
        } else if (args.item.text === "Child") {
            if (ganttInstance.selectedRowIndex == -1) {
                alert("Please select any row");
            } else {
                ganttInstance.editSettings.newRowPosition = "Child";
                ganttInstance.openAddDialog();
            }
        } else if (args.item.text === "Top") {
            ganttInstance.editSettings.newRowPosition = "Top";
            ganttInstance.openAddDialog();
        }
    }

    function toolbarClick(args: any) {
        if (args.item.id === 'ganttDefault_add') {
            contextMenuObj.open(40, 20);
        }
    }

    return (
        <div>
            <ContextMenuComponent
                id="contextmenu"
                items={menuItems}
                select={select}
                ref={(scope) => { contextMenuObj = scope; }}
            />

            <GanttComponent
                id="ganttDefault"
                height="430px"
                dataSource={data}
                taskFields={taskFields}
                editSettings={editSettings}
                toolbar={toolbar}
                toolbarClick={toolbarClick}
                ref={(g) => { ganttInstance = g; }}>
                <Inject services={[Selection, Edit, Toolbar, GanttContextMenu]} />
            </GanttComponent>
        </div>
    );
}

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/34.1.29/tailwind3.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>