Syncfusion AI Assistant

How can I help you?

Open Add and Edit Dialogs in React Gantt Chart Component

12 Mar 202612 minutes to read

The add and edit dialogs in the React Gantt Chart component enable efficient task creation and modification, streamlining project management workflows. The openAddDialog method opens a dialog to add a new task, populating fields like id, name, or startDate based on taskFields mappings. The openEditDialog method opens a dialog to modify the currently selected task, ideal for updating task details like duration or dependencies. For example, clicking a button to open the add dialog allows users to create a new task, while selecting a task and opening the edit dialog enables quick updates. These dialogs, requiring EditService injection and editSettings.allowAdding and editSettings.allowEditing enabled, integrate with resources, dependencies, and critical path calculations, supporting validation and events like actionBegin for customized workflows. To use openEditDialog effectively, select a row through user interaction or by setting selectedRowIndex, ensuring the dialog opens with the correct task data. Configure valid taskFields mappings to ensure dialog fields display and save data accurately, and enhance dialogs with custom fields using events like actionBegin or actionComplete for tailored workflows.

The following code example shows how to open add and dialog on separate button click actions.

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

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { editingData, editingResources } from './datasource';

function App() {

    let ganttInstance = null;
    const data = editingData;
    const taskSettings = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        parentID: 'ParentID',
        notes: 'info',
        resourceInfo: 'resources'
    };

    const editDialogFields = [
        { type: 'General', headerText: 'General' },
        { type: 'Dependency' },
        { type: 'Resources' },
        { type: 'Notes' }
    ];

    const resourceNameMapping = 'resourceName';
    const resourceIdMapping = 'resourceId';
    const resources = editingResources;

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

    function edit() {
        ganttInstance.editModule.dialogModule.openEditDialog(ganttInstance.selectedRowIndex);
    }

    function add() {
        ganttInstance.editModule.dialogModule.openAddDialog();
    }

    return (
        <div>
            <ButtonComponent id="editDialog" onClick={edit}>Edit Dialog</ButtonComponent>
            <ButtonComponent id="addDialog" onClick={add}>Add Dialog</ButtonComponent>

            <GanttComponent
                id="ganttDefault"
                height="430px"
                dataSource={data}
                taskFields={taskSettings}
                editDialogFields={editDialogFields}
                editSettings={editSettings}
                resourceNameMapping={resourceNameMapping}
                resourceIDMapping={resourceIdMapping}
                resources={resources}
                ref={(g) => { ganttInstance = g; }}
            >
                <Inject services={[Edit, Selection, Toolbar]} />
            </GanttComponent>
        </div>
    );
}

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

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { editingData, editingResources } from './datasource';

function App() {

    let ganttInstance: any = null;
    const data: object[] = editingData;
    const taskSettings: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        parentID: 'ParentID',
        notes: 'info',
        resourceInfo: 'resources'
    };

    const editDialogFields: EditDialogFieldsModel[] = [
        { type: 'General', headerText: 'General' },
        { type: 'Dependency' },
        { type: 'Resources' },
        { type: 'Notes' }
    ];

    const resourceNameMapping: string = 'resourceName';
    const resourceIdMapping: string = 'resourceId';
    const resources: object[] = editingResources;

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

    function edit() {
        ganttInstance.editModule.dialogModule.openEditDialog(ganttInstance.selectedRowIndex);
    }

    function add() {
        ganttInstance.editModule.dialogModule.openAddDialog();
    }

    return (
        <div>
            <ButtonComponent id="editDialog" onClick={edit}>Edit Dialog</ButtonComponent>
            <ButtonComponent id="addDialog" onClick={add}>Add Dialog</ButtonComponent>

            <GanttComponent
                id="ganttDefault"
                height="430px"
                dataSource={data}
                taskFields={taskSettings}
                editDialogFields={editDialogFields}
                editSettings={editSettings}
                resourceNameMapping={resourceNameMapping}
                resourceIDMapping={resourceIdMapping}
                resources={resources}
                ref={(g) => { ganttInstance = g; }}
            >
                <Inject services={[Edit, Selection, Toolbar]} />
            </GanttComponent>
        </div>
    );
}

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