Taskbar editing in React Gantt component

13 Dec 202312 minutes to read

Taskbar editing

Modify the task details through user interaction, such as resizing and dragging the taskbar, by enabling the allowTaskbarEditing property.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit } from '@syncfusion/ej2-react-gantt';
import { data} from './datasource';
function App (){
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
  const  editOptions = {
    allowTaskbarEditing: true
  };
        return <GanttComponent dataSource={data} taskFields={taskFields}
        editSettings={editOptions}  height = '450px'>
            <Inject services={[Edit]} />
        </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data} from './datasource';
function App (){
    const taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
  const editOptions: EditSettingsModel = {
    allowTaskbarEditing: true
  };
        return <GanttComponent dataSource={data} taskFields={taskFields}
        editSettings={editOptions}  height = '450px'>
            <Inject services={[Edit]} />
        </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!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/29.1.33/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>

Prevent editing for specific tasks

On taskbar edit action, the taskbarEditing event will be triggered. You can prevent the taskbar from editing using the taskbarEditing event. This can be done by setting cancel property of taskbarEditing event argument to true. And we can hide the taskbar editing indicators like taskbar resizer, progress resizer and connector points by using queryTaskbarInfo event. The following code example shows how to achieve this.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit } from '@syncfusion/ej2-react-gantt';
import { data} from './datasource';
function App(){
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
   const editOptions = {
        allowTaskbarEditing: true
    };
    function taskbarEditing(args){
        if (args.data.TaskID == 4) // We can't edit Task Id 4
            args.cancel = true;
    };
    function queryTaskbarInfo(args) {
        if (args.data.TaskID == 6) {
            args.taskbarElement.className += ' e-preventEdit' // Taskbar editing indicators are disabled
        }
    };
        return <GanttComponent dataSource={data} taskFields={taskFields}
        editSettings={editOptions} taskbarEditing={taskbarEditing} height = '450px' queryTaskbarInfo={queryTaskbarInfo}>
        <Inject services={[Edit]} />
        </GanttComponent>
   };
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data} from './datasource';
function App(){
    const taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
   const editOptions: EditSettingsModel = {
        allowTaskbarEditing: true
    };
    function taskbarEditing(args: any){
        if (args.data.TaskID == 4) // We can't edit Task Id 4
            args.cancel = true;
    };
    function queryTaskbarInfo(args: any) {
        if (args.data.TaskID == 6) {
            args.taskbarElement.className += ' e-preventEdit' // Taskbar editing indicators are disabled
        }
    };
        return <GanttComponent dataSource={data} taskFields={taskFields}
        editSettings={editOptions} taskbarEditing={taskbarEditing} height = '450px' queryTaskbarInfo={queryTaskbarInfo}>
        <Inject services={[Edit]} />
        </GanttComponent>
   };
ReactDOM.render(<App />, document.getElementById('root'));
<!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/29.1.33/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%;
        }
        .e-gantt-chart .e-preventEdit .e-right-resize-gripper, 
            .e-gantt-chart .e-preventEdit .e-left-resize-gripper, 
            .e-gantt-chart .e-preventEdit .e-progress-resize-gripper, 
            .e-gantt-chart .e-preventEdit .e-left-connectorpoint-outer-div, 
            .e-gantt-chart .e-preventEdit .e-right-connectorpoint-outer-div { 
                             display: none; 
            }
    </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>