Syncfusion AI Assistant

How can I help you?

Managing Tasks in React Gantt Chart Component

3 Feb 202624 minutes to read

Managing tasks in the React Gantt Chart component enables dynamic project updates, such as inserting, deleting, or editing tasks and dependencies, by enabling allowAdding, allowDeleting, allowEditing, and allowTaskbarEditing with EditService injected. A primary key column, defined by columns.isPrimaryKey set to true (e.g., on id), ensures reliable CRUD operations and task identification. Editing modes include cell editing for quick TreeGrid updates, dialog editing for comprehensive changes, taskbar dragging for duration or date adjustments, and connector line dragging for dependencies. Customize dialogs with templates or fields using addDialogFields and editDialogFields. Methods like addRecord, deleteRow, and updateRecordById support programmatic management. Ensure valid taskFields mappings and a primary key to enable editing seamlessly.

The following code example demonstrates editing in the Gantt Chart component.

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

Editing feature requires a primary key column for CRUD operations. While defining columns in Gantt Chart using the columns property, it is mandatory that any one of the columns, must be a primary column. By default, the id column will be the primary key column. If id column is not defined, we need to enable isPrimaryKey for any one of the columns defined in the columns property.

Open new task dialog with default values

You can set default values when new task dialog opens using actionBegin event when requestType is beforeOpenAddDialog.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Toolbar } from '@syncfusion/ej2-react-gantt';
import { ganttData } from './datasource';

