Indent and outdent in Angular Gantt component

5 Apr 202514 minutes to read

The Syncfusion® Angular Gantt component provides built-in support for indenting and outdenting rows, allowing you to easily adjust the hierarchy level of rows within the gantt.

Indent - The indent feature moves the selected row to a lower hierarchical level within the gantt, indenting it by one level. The indent action moves the selected row as the last child of its previous row.

Outdent - The outdent feature moves the selected row up by one level in the hierarchy within the gantt. The outdent action moves the selected row as a sibling to its parent row.

To enable indent and outdent functionality, you need to set editSettings.allowEditing property to true and inject the EditService and SelectionService in the providers section of the AppComponent. The Indent and Outdent actions can be performed by using in-built context menu or toolbaritems.

The following demo illustrates how to enable Indent and Outdent functionalities in the gantt using the toolbar property.

import { GanttComponent, GanttModule, EditService, SelectionService, ToolbarService, EditSettingsModel, ToolbarItem, } from '@syncfusion/ej2-angular-gantt';
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttData } from './data';

@Component({
    imports: [
        GanttModule
    ],
    providers: [EditService, SelectionService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template:
        `<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [treeColumnIndex]="1" [taskFields]="taskSettings" [splitterSettings] = "splitterSettings"  [editSettings]="editSettings"  [toolbar]="toolbar">
            <e-columns>
                <e-column field='TaskID' headerText='Task ID' textAlign='Right' width=90 ></e-column>
                <e-column field='TaskName' headerText='Task Name' textAlign='Left' width=290></e-column>
                <e-column field='StartDate' headerText='Start Date' textAlign='Right' width=120 ></e-column>
                <e-column field='Duration' headerText='Duration' textAlign='Right' width=90 ></e-column>
                <e-column field='Progress' headerText='Progress' textAlign='Right' width=120></e-column>
            </e-columns>
        </ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    // Data for Gantt
    public data?: object[];
    public taskSettings?: object;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItem[];
    public splitterSettings?: object;
    @ViewChild('gantt')
    public ganttObj?: GanttComponent | any;
    public ngOnInit(): void {
        this.data = GanttData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.editSettings = {
            allowAdding: true,
            allowEditing: true,
        };
        this.toolbar = ['Add', 'Indent', 'Outdent'];
        this.splitterSettings = {
            position: '75%'
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Indent and outdent a row programmatically

You can programmatically change the hierarchy level of a row using the indent and outdent methods provided by the Gantt component.

Before performing the indent or outdent action, you need to select the row. This can be done using the selectRow method by passing the desired row index as an argument.

The following demo illustrates how to programmatically indent or outdent a row using a external button click. Upon clicking the button, the row is selected using the selectRow method, followed by either the indent or outdent method to perform the action.

import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from "@syncfusion/ej2-angular-buttons";
import { GanttModule, GanttComponent, EditSettingsModel, EditService, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';

@Component({
    imports: [
        GanttModule, ButtonModule,
    ],
    providers: [EditService, SelectionService],
    standalone: true,
    selector: 'app-root',
    template:
        `<button ejs-button id='indent' (click)='indent()'>Indent</button>
         <button ejs-button id='outdent' (click)='outdent()'>Outdent</button>
         <br><br><br>
        <ejs-gantt id="ganttDefault" #gantt height="430px" [treeColumnIndex]='1' [dataSource]="data" [splitterSettings] = "splitterSettings" [taskFields]="taskSettings"  [editSettings]="editSettings"  >
            <e-columns>
                <e-column field='TaskID' headerText='Task ID' textAlign='Right' width=90 ></e-column>
                <e-column field='TaskName' headerText='Task Name' textAlign='Left' width=290></e-column>
                <e-column field='StartDate' headerText='Start Date' textAlign='Right' width=120 ></e-column>
                <e-column field='Duration' headerText='Duration' textAlign='Right' width=90 ></e-column>
                <e-column field='Progress' headerText='Progress' textAlign='Right' width=120></e-column>
            </e-columns>
        </ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    // Data for Gantt
    public data?: object[];
    @ViewChild('gantt')
    public gantt?: GanttComponent | any;
    public taskSettings?: object;
    public editSettings?: EditSettingsModel;
    public splitterSettings?: object;
    public ngOnInit(): void {
        this.data = GanttData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.editSettings = {
            allowEditing: true
        };
        this.splitterSettings = {
            position: '75%'
        };
    }
    indent(): void {
        (this.gantt as GanttComponent).selectRow(2);
        (this.gantt as GanttComponent).indent();
    }
    outdent(): void {
        (this.gantt as GanttComponent).selectRow(2);
        (this.gantt as GanttComponent).outdent();
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Indent and outdent events

In the Gantt, you can retrieve the details of indenting and outdenting actions using the actionComplete event of the gantt. Within the actionComplete event, you can access the indent/outdent details based on the action using the args.requestType property with values indented or outdented.

The following demo demonstrates how to retrieve the details of indenting and outdenting actions using the actionComplete event with the args.requestType property:

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, EditService, SelectionService, ToolbarService, EditSettingsModel, ToolbarItem } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';

@Component({
    imports: [
        GanttModule,
    ],
    providers: [EditService, SelectionService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template:
        `<p id="message" style="color:red"></p>
        <ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [treeColumnIndex]='1' [taskFields]="taskSettings"  [editSettings]="editSettings" 
                [splitterSettings] = "splitterSettings" (actionComplete)="actioncomplete($event)" [toolbar]="toolbar">
                <e-columns>
                    <e-column field='TaskID' headerText='Task ID' textAlign='Right' width=90 ></e-column>
                    <e-column field='TaskName' headerText='Task Name' textAlign='Left' width=290></e-column>
                    <e-column field='StartDate' headerText='Start Date' textAlign='Right' width=120 ></e-column>
                    <e-column field='Duration' headerText='Duration' textAlign='Right' width=90 ></e-column>
                    <e-column field='Progress' headerText='Progress' textAlign='Right' width=120></e-column>
                </e-columns>
        </ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    // Data for Gantt
    public data?: object[];
    public taskSettings?: object;
    public splitterSettings?: object;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItem[];
    public message: string = '';
    public ngOnInit(): void {
        this.data = GanttData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.splitterSettings = {
            position: '75%'
        };
        this.editSettings = {
            allowEditing: true,
        };
        this.toolbar = ['Indent', 'Outdent'];
    }
    actioncomplete(args: any) {
        if (args.requestType == 'outdented') {
            this.message = 'Task ID ' + args.data[0].TaskID + ' has been outdented';
        } else if (args.requestType == 'indented') {
            this.message = 'Task ID ' + args.data[0].TaskID + ' has been indented';
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Limitation

  • The indent and outdent feature does not support multiple rows selection.