Row in Angular Gantt component

18 Oct 202524 minutes to read

Each row typically represents a single record or item from a data source. Rows in a Gantt chart are used to present data in both tabular and timeline chart formats. Each row displays a set of values representing the fields of an individual data record. Rows allow you to interact with the data in the Gantt chart. You can select rows, edit cell values, perform taskbar editing in the chart side of the Gantt, perform sorting or filtering operations, and trigger events based on actions.

Customize row styles

Customizing row styles in the Syncfusion® Angular Gantt chart allows you to modify the appearance of rows to meet design requirements, such as highlighting specific rows or adjusting font styles, background colors, and other visual properties. This can be achieved using CSS, built-in properties, methods, or event support provided by the component, offering flexibility for both static and dynamic styling.

Using event

You can customize the row appearance in the Angular Gantt component by using the rowDataBound event. This event allows you to apply styles or perform other row-level modifications based on the data or specific logic requirements.

The following example demonstrates how to customize row styles based on the value of the Progress column.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" (rowDataBound)="onRowDataBound($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="Progress" headerText="Progress" textAlign="Right" width="120"></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-columns>
    </ejs-gantt>
  `,
  styles: [`
    .below-30 { background-color: #ffe0e0; }
    .below-80 { background-color: #fff4cc; }
    .above-80 { background-color: #e0ffe0; }
  `]
})

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

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

  onRowDataBound(args: RowDataBoundEventArgs): void {
    const progress = (args.data as GanttTask).Progress as number;
    if (progress < 30) {
      (args.row as HTMLElement).classList.add('below-30');
    } else if (progress >= 30 && progress < 80) {
      (args.row as HTMLElement).classList.add('below-80');
    } else {
      (args.row as HTMLElement).classList.add('above-80');
    }
  }
}

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));

  • The queryCellInfo event can also be used to customize grid cells and is triggered for every cell in the grid part of the gantt chart. It can be useful when you need to customize cells based on certain conditions or criteria.

Using CSS

The Syncfusion® Angular Gantt chart allows row-level customization through CSS. Each row is assigned specific class names, enabling precise styling to improve readability and visual presentation.

Customize selected row:

To highlight the currently selected row, you can override the default styles applied by the Gantt chart. The following CSS classes are used by default:

 .e-gantt .e-selectionbackground, .e-gantt .e-active  {
    background-color: #f9920b !important;
  }

Alternate row customization:

To create a visual separation between consecutive rows, you can style alternate rows using the .e-altrow class.

.e-grid .e-altrow {
    background-color: #fafafa;
}
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, RowDataBoundEventArgs, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  providers:[SelectionService],
  template: `
    <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1"
      [splitterSettings]="splitterSettings" (rowDataBound)="rowDataBound($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="Progress" headerText="Progress" textAlign="Right" width="120"></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-columns>
    </ejs-gantt>`,
  styles: [`
    .e-gantt .e-altrow {
      background-color: #f2dadaff;
    }
    .e-gantt .e-selectionbackground, .e-gantt .e-active  {
      background-color: #f9920b !important;
    }
  `],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;

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

  public rowDataBound(args: RowDataBoundEventArgs): void {
    const progress = (args.data as GanttTask).Progress;
    if (progress < 30) {
      (args.row as Element).classList.add('below-30');
    } else if (progress >= 30 && progress < 80) {
      (args.row as Element).classList.add('below-80');
    } else {
      (args.row as Element).classList.add('above-80');
    }
  }
}

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));

Using method

The Syncfusion® Angular Gantt component provides methods to customize the appearance of rows in both the grid and chart sections. These methods are accessible through the treeGrid object and the Gantt instance.

To customize rows in the grid section, you can use the following methods:

  • getRowByIndex: Returns the HTML element of a row at a specific index.
  • getRows: Returns all row elements in the grid.
  • getRowInfo: Provides the data and index for a row element.
  • getSelectedRowIndexes: Returns indexes of selected rows.
  • getSelectedRows: Returns HTML elements of selected rows.

To customize rows in the chart section, the following methods are available:

  • getRowByIndex: Returns the HTML element of a chart row at a specific index.
  • getChartRows: Returns all chart row elements.

The following example demonstrates how to use the getRowByIndex method of the treegrid object in the Gantt instance and the getRowByIndex method of the Gantt chart component to customize the appearance of a row within the rowDataBound event of the Gantt chart.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-gantt id="ganttDefault" #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" (dataBound)="dataBound()">
      <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="Progress" headerText="Progress" textAlign="Right" width="120"></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-columns>
    </ejs-gantt>`
})

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

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

  public dataBound(): void {
    ((this.ganttInstance as GanttComponent).treeGrid.getRowByIndex(2) as HTMLElement).style.background = 'rgb(193, 228, 234)';
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Styling parent and child rows

You can customize the styling of parent and child rows in the Syncfusion® Angular Gantt chart by handling the rowDataBound event, which is triggered as each row is rendered. Within this event, the hasChildRecords property can be used to identify parent rows, allowing you to apply distinct styles that visually separate them from child rows.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  template: `
    <ejs-gantt id="ganttDefault" #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" (rowDataBound)="rowDataBound($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="Progress" headerText="Progress" textAlign="Right" width="120"></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-columns>
    </ejs-gantt>`,
  styles: [`
    .child-row {
      background-color: #cef0c9ff !important;
    }
    .parent-row {
      background-color: #f7928bff !important;
    }
  `],
  encapsulation: ViewEncapsulation.None
})

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

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

  public rowDataBound(args: RowDataBoundEventArgs): void {
    const rowElement = args.row as HTMLElement;
    const rowData = args.data as any;
    if (rowData.hasChildRecords) {
      rowElement.classList.add('parent-row');
    } else {
      rowElement.classList.add('child-row');
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Auto focus taskbar on row click

You can enable automatic scrolling to the corresponding taskbar in the timeline when a row is clicked in the Syncfusion® Angular Gantt chart by using the autofocustasks property. This feature ensures that the selected task is brought into view within the timeline area, improving navigation and focus during interaction.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, CheckBoxModule],
  providers: [SelectionService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="controls">
      <ejs-checkbox #checkbox label="Enable / Disable Auto-focus Tasks" (change)="onCheckBoxChange($event)" [checked]="true">
      </ejs-checkbox>
    </div>
    <ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [autoFocusTasks]="true" [taskFields]="taskSettings"
    [treeColumnIndex]="1" [splitterSettings]="splitterSettings">
      <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="Progress" headerText="Progress" textAlign="Right" width="120"></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-columns>
    </ejs-gantt>`,
  styles: [`
    .controls {
      padding: 10px 0 20px 0;
    }
  `]
})

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

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

  public onCheckBoxChange(args: ChangeEventArgs): void {
    (this.gantt as GanttComponent).autoFocusTasks = (args.checked as boolean);
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Row height

You can customize row height in the Syncfusion® Gantt chart by setting the rowHeight property. This helps display additional content within a row or reduce its height to align with the content size.

import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { GanttComponent, GanttModule } 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],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="button-group">
      <button ejs-button id="small" cssClass="e-small" (click)="clickHandler($event)">
        Change height to 20px
      </button>
      <button ejs-button id="medium" cssClass="e-small" (click)="clickHandler($event)">
        Default height 42px
      </button>
      <button ejs-button id="big" cssClass="e-small" (click)="clickHandler($event)">
        Change height to 60px
      </button>
  </div>
  <div class="gantt-container">
    <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" [rowHeight]="rowHeight">
      <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>
  </div>`,
  styles: [`
    .button-group {
      margin-bottom: 20px;
    }

    .button-group button {
      margin-right: 10px;
    }

    .gantt-container {
      margin-top: 10px;
    }
`]
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings!: object;
  public splitterSettings!: object;
  public rowHeight: number = 42;
  public heightRow: Record<string, number> = {
    small: 20,
    medium: 42,
    big: 60
  };

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

  public clickHandler(event: MouseEvent): void {
    (this.ganttInstance as GanttComponent).rowHeight = this.heightRow[(event.target as HTMLElement).id];
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • The rowHeight property can only be used to set the height of the entire gantt row. It cannot be used to set the height of individual cells within a row.
  • The rowHeight property applies the height to all rows in the gantt chart, including the header rows.

Customize row height for particular row

You can customize the height of a specific row in the Syncfusion® Gantt chart using the rowDataBound event. Within this event, conditionally apply a height value to the rowHeight property for rows based on their data.

In the example below, the row height is set to 90px for the row where TaskID is 2.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" [rowHeight]="rowHeight" (rowDataBound)="rowDataBound($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="Progress" headerText="Progress" textAlign="Right" width="120"></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-columns>
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public gantt?: GanttComponent;
  public data: object[] = [];
  public taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
  };
  public splitterSettings = {
    position: '75%'
  };
  public rowHeight: number = 42;

  ngOnInit(): void {
    this.data = GanttData;
  }

  public rowDataBound(args: RowDataBoundEventArgs): void {
    const task = args.data as GanttTask;
    if (task.TaskID === 2) {
      args.rowHeight = 90;
    }
  }
}

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));

  • In virtual scrolling mode, it is not applicable to set different row heights.
  • You can customize the row height of multiple rows by checking the relevant criteria in the dataBound event and setting the rowHeight property accordingly.

Row hover with custom action or items

You can execute custom actions or display items on row hover in the Gantt chart by using the dataBound event.

The following demonstrates how to implement a custom action using the dataBound event. In this event, when hovering over a row, a tooltip containing a button is displayed. Clicking the button reveals a custom message.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonModule],
  template: `
    <div style="padding: 0 0 20px 0;"></div>
    <p id="message">{{ message }}</p>
    <ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" (dataBound)="dataBound()">
      <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="Progress" headerText="Progress" textAlign="Right" width="120"></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-columns>
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

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

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

  dataBound(): void {
    const ganttElement = (this.gantt as GanttComponent).getRootElement() as HTMLElement;
    ganttElement.addEventListener('mouseover', (mouseargs: MouseEvent) => {
      let target: any;
      if (
        mouseargs.target &&
        ((mouseargs.target as HTMLElement).classList.contains('e-rowcell') ||
          (mouseargs.target as HTMLElement).classList.contains('e-chart-row-cell'))
      ) {
        target = mouseargs.target as HTMLElement;
      }
      if (target) {
        const buttonElement = document.createElement('button');
        buttonElement.textContent = 'Row details';
        const tooltip = new Tooltip({
          content: buttonElement,
          width: '100px',
          height: '40px',
          opensOn: 'Hover'
        }, target);
        buttonElement.addEventListener('click', () => {
          const rowElement = target.closest('.e-row') || target.closest('.e-chart-row');
          if (rowElement) {
            const rowIndex = rowElement.getAttribute('aria-rowindex');
            if (rowIndex !== null && this.gantt) {
              const rowInfo = this.gantt.treeGrid.getRowInfo(target);
              const rowData = rowInfo?.rowData as any;
              if (rowData) {
                this.message = `Button clicked for Task ID: ${rowData['TaskID']}`;
              }
            }
          }
        });
      }
    });
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Adding a new row programmatically

The Syncfusion® Gantt chart allows adding a new row programmatically using the addRecord method. This is useful when you want to insert a record without manually entering data. The method accepts three parameters:

  • A data object representing the new row
  • A newRowPosition, which controls where the row is inserted based on the newRowPosition property.
  • An index to specify the insertion position; if not provided, the new row will be added at the top of the Gantt chart by default.

Supported newRowPosition values:

  • Top: Adds the row at the beginning of the chart.
  • Bottom: Adds the row at the end of the chart.
  • Above: Inserts the row above a specified target row.
  • Below: Inserts the row below a specified target row.
  • Child: Adds the row as a child under a specified parent row, enabling hierarchical structure.
import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { GanttComponent, GanttModule, EditService, EditSettingsModel } 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],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div style="padding: 0 0 20px 0">
      <button ejs-button id="above" style="margin-right: 10px;" (click)="addAbove()">Add New Row as Above position</button>
      <button ejs-button id="below" style="margin-right: 10px;" (click)="addBelow()">Add New Row as Below position</button>
      <button ejs-button id="child" (click)="addChild()">Add New Row as Child position</button>
    </div>
    <ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" [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 splitterSettings: object = {};
  public editSettings?: EditSettingsModel= {}

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
    this.splitterSettings = {
      position: '75%'
    };
  }

  public addAbove(): void {
    const newRecord = this.generateNewTask();
    this.ganttInstance?.addRecord(newRecord, 'Above', 0);
  }

  public addBelow(): void {
    const newRecord = this.generateNewTask();
    this.ganttInstance?.addRecord(newRecord, 'Below', 1);
  }

  public addChild(): void {
    const newRecord = this.generateNewTask();
    this.ganttInstance?.clearSelection();
    this.ganttInstance?.addRecord(newRecord, 'Child', 2);
  }

  private generateNewTask(): object {
    return {
      TaskID: this.generateTaskID(),
      TaskName: this.generateTaskName(),
      StartDate: this.generateStartDate(),
      Duration: this.generateDuration(),
      Progress: 0
    };
  }

  private generateTaskID(): number {
    return Math.floor(1000 + Math.random() * 90000);
  }

  private generateTaskName(): string {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    let result = '';
    for (let i = 0; i < 5; i++) {
      result += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return result;
  }

  private generateStartDate(): Date {
    return new Date();
  }

  private generateDuration(): number {
    return Math.floor(Math.random() * 10) + 1;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • If you want to add a new record to the beginning of the data source, you can pass 0 as the third parameter to the addRecord method.
  • If you do not specify an index, the new row will be added at the top of the gantt.

Show or hide a row using an external actions

You can show or hide specific rows in the Syncfusion® Gantt chart based on external actions like a checkbox click, which is useful for temporarily hiding rows without changing the data source. This can be achieved using getRowByIndex from the treeGrid object and Gantt chart component, and getRowsObject from the Gantt instance, along with the change event to manage row visibility dynamically.

In this example, the onCheckBoxChange method checks the checkbox state and uses getRowsObject to iterate through all grid rows. If the TaskName value is Perform Soil test, the row is hidden using getRowByIndex by setting its display style to none, and its index is stored in a hiddenRows array. When the checkbox is unchecked, the method loops through hiddenRows to show each row by resetting its display style and then clears the array.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonModule, CheckBoxModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="controls">
      <ejs-checkbox #checkbox label="Show / Hide Row" (change)="onCheckBoxChange($event)"></ejs-checkbox>
    </div>
    <div class="message">
      <p style="color: red;" id="message"></p>
    </div>
    <ejs-gantt #ganttInstance id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings">
      <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>`,
  styles: [`
    .controls {
      padding: 2px 0 20px 0;
    }

    .message {
      margin-left: 180px;
    }
  `]
})