function App() {

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

  const editSettings = {
    allowAdding: true
  };

  const toolbarItems = ['Add'];

  function onActionBegin(args) {
    if (args.requestType === 'beforeOpenAddDialog') {
      args.rowData.TaskName = 'Gantt';
      args.rowData.Progress = 70;

      if (args.rowData.ganttProperties) {
        args.rowData.ganttProperties.taskName = 'Gantt';
        args.rowData.ganttProperties.progress = 70;
      }
    }
  }

  return (
    <GanttComponent
      id="ganttDefault"
      height="430px"
      dataSource={ganttData}
      taskFields={taskFields}
      editSettings={editSettings}
      toolbar={toolbarItems}
      actionBegin={onActionBegin}
    >
      <Inject services={[Toolbar, Edit]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Toolbar, EditSettingsModel, TaskFieldsModel, ActionBeginEventArgs } from '@syncfusion/ej2-react-gantt';
import { ganttData } from './datasource';

function App() {

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

  const editSettings: EditSettingsModel = {
    allowAdding: true
  };

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

  function onActionBegin(args: ActionBeginEventArgs): void {
    if (args.requestType === 'beforeOpenAddDialog') {
      args.rowData.TaskName = 'Gantt';
      args.rowData.Progress = 70;

      if (args.rowData.ganttProperties) {
        args.rowData.ganttProperties.taskName = 'Gantt';
        args.rowData.ganttProperties.progress = 70;
      }
    }
  }

  return (
    <GanttComponent
      id="ganttDefault"
      height="430px"
      dataSource={ganttData}
      taskFields={taskFields}
      editSettings={editSettings}
      toolbar={toolbarItems}
      actionBegin={onActionBegin}
    >
      <Inject services={[Toolbar, 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/33.1.44/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>

Cell edit type and its params

The columns.editType is used to define the edit type for any particular column. You can set the columns.editType based on data type of the column.

Below is the combined content from the provided markdown sections in bullet points, as requested, ensuring clarity and conciseness while preserving the original information:

  • Cell edit types and components:
    • numericedit: Uses the NumericTextBox component for editing integers, doubles, and decimals.
    • defaultedit: Uses the TextBox component for editing string data.
    • dropdownedit: Uses the DropDownList component to display all unique values for a field.
    • booleanedit: Uses the CheckBox component for editing boolean data.
    • datepickeredit: Uses the DatePicker component for editing date data.
    • datetimepickeredit: Uses the DateTimePicker component for editing date-time data.
  • Customization:
  • Edit type parameters:
    • numericedit: Supports parameters like decimals: 2, value: 5.
    • dropdownedit: Supports parameters like value: 'Germany'.
    • booleanedit: Supports parameters like checked: true.
    • datepickeredit: Supports parameters like format: 'dd.MM.yyyy'.
    • datetimepickeredit: Supports parameters like value: new Date().
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Edit, Inject } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
    const numericParams = { params: { min: 1 } };
    const progressParams = { params: { showSpinButton: false } };
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const editOptions = {
        allowEditing: true
    };

    function durationFormat(field, data) {
        return data[field];
    }
    return <GanttComponent dataSource={data} taskFields={taskFields} editSettings={editOptions} height='450px'>
        <ColumnsDirective>
            <ColumnDirective field='TaskID'></ColumnDirective>
            <ColumnDirective field='TaskName'></ColumnDirective>
            <ColumnDirective field='StartDate'></ColumnDirective>
            <ColumnDirective field='Duration' editType='numericedit' edit={numericParams} valueAccessor={durationFormat}></ColumnDirective>
            <ColumnDirective field='Progress' editType='numericedit' edit={progressParams}></ColumnDirective>
        </ColumnsDirective>
        <Inject services={[Edit]} />
    </GanttComponent>;

};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Edit, Inject, TaskFieldsModel, EditSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
    const numericParams = { params: { min: 1 } };
    const progressParams = { params: { showSpinButton: false } };
    const taskFields: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const editOptions: EditSettingsModel = {
        allowEditing: true
    };

    function durationFormat(field: any, data: any) {
        return data[field];
    }
    return <GanttComponent dataSource={data} taskFields={taskFields} editSettings={editOptions} height='450px'>
        <ColumnsDirective>
            <ColumnDirective field='TaskID'></ColumnDirective>
            <ColumnDirective field='TaskName'></ColumnDirective>
            <ColumnDirective field='StartDate'></ColumnDirective>
            <ColumnDirective field='Duration' editType='numericedit' edit={numericParams} valueAccessor={durationFormat}></ColumnDirective>
            <ColumnDirective field='Progress' editType='numericedit' edit={progressParams}></ColumnDirective>
        </ColumnsDirective>
        <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/33.1.44/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>

Prevent particular column and taskbar editing

You can prevent editing for the particular column by setting columns.allowEditing to false.

To restrict taskbar editing, set args.cancel to true in the actionBegin event based on taskbarEditAction.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { GanttComponent, Edit, Inject } from '@syncfusion/ej2-react-gantt';
import { ganttData } from './datasource';

function App() {
  let ganttObj;
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings = {
    allowEditing: true,
    allowTaskbarEditing: true
  };

  const columns = [
    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
    { field: 'TaskName', headerText: 'Task Name', width: '250' },
    { field: 'StartDate', headerText: 'Start Date', width: '150' },
    { field: 'Duration', headerText: 'Duration', width: '150' },
    { field: 'Progress', headerText: 'Progress', width: '150', allowEditing: false }
  ];

  function actionBegin(args) {
    if (args.requestType === 'taskbarediting' && args.taskBarEditAction === 'ProgressResizing') {
      args.cancel = true;
    }
  }

  return (
    <GanttComponent height="430px" dataSource={ganttData} taskFields={taskFields} editSettings={editSettings} columns={columns} actionBegin={actionBegin} ref={g => ganttObj = g}>
      <Inject services={[Edit]} />
    </GanttComponent>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { GanttComponent, Edit, Inject, TaskFieldsModel, EditSettingsModel, ActionBeginEventArgs } from '@syncfusion/ej2-react-gantt';
import { ganttData } from './datasource';

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

  const editSettings: EditSettingsModel = {
    allowEditing: true,
    allowTaskbarEditing: true
  };

  const columns = [
    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
    { field: 'TaskName', headerText: 'Task Name', width: '250' },
    { field: 'StartDate', headerText: 'Start Date', width: '150' },
    { field: 'Duration', headerText: 'Duration', width: '150' },
    { field: 'Progress', headerText: 'Progress', width: '150', allowEditing: false }
  ];

  function actionBegin(args: ActionBeginEventArgs) {
    if (args.requestType === 'taskbarediting' && (args as any).taskBarEditAction === 'ProgressResizing') {
      args.cancel = true;
    }
  }

  return (
    <GanttComponent height="430px" dataSource={ganttData} taskFields={taskFields} editSettings={editSettings} columns={columns} actionBegin={actionBegin} ref={g => ganttObj = g}>
      <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/33.1.44/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>

Cell Edit Template

The cell edit template is used to create a custom component for a particular column by invoking the following functions:

  • create - It is used to create the element at the time of initialization.

  • write - It is used to create the custom component or assign default value at the time of editing.

  • read - It is used to read the value from the component at the time of save.

  • destroy - It is used to destroy the component.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, ColumnsDirective, ColumnDirective, Edit } from '@syncfusion/ej2-react-gantt';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { data } from './datasource';
import { IEditCell } from '@syncfusion/ej2-grids';
function App () {
    let elem;
    let ganttInstance;
    let dropdownlistObj;
    let dropdownlist = {
       create: () => {
            elem = document.createElement('input');
            return elem;
        },
      read: () => {
           return dropdownlistObj.value;
        },
      destroy: () => {
            dropdownlistObj.destroy();
        },
        write: (args) => {
            dropdownlistObj = new DropDownList({
                dataSource: ganttInstance.treeGrid.grid.dataSource,
                fields: { value: 'TaskName' },
                value: args.rowData[args.column.field],
                floatLabelType: 'Auto',
            });
            dropdownlistObj.appendTo(elem);
        }
    };
   const taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID: 'ParentID'
        };
       const editOptions = {
           allowEditing: true
        };
        return <GanttComponent dataSource={data} taskFields={taskFields} editSettings={editOptions} height='450px' ref={gantt => ganttInstance = gantt}>
         <ColumnsDirective>
                <ColumnDirective field='TaskID'></ColumnDirective>
                <ColumnDirective field='TaskName' edit={dropdownlist}></ColumnDirective>
                <ColumnDirective field='StartDate'></ColumnDirective>
                <ColumnDirective field='Duration'></ColumnDirective>
                <ColumnDirective field='Progress'></ColumnDirective>
          </ColumnsDirective>
          <Inject services={[Edit]}/>
      </GanttComponent>

};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, ColumnsDirective, ColumnDirective, Edit } from '@syncfusion/ej2-react-gantt';
import { DropDownList, DropDownListComponent } from '@syncfusion/ej2-dropdowns';
import { data } from './datasource';
import { IEditCell } from '@syncfusion/ej2-grids';
function App () {
    let  elem : HTMLElement;
    let ganttInstance:any;
    let dropdownlistObj: DropDownListComponent;
    let dropdownlist: IEditCell = {
       create: () => {
            elem = document.createElement('input');
            return elem;
        },
      read: () => {
           return dropdownlistObj.value;
        },
      destroy: () => {
            dropdownlistObj.destroy();
        },
        write: (args: Object) => {
            dropdownlistObj = new DropDownList({
                dataSource: ganttInstance.treeGrid.grid.dataSource,
                fields: { value: 'TaskName' },
                value: (args as any).rowData[(args as any).column.field],
                floatLabelType: 'Auto',
            });
            dropdownlistObj.appendTo(elem);
        }
    };
   const taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID: 'ParentID'
        };
       const editOptions = {
           allowEditing: true
        };
        return <GanttComponent dataSource={data} taskFields={taskFields} editSettings={editOptions} height='450px' ref={gantt => ganttInstance = gantt}>
         <ColumnsDirective>
                <ColumnDirective field='TaskID'></ColumnDirective>
                <ColumnDirective field='TaskName' edit={dropdownlist}></ColumnDirective>
                <ColumnDirective field='StartDate'></ColumnDirective>
                <ColumnDirective field='Duration'></ColumnDirective>
                <ColumnDirective field='Progress'></ColumnDirective>
          </ColumnsDirective>
          <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/33.1.44/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>

Disable editing for particular column

You can disable editing for particular columns, by using the columns.allowEditing property.

In the following demo, editing is disabled for the TaskName column.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, ColumnsDirective, ColumnDirective, Edit, Selection } 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 = {
           allowEditing: true
        };
        return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions} height='450px'>
         <ColumnsDirective>
                <ColumnDirective field='TaskID'></ColumnDirective>
                <ColumnDirective field='TaskName' allowEditing={false}></ColumnDirective>
                <ColumnDirective field='StartDate'></ColumnDirective>
                <ColumnDirective field='Duration'></ColumnDirective>
                <ColumnDirective field='Progress'></ColumnDirective>
          </ColumnsDirective>
          <Inject services={[Edit, Selection]} />
      </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, ColumnsDirective, ColumnDirective, Edit, Selection } 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:any = {
           allowEditing: true
        };
        return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions} height='450px'>
         <ColumnsDirective>
                <ColumnDirective field='TaskID'></ColumnDirective>
                <ColumnDirective field='TaskName' allowEditing={false}></ColumnDirective>
                <ColumnDirective field='StartDate'></ColumnDirective>
                <ColumnDirective field='Duration'></ColumnDirective>
                <ColumnDirective field='Progress'></ColumnDirective>
          </ColumnsDirective>
          <Inject services={[Edit, Selection]} />
      </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/33.1.44/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>

