HelpBot Assistant

How can I help you?

Indent and Outdent in Angular Gantt Chart Component

1 Feb 202611 minutes to read

The Syncfusion® Angular 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 EditService and SelectionService in the providers of the 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 { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, EditService, SelectionService, ToolbarService, ToolbarItem} from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  providers: [EditService, SelectionService, ToolbarService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-gantt 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>`
})

export class AppComponent implements OnInit {
  public data: object[] = [];
  public taskSettings!: object;
  public editSettings!: object;
  public toolbar!: ToolbarItem[];
  public splitterSettings!: object;

  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 adjust a row’s hierarchy in the Angular 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 { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { GanttComponent, GanttModule, EditSettingsModel, EditService, SelectionService} from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonModule],
  providers: [EditService, SelectionService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div style="margin-bottom: 20px;">
      <button ejs-button style="margin-right: 20px;" id="indent" (click)="indent()">Indent</button>
      <button ejs-button id="outdent" (click)="outdent()">Outdent</button>
    </div>
    <ejs-gantt #gantt id="ganttDefault" 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>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings!: object;
  public editSettings!: EditSettingsModel;
  public splitterSettings!: object;

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

  public indent(): void {
    (this.ganttInstance as GanttComponent).selectRow(2); // Select row index 2.
    (this.ganttInstance as GanttComponent).indent();     // Apply indent.
  }

  public outdent(): void {
    (this.ganttInstance as GanttComponent).selectRow(2); // Select row index 2.
    (this.ganttInstance as GanttComponent).outdent();    // Apply outdent.
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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 { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, EditService, SelectionService, ToolbarService, EditSettingsModel, ToolbarItem, ActionCompleteArgs, IGanttData } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  providers: [EditService, SelectionService, ToolbarService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <p id="message" style="color:red"></p>
    <ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [treeColumnIndex]="1" [taskFields]="taskSettings" [editSettings]="editSettings" [splitterSettings]="splitterSettings" [toolbar]="toolbar" (actionComplete)="onActionComplete($event)">
      <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>`
})

export class AppComponent implements OnInit {
  public data: IGanttData[] = [];
  public taskSettings: Record<string, string> = {};
  public splitterSettings: { position: string } = { position: '75%' };
  public editSettings: EditSettingsModel = { allowEditing: true };
  public toolbar: ToolbarItem[] = ['Indent', 'Outdent'];
  public message: string = '';

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
  }

  public onActionComplete(args: ActionCompleteArgs): void {
    const taskData = args.data as IGanttData[];
    if (args.requestType === 'outdented') {
      this.message = `Task ID ${(taskData[0] as GanttTask).TaskID} has been outdented`;
    } else if (args.requestType === 'indented') {
      this.message = `Task ID ${(taskData[0] as GanttTask).TaskID} has been indented`;
    }
  }
}

export interface GanttTask {
  TaskID: number;
  TaskName: string;
  StartDate: Date;
  Duration: number;
  Progress?: number;
  subtasks?: GanttTask[];
}
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 selecting and modifying multiple rows simultaneously.