Syncfusion AI Assistant

How can I help you?

Indent and Outdent in React Gantt Chart Component

31 Jan 202623 minutes to read

The Syncfusion® React Gantt Chart component provides built-in support for indenting and outdenting rows, allowing hierarchy levels to be adjusted within the Gantt chart.

  • Indent – Moves a selected row one level deeper, making it the last child of its previous row.
  • Outdent – Shifts a row one level up, placing it as a sibling to its parent.

To enable indent and outdent functionality, set editSettings.allowEditing to true, inject Edit and Selection in the Gantt Chart component, and use either the built-in context menu or toolbaritems to perform indent and outdent actions.

The following sample demonstrates how to enable indent and outdent functionalities in the Gantt using the toolbar property.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, Toolbar } 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 = {
        allowAdding: true,
        allowEditing: true,
        mode: 'Auto'
    };
    const toolbarOptions = ['Add', 'Indent', 'Outdent'];
    return (<div>
        <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions} toolbar={toolbarOptions} height='450px'>
            <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, Inject, Edit, Selection, Toolbar, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
    const taskFields: object = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const editOptions: object = {
        allowAdding: true,
        allowEditing: true,
        mode: 'Auto'
    };
    const toolbarOptions: ToolbarItem[] = ['Add', 'Indent', 'Outdent'];
    return (<div>
        <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions} toolbar={toolbarOptions} height='450px'>
            <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.2.3/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>

Indent and outdent a row programmatically

You can programmatically adjust a row’s hierarchy in the React Gantt Chart component using the indent and outdent methods. Before performing these actions, select the target row by calling the selectRow method with the appropriate row index.

The following sample demonstrates how to programmatically select row index 2 and perform indent or outdent actions using an external button click.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Edit, Selection, Toolbar, ToolbarItem } 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'
    };
    const toolbarOptions = ['Indent', 'Outdent'];
    let ganttInstance: any;
    function indent() {
        ganttInstance.selectRow(2);
        ganttInstance.indent();
    };
    function outdent() {
        ganttInstance.selectRow(2);
        ganttInstance.outdent();
    };

    return (<div>
        <div style=>
            <ButtonComponent onClick={indent} style=>Indent</ButtonComponent>
            <ButtonComponent onClick={outdent}>Outdent</ButtonComponent>
        </div>
        <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions} toolbar={toolbarOptions} height='450px' 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 { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Edit, Selection, Toolbar, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
    const taskFields: object = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const editOptions: object = {
        allowEditing: true,
        mode: 'Auto'
    };
    const toolbarOptions: ToolbarItem[] = ['Indent', 'Outdent'];
    let ganttInstance: any;
    function indent() {
        ganttInstance.selectRow(2);
        ganttInstance.indent();
    };
    function outdent() {
        ganttInstance.selectRow(2);
        ganttInstance.outdent();
    };

    return (<div>
        <div style=>
            <ButtonComponent onClick={indent} style=>Indent</ButtonComponent>
            <ButtonComponent onClick={outdent}>Outdent</ButtonComponent>
        </div>
        <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions} toolbar={toolbarOptions} height='450px' 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.2.3/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>

Retrieve Indent and outdent details

You can retrieve indent and outdent details using the actionComplete event, where the args.requestType value will be either indented or outdented, indicating the type of action performed.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, Inject, Edit, Selection, Toolbar, ToolbarItem, ActionCompleteArgs } 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 = {
        allowAdding: true,
        allowEditing: true,
        mode: "Auto"
    };
    const toolbarOptions = ["Add", "Indent", "Outdent"];

    let messageElement = null;

    const setmessageElement = (el) => {
        messageElement = el;
    };

    const updateMessage = (text) => {
        if (messageElement) {
            messageElement.textContent = text;
        }
    };

    const actionComplete = (args) => {
        const taskData = args.data;
        if (args.requestType === "outdented") {
            updateMessage(`Task ID ${(taskData[0]).TaskID} has been outdented`);
        } else if (args.requestType === "indented") {
            updateMessage(`Task ID ${(taskData[0]).TaskID} has been indented`);
        }
    };

    return (<div><div style=>
        <p style= ref={setmessageElement}></p>
    </div>
        <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions} toolbar={toolbarOptions} height="450px" actionComplete={actionComplete}>
            <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, Inject, Edit, Selection, Toolbar, ToolbarItem, ActionCompleteArgs } from "@syncfusion/ej2-react-gantt";
import { data } from "./datasource";
function App() {
    const taskFields: object = {
        id: "TaskID",
        name: "TaskName",
        startDate: "StartDate",
        duration: "Duration",
        progress: "Progress",
        parentID: "ParentID"
    };
    const editOptions: object = {
        allowAdding: true,
        allowEditing: true,
        mode: "Auto"
    };
    const toolbarOptions: ToolbarItem[] = ["Add", "Indent", "Outdent"];

    let messageElement: HTMLParagraphElement | null = null;

    const setmessageElement = (el: HTMLParagraphElement | null) => {
        messageElement = el;
    };

    const updateMessage = (text: string) => {
        if (messageElement) {
            messageElement.textContent = text;
        }
    };

    const actionComplete = (args: ActionCompleteArgs) => {
        const taskData = args.data;
        if (args.requestType === "outdented") {
            updateMessage(`Task ID ${(taskData[0] as any).TaskID} has been outdented`);
        } else if (args.requestType === "indented") {
            updateMessage(`Task ID ${(taskData[0] as any).TaskID} has been indented`);
        }
    };

    return (<div><div style=>
        <p style= ref={setmessageElement}></p>
    </div>
        <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions} toolbar={toolbarOptions} height="450px" actionComplete={actionComplete}>
            <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.2.3/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>

Limitation

  • The indent and outdent feature does not support selecting and modifying multiple rows simultaneously.