Customize control in add/edit dialog

In Gantt Chart, the controls such as form elements, grid and RTE in add and edit dialog can be customized by using additionalParams property.

Customize general tab of dialog

The form element in the General tab of the add/edit dialog can be added or removed by using the fields property within the addDialogFields and editDialogFields settings respectively.

The controls of the fields can be customized by using the edit template feature.

In the below sample, General tab is customized using the fields property. The fields TaskID, TaskName and newInput are added in both addDialogFields and editDialogFields settings.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, Toolbar, AddDialogFieldsDirective, EditDialogFieldsDirective, EditDialogFieldDirective, AddDialogFieldDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data, resourceCollection } from './datasource';
function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    resourceInfo: 'Resources',
    work: 'Work',
    parentID: 'ParentID',
    segments: 'Segments',
    notes: "Note",
  };
  const resourceFields = {
    id: 'ResourceId',
    name: 'ResourceName',
    unit: 'ResourceUnit',
    group: 'ResourceGroup'
  };
  const editOptions = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };
  const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
  return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
    editSettings={editOptions} toolbar={toolbarOptions} height='450px' resourceFields={resourceFields} resources={resourceCollection}>
    <ColumnsDirective>
      <ColumnDirective field="TaskID" width="100"></ColumnDirective>
      <ColumnDirective
        field="TaskName"
        headerText="TaskName"
        width="250"
        clipMode="EllipsisWithTooltip"
      ></ColumnDirective>
      <ColumnDirective field="StartDate"></ColumnDirective>
      <ColumnDirective field="Duration"></ColumnDirective>
      <ColumnDirective field="Progress"></ColumnDirective>
      <ColumnDirective field="newInput"></ColumnDirective>
    </ColumnsDirective>
    <AddDialogFieldsDirective>
      <AddDialogFieldDirective type='General' headerText='General' fields={['TaskID', 'TaskName', 'newInput']} ></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Dependency' ></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Resources'></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Segments' ></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Notes'></AddDialogFieldDirective>
    </AddDialogFieldsDirective>
    <EditDialogFieldsDirective>
      <EditDialogFieldDirective type='General' headerText='General' fields={['TaskID', 'TaskName', 'newInput']} ></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Dependency'></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Notes'></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Resources'></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Segments'></EditDialogFieldDirective>
    </EditDialogFieldsDirective>
    <Inject services={[Edit, Selection, Toolbar]} />
  </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, Selection, Toolbar, ToolbarItem, AddDialogFieldsDirective, EditDialogFieldsDirective, EditDialogFieldDirective, AddDialogFieldDirective, ColumnsDirective, ColumnDirective, TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { data, resourceCollection } from './datasource';