export class AppComponent implements OnInit {
  @ViewChild('ganttInstance') public ganttInstance?: GanttComponent;
  public data: Object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = {};
  public hiddenRows: number[] = [];
  public message: string = '';

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

    this.splitterSettings = {
      position: '75%'
    }
  }

  public onCheckBoxChange(args: ChangeEventArgs): void {
    const gantt = this.ganttInstance;
    if (!gantt) return;
    const rows = gantt.treeGrid.grid.getRowsObject();
    if (args.checked) {
      rows.forEach((row, index) => {
        const task = row.data as GanttTask;
        if (task.TaskName === 'Perform Soil test') {
          const treeRow = gantt.treeGrid.getRowByIndex(index);
          const ganttRow = gantt.getRowByIndex(index);
          if (treeRow) (treeRow as HTMLElement).style.display = 'none';
          if (ganttRow) ganttRow.style.display = 'none';
          this.hiddenRows.push(index);
        }
      });
      if (this.hiddenRows.length > 0) {
        this.message = `Rows with task name 'Perform Soil test' have been hidden.`;
      }
    } else {
      this.hiddenRows.forEach(index => {
        const treeRow = gantt.treeGrid.getRowByIndex(index);
        const ganttRow = gantt.getRowByIndex(index);
        if (treeRow) (treeRow as HTMLElement).style.display = '';
        if (ganttRow) ganttRow.style.display = '';
      });
      this.hiddenRows = [];
      this.message = 'All hidden rows are now visible.';
    }
  }
}

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));

How to get the row data and element

The Syncfusion® Gantt chart provides several methods to retrieve row data and elements. These are useful for accessing specific rows, performing custom operations, or manipulating displayed data.

  1. getRowByIndex: Returns the grid row element at a specific index.

     const rowElement = this.gantt.treeGrid.getRowByIndex(rowIndex);

  2. getRowInfo: Retrieves row data using a target cell element.

     const rowInformation = this.gantt.treeGrid.getRowInfo(targetElement);

  3. getRows: Returns all grid row elements.

      const rowElements = this.gantt.treeGrid.getRows();

  4. getSelectedRowIndexes: Provides selected row indexes.

     const selectedIndexes = this.gantt.treeGrid.getSelectedRowIndexes();

  5. getSelectedRows: Returns selected row elements.

     const selectedRowElements = this.gantt.treeGrid.getSelectedRows();

  6. getRowByIndex: Retrieves the chart row element at a specific index.

      const rowElement = this.gantt.getRowByIndex(rowIndex);

See Also