Syncfusion AI Assistant

How can I help you?

Deleting Tasks in React Gantt Chart Component

3 Feb 202622 minutes to read

Deleting tasks in the React Gantt Chart component streamlines project management by removing tasks, such as outdated milestones or subtasks, using the toolbar or programmatic methods. Enabled by setting the editSettings.allowDeleting property to true and injecting Edit, tasks can be deleted after selecting a row, ensuring seamless updates to dependencies and critical path calculations. A confirmation dialog, activated via editSettings.showDeleteConfirmDialog, prompts to verify deletions, preventing accidental removals. The deleteRow method allows programmatic deletion, requiring a selected row with valid taskFields mappings (e.g., id, name). Ensure tasks are selected and taskFields are properly configured to avoid issues during deletion.

Delete tasks via toolbar

Enable task deletion through the toolbar by setting editSettings.allowDeleting to true and injecting Edit. Select a row and click the toolbar’s Delete icon to remove the task, with an optional confirmation dialog if editSettings.showDeleteConfirmDialog is enabled. This method is ideal for quickly removing tasks like completed activities.

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

function App() {
    let ganttInstance = null;
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const editSettings = {
        allowDeleting: true,
        showDeleteConfirmDialog: true
    };
    const columns = [
        { field: 'TaskID', headerText: 'Task ID', 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 }
    ];
    const toolbar = ['Delete']

    return (
        <div>
            <GanttComponent
                id="Gantt"
                height="430px"
                dataSource={data}
                taskFields={taskFields}
                editSettings={editSettings}
                columns={columns}
                toolbar={toolbar}
                ref={gantt => ganttInstance = gantt}
            >
                <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, Edit, Selection, Inject, Toolbar, Columns, TaskFieldsModel, EditSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
    let ganttInstance: GanttComponent | null = null;
    const taskFields: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const editSettings: EditSettingsModel = {
        allowDeleting: true,
        showDeleteConfirmDialog: true
    };
    const columns: Columns[] = [
        { field: 'TaskID', headerText: 'Task ID', 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 }
    ];
    const toolbar: string[] = ['Delete']

    return (
        <div>
            <GanttComponent
                id="Gantt"
                height="430px"
                dataSource={data}
                taskFields={taskFields}
                editSettings={editSettings}
                columns={columns}
                toolbar={toolbar}
                ref={gantt => ganttInstance = gantt}
            >
                <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>

Delete tasks with confirmation dialog

Enable a confirmation dialog for task deletion by setting editSettings.showDeleteConfirmDialog to true, alongside editSettings.allowDeleting and Edit service. After selecting a row, deleting via the toolbar or deleteRow method prompts a dialog to confirm the action, ensuring intentional removals. This is useful for critical tasks where accidental deletion must be avoided.

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

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

    const columns = [
        { field: 'TaskID', headerText: 'Task ID', 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 }],

    const editSettings = {
        allowDeleting: true,
        showDeleteConfirmDialog: true
    };

    const toolbar = ['Delete'];

    return (
        <GanttComponent
            id="Gantt"
            height="430px"
            dataSource={data}
            taskFields={taskFields}
            columns={columns}
            editSettings={editSettings}
            toolbar={toolbar}
        >
            <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 } 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 = {
      allowDeleting: true,
      showDeleteConfirmDialog: true
  };
  const toolbar: ToolbarItem[] = ['Delete'];
        return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
        editSettings={editOptions} toolbar={toolbar} height = '450px'>
            <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>

Delete tasks programmatically

Delete tasks programmatically using the deleteRow method, which requires a selected row and Edit. Ensure the row is selected and taskFields mappings (e.g., id) are valid to perform the deletion. This method supports automation, such as removing tasks via a custom button, and respects the confirmation dialog if enabled.

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

function App() {

    let ganttInstance: GanttComponent | null = null;

    const taskData: object[] = [
        { TaskID: 1, TaskName: 'Product concept', StartDate: new Date('04/02/2025'), EndDate: new Date('04/08/2025') },
        { TaskID: 2, TaskName: 'Define the product usage', StartDate: new Date('04/02/2025'), Duration: 1, Progress: 30, ParentID: 1 },
        { TaskID: 3, TaskName: 'Define the target audience', StartDate: new Date('04/02/2025'), Duration: 2, Progress: 40, ParentID: 1 },
        { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/05/2025'), Duration: 2, Progress: 30, ParentID: 1, Predecessor: '2' },
        { TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/08/2025'), Duration: 0, ParentID: 1, Predecessor: '3,4' },
        { TaskID: 6, TaskName: 'Market research', StartDate: new Date('04/09/2025'), EndDate: new Date('04/18/2025'), Progress: 30 },
        { TaskID: 7, TaskName: 'Demand analysis', Progress: 40, ParentID: 6 },
        { TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/09/2025'), Duration: 4, Progress: 30, ParentID: 7, Predecessor: '5' },
        { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/09/2025'), Duration: 4, ParentID: 7, Predecessor: '5' },
        { TaskID: 10, TaskName: 'Competitor analysis', StartDate: new Date('04/15/2025'), Duration: 4, Progress: 30, ParentID: 6, Predecessor: '7,8' }
    ];

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

    const editSettings: object = {
        allowDeleting: true,
        showDeleteConfirmDialog: true
    };

    const deleteTask = (): void => {
        if (!ganttInstance) return;

        const selectedRecords = ganttInstance.selectionModule.getSelectedRecords();
        if (selectedRecords.length) {
            ganttInstance.editModule.deleteRecord(selectedRecords[0].TaskID);
        }
    };

    return (
        <div>
            <ButtonComponent onClick={deleteTask}>Delete Task</ButtonComponent>
            <br /><br />
            <GanttComponent
                id="ganttDefault"
                height="430px"
                dataSource={taskData}
                taskFields={taskFields}
                editSettings={editSettings}
                ref={gantt => ganttInstance = gantt}
            >
                <Inject services={[Edit, Selection]} />
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

See also