function App() {
  const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    resourceInfo: 'Resources',
    work: 'Work',
    parentID: 'ParentID',
    segments: 'Segments',
    notes: "Note",
  };
  const resourceFields = {
    id: 'ResourceId',
    name: 'ResourceName',
    unit: 'ResourceUnit',
    group: 'ResourceGroup'
  };
  const editOptions: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };
  const toolbarOptions: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
  return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
    editSettings={editOptions} toolbar={toolbarOptions} height='450px' resourceFields={resourceFields} resources={resourceCollection}>
    <ColumnsDirective>
      <ColumnDirective field="TaskID" width="100"></ColumnDirective>
      <ColumnDirective
        field="TaskName"
        headerText="TaskName"
        width="250"
        clipMode="EllipsisWithTooltip"
      ></ColumnDirective>
      <ColumnDirective field="StartDate"></ColumnDirective>
      <ColumnDirective field="Duration"></ColumnDirective>
      <ColumnDirective field="Progress"></ColumnDirective>
      <ColumnDirective field="newInput"></ColumnDirective>
    </ColumnsDirective>
    <AddDialogFieldsDirective>
      <AddDialogFieldDirective type='General' headerText='General' fields={['TaskID', 'TaskName', 'newInput']} ></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Dependency' ></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Resources'></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Segments' ></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Notes'></AddDialogFieldDirective>
    </AddDialogFieldsDirective>
    <EditDialogFieldsDirective>
      <EditDialogFieldDirective type='General' headerText='General' fields={['TaskID', 'TaskName', 'newInput']} ></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Dependency'></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Notes'></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Resources'></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Segments'></EditDialogFieldDirective>
    </EditDialogFieldsDirective>
    <Inject services={[Edit, Selection, Toolbar]} />
  </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/33.1.44/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>
    <script type="text/x-jsrender" id="newInput">
        <div class="e-edit-form-column">
             <input type="text" class="inputbox" placeholder="custom input 1">
            </div>
         </script>  
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Customize dependency, segments and resources tab of dialog

You can customize the dependency, segments, and resource tabs of the dialog box using the additionalParams property within the addDialogFields and editDialogFields settings respectively. This customization involves defining properties from the grid within the additionalParams property.

In the example below:

  • The dependency tab enables sorting and toolbar options.
  • The segments tab enables sorting and toolbar options and includes a new column newData defined with a specified field.
  • The resources tab defines a new column Segment Task with specific properties such as field, width and headerText.
    These customizations are applied to both addDialogFields and editDialogFields settings.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, Toolbar, AddDialogFieldsDirective, EditDialogFieldsDirective, EditDialogFieldDirective, AddDialogFieldDirective } from '@syncfusion/ej2-react-gantt';
import { data, resourceCollection } from './datasource';
function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    resourceInfo: 'Resources',
    work: 'Work',
    parentID: 'ParentID',
    segments: 'Segments',
    notes: "Note",
  };
  const resourceFields = {
    id: 'ResourceId',
    name: 'ResourceName',
    unit: 'ResourceUnit',
    group: 'ResourceGroup'
  };
  const editOptions = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };
  const addDependencyParams = { allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",] }
  const addResourcesParams = { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "NewData" }] }
  const addSegmentsParams = { columns: [{ field: "SegmentTask", width: "170px", headerText: "Segment Task" }], }
  const editDependencyParams = { allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",] }
  const editResourcesParams = { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "NewData" }] }
  const editSegmentsParams = { columns: [{ field: "SegmentTask", width: "170px", headerText: "Segment Task" }], }
  const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
  return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
    editSettings={editOptions} toolbar={toolbarOptions} height='450px' resourceFields={resourceFields} resources={resourceCollection}>
    <AddDialogFieldsDirective>
      <AddDialogFieldDirective type='General' headerText='General' ></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Dependency' additionalParams={addDependencyParams}></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Resources' additionalParams={addResourcesParams}></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Segments' additionalParams={addSegmentsParams}></AddDialogFieldDirective>
    </AddDialogFieldsDirective>
    <EditDialogFieldsDirective>
      <EditDialogFieldDirective type='General' headerText='General' ></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Dependency' additionalParams={editDependencyParams}></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Resources' additionalParams={editResourcesParams}></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Segments' additionalParams={editSegmentsParams}></EditDialogFieldDirective>
    </EditDialogFieldsDirective>
    <Inject services={[Edit, Selection, Toolbar]} />
  </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, Selection, Toolbar, ToolbarItem, AddDialogFieldsDirective, EditDialogFieldsDirective, EditDialogFieldDirective, AddDialogFieldDirective, EditDialogFieldSettingsModel, AddDialogFieldSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data, resourceCollection } from './datasource';
function App() {
  const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    resourceInfo: 'Resources',
    work: 'Work',
    parentID: 'ParentID',
    segments: 'Segments',
    notes:"Note",
  };
  const resourceFields = {
    id: 'ResourceId',
    name: 'ResourceName',
    unit: 'ResourceUnit',
    group: 'ResourceGroup'
  };
  const editOptions: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };
  const addDependencyParams: AddDialogFieldSettingsModel = { allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",] }
  const addResourcesParams: AddDialogFieldSettingsModel = { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "NewData" }] }
  const addSegmentsParams: AddDialogFieldSettingsModel = { columns: [{ field: "SegmentTask", width: "170px", headerText: "Segment Task" }], }
  const editDependencyParams: EditDialogFieldSettingsModel = { allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",] }
  const editResourcesParams: EditDialogFieldSettingsModel = { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "NewData" }] }
  const editSegmentsParams: EditDialogFieldSettingsModel = { columns: [{ field: "SegmentTask", width: "170px", headerText: "Segment Task" }], }
  const toolbarOptions: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
  return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
    editSettings={editOptions} toolbar={toolbarOptions} height='450px' resourceFields={resourceFields} resources={resourceCollection}>
    <AddDialogFieldsDirective>
      <AddDialogFieldDirective type='General' headerText='General' ></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Dependency' additionalParams={addDependencyParams}></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Resources' additionalParams={addResourcesParams}></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Segments' additionalParams={addSegmentsParams}></AddDialogFieldDirective>
    </AddDialogFieldsDirective>
    <EditDialogFieldsDirective>
      <EditDialogFieldDirective type='General' headerText='General' ></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Dependency' additionalParams={editDependencyParams}></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Resources' additionalParams={editResourcesParams}></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Segments' additionalParams={editSegmentsParams}></EditDialogFieldDirective>
    </EditDialogFieldsDirective>
    <Inject services={[Edit, Selection, Toolbar]} />
  </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/33.1.44/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>

Customize note dialog tab

You can customize the note dialog tab using the additionalParams property within the addDialogFields and editDialogFields settings respectively. This customization involves defining properties from the RTE module within the additionalParams property.

In the following example, the notes tab is customized with the inlinemode property enabled, allowing for in-place editing. Additionally, the OnSelection property is enabled, which opens the toolbar inline upon selecting text.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, Toolbar, AddDialogFieldsDirective, EditDialogFieldsDirective, EditDialogFieldDirective, AddDialogFieldDirective } from '@syncfusion/ej2-react-gantt';
import { data, resourceCollection } from './datasource';
function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    resourceInfo: 'Resources',
    work: 'Work',
    parentID: 'ParentID',
    segments: 'Segments',
    notes: "Note",
  };
  const resourceFields = {
    id: 'ResourceId',
    name: 'ResourceName',
    unit: 'ResourceUnit',
    group: 'ResourceGroup'
  };
  const editOptions = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };
  const addAdditionalParams = { inlineMode: { enable: true, onSelection: true } }
  const editAdditionalParams = { inlineMode: { enable: true, onSelection: true } }
  const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
  return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
    editSettings={editOptions} toolbar={toolbarOptions} height='450px' resourceFields={resourceFields} resources={resourceCollection}>
    <AddDialogFieldsDirective>
      <AddDialogFieldDirective type='General'></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Dependency'></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Resources'></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Segments'></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Notes' additionalParams={addAdditionalParams}></AddDialogFieldDirective>
    </AddDialogFieldsDirective>
    <EditDialogFieldsDirective>
      <EditDialogFieldDirective type='General' headerText='General' ></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Dependency' ></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Notes' additionalParams={editAdditionalParams}></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Resources' ></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Segments'></EditDialogFieldDirective>
    </EditDialogFieldsDirective>
    <Inject services={[Edit, Selection, Toolbar]} />
  </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, Selection, Toolbar, ToolbarItem, AddDialogFieldsDirective, EditDialogFieldsDirective, EditDialogFieldDirective, AddDialogFieldDirective, EditDialogFieldSettingsModel, AddDialogFieldSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data, resourceCollection } from './datasource';
function App() {
  const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    resourceInfo: 'Resources',
    work: 'Work',
    parentID: 'ParentID',
    segments: 'Segments',
    notes: "Note",
  };
  const resourceFields = {
    id: 'ResourceId',
    name: 'ResourceName',
    unit: 'ResourceUnit',
    group: 'ResourceGroup'
  };
  const editOptions: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };
  const addAdditionalParams: AddDialogFieldSettingsModel = { inlineMode: { enable: true, onSelection: true } }
  const editAdditionalParams: EditDialogFieldSettingsModel = { inlineMode: { enable: true, onSelection: true } }
  const toolbarOptions: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
  return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
    editSettings={editOptions} toolbar={toolbarOptions} height='450px' resourceFields={resourceFields} resources={resourceCollection}>
    <AddDialogFieldsDirective>
      <AddDialogFieldDirective type='General'></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Dependency'></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Resources'></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Segments'></AddDialogFieldDirective>
      <AddDialogFieldDirective type='Notes' additionalParams={addAdditionalParams}></AddDialogFieldDirective>
    </AddDialogFieldsDirective>
    <EditDialogFieldsDirective>
      <EditDialogFieldDirective type='General' headerText='General' ></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Dependency' ></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Notes' additionalParams={editAdditionalParams}></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Resources' ></EditDialogFieldDirective>
      <EditDialogFieldDirective type='Segments'></EditDialogFieldDirective>
    </EditDialogFieldsDirective>
    <Inject services={[Edit, Selection, Toolbar]} />
  </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/33.1.44/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>

Touch interaction

The Gantt control editing actions can be achieved using the double tap and tap and drag actions on a element.

The following table describes different types of editing modes available in Gantt.

Action Description
Cell editing To perform double tap on a specific cell, initiate the cell to be in edit state.
Dialog editing To perform double tap on a specific row, initiate the edit dialog to be opened.
Taskbar editing Taskbar editing action is initiated using the tap action on the taskbar.
Parent taskbar : Once you tap on the parent taskbar, it will be changed to editing state. Perform only dragging action on parent taskbar editing.
Alt text
Child taskbar : Once you tap the child taskbar, it will be changed to editing state.
Alt text
Dragging taskbar : To drag a taskbar to the left or right in editing state.

Resizing taskbar : To resize a taskbar, drag the left/right resize icon.

Progress resizing : To change the progress, drag the progress resize icon to the left or right direction.

Task dependency editing

You can tap the left/right connector point to initiate task dependencies edit mode and again tap another taskbar to establish the dependency line between two taskbars.

The following table explains the taskbar state in dependency edit mode.

Taskbar states

Taskbar state Description
Parent taskbar You cannot create dependency relationship to parent tasks.
Parent taskbar
Taskbar without dependency If you tap a valid child taskbar, it will create FS type dependency line between tasks, otherwise exits from task dependency edit mode.
Valid taskbar
Taskbar with dependency If you tap the second taskbar, which has already been directly connected, it will ask to remove it.
Invalid taskbar
Removing dependency Once you tap the taskbar with direct dependency, then confirmation dialog will be shown for removing dependency.
Confirm dialog 
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection } from '@syncfusion/ej2-react-gantt';

const data = [
    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 3, ParentID: 1, Progress: 50 },
    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Predecessor: "2FS", Progress: 50 },
    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 4, ParentID: 5, Predecessor: "6SS", Progress: 50 }
];
function App() {
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        parentID: 'ParentID'
    };
    const editSettings = {
        allowTaskbarEditing: true
    };
    let ganttInstance;

    const load = () => {
        const ganttObj = document.getElementById('ganttDefault')?.ej2_instances[0];
        if (ganttObj) {
            ganttObj.isAdaptive = true; // Forces mobile layout
        }
    };

    return <GanttComponent dataSource={data} ref={gantt => ganttInstance = gantt} taskFields={taskFields}
        editSettings={editSettings} height='400px' load={load}>
        <Inject services={[Edit, Selection]} />
    </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, TaskFieldsModel, EditSettingsModel } from '@syncfusion/ej2-react-gantt';

const data: object[] = [
    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 3, ParentID: 1, Progress: 50 },
    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Predecessor: "2FS", Progress: 50 },
    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 4, ParentID: 5, Predecessor: "6SS", Progress: 50 }
];
function App() {
    const taskFields: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        parentID: 'ParentID',
    };
    const editSettings: EditSettingsModel = {
        allowTaskbarEditing: true
    };
    let ganttInstance: GanttComponent;

    const load = (): void => {
        const ganttObj: any = (document.getElementById('ganttDefault') as any)?.ej2_instances[0];
        if (ganttObj) {
            ganttObj.isAdaptive = true; // Forces mobile layout.
        }
    };

    return <GanttComponent dataSource={data} ref={gantt => ganttInstance = gantt} taskFields={taskFields}
        editSettings={editSettings} height='400px' load={load}>
        <Inject services={[Edit, Selection]} />
    </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/33.1.44/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>

Note: In mobile device, you cannot create dependency other than FS by taskbar editing. By using cell/dialog editing, you can add all type of dependencies.

Taskbar editing tooltip

The taskbar editing tooltip can be customized using the tooltipSettings.editing property. The following code example shows how to customize the taskbar editing tooltip in Gantt.

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
  };

  const taskbarTooltipTemplate = (props) => {
    return (
      <div>
        <div><b>{props.TaskName}</b></div>
        <div>Duration : {props.Duration}</div>
      </div>
    );
  };

  const tooltipSettings = {
    showTooltip: true,
    taskbar: taskbarTooltipTemplate
  };

  return (
    <GanttComponent
      dataSource={data}
      taskFields={taskFields}
      editSettings={editOptions}
      tooltipSettings={tooltipSettings}
      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, TooltipSettings, TaskFieldsModel} from '@syncfusion/ej2-react-gantt';

import { data } from './datasource';

function App() {

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

  const editOptions: EditSettingsModel = {
    allowTaskbarEditing: true
  };

  const taskbarTooltipTemplate = (props: any) => {
    return (
      <div>
        <div><b>{props.TaskName}</b></div>
        <div>Duration : {props.Duration}</div>
      </div>
    );
  };

  const tooltipSettings: TooltipSettings = {
    showTooltip: true,
    taskbar: taskbarTooltipTemplate
  };

  return (
    <GanttComponent
      dataSource={data}
      taskFields={taskFields}
      editSettings={editOptions}
      tooltipSettings={tooltipSettings}
      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/33.1.44/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>

See also