Row in Angular Gantt component

5 Apr 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 users to interact with the data in the Gantt chart. Users 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 the styles of rows in a Syncfusion® Gantt chart allows you to modify the appearance of rows to meet your design requirements. This feature is useful when you want to highlight certain rows or change the font style, background color, and other properties of the row to enhance the visual appeal of the gantt chart. To customize the row styles in the gantt, you can use CSS, properties, methods, or event support provided by the Syncfusion® Angular Gantt chart component.

Using event

You can customize the appearance of the rows by using the dataBound event. This event is triggered after the data has been bound to the Gantt. You can use this event to modify the row’s appearance, add custom elements, or perform any other customization. This can be achieved by using the getRows method of treegrid object in gantt instance and getChartRows method of ganttChartModule in gantt component.

Here’s an example illustrating how you can utilize the dataBound event to customize the styles of rows based on the value of the Progress column. This example involves inspecting the value of the Progress column for each row and adjusting a row’s style accordingly.

import { BrowserModule } from '@angular/platform-browser';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';

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

@Component({
    imports: [
        GanttModule
   ],
standalone: true,
    selector: 'app-root',
    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>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    // Data for Gantt
    public data?: object[];
    @ViewChild('gantt')
    public gantt?: GanttComponent;
    public taskSettings?: object;
    public splitterSettings?: object;
    public ngOnInit(): void {
        this.data = GanttData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.splitterSettings = {
            position: '75%'
        };
    }
    dataBound() {
        let data = (this.gantt as GanttComponent).currentViewData;
        for (let i = 0; i < data.length; i++) {
            if ((data[i] as any).ganttProperties.progress > 75) {
                ((this.gantt as GanttComponent).treeGrid.getRows()[i] as HTMLElement).style.background = '#EE4B2B';
                ((this.gantt as GanttComponent).ganttChartModule.getChartRows()[i] as HTMLElement).style.background = '#EE4B2B';
            }
        }
    }
}
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.
  • Similarly, rowDataBound event can also be used to customize grid rows and is triggered for every row in the grid part of the gantt chart. It can be useful when you need to customize rows based on certain conditions or criteria.

Using CSS

You can apply styles to the rows using CSS selectors. The Gantt chart provides a class name for each row element, which you can use to apply styles to that specific row.

Customize selected row

You can customize the appearance of the selected row using CSS. This is useful when you want to highlight the currently selected row for improve the visual appeal of the Gantt chart. By default, the Gantt provides the CSS classes .e-selectionbackground, .e-active to style the selected row. You can customize this default style by overriding the .e-selectionbackground and .e-active classes with your own custom CSS styles.

To change the background color of the selected row, you can add the following CSS code to your application:

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

Here’s an example of how to use the .e-selectionbackground and .e-active classes to style the selected row:

import { BrowserModule } from '@angular/platform-browser';
import { GanttModule, SelectionService } from '@syncfusion/ej2-angular-gantt';

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

@Component({
    imports: [
        GanttModule
   ],
   providers: [ SelectionService ],
standalone: true,
    selector: 'app-root',
    template:
        `<ejs-gantt id="ganttDefault" #gantt 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: [`
            .e-gantt .e-selectionbackground, .e-gantt .e-active  {
                background-color: #f9920b !important;
            }`
    ],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    // Data for Gantt
    public data?: object[];
    @ViewChild('gantt')
    public gantt?: GanttComponent;
    public taskSettings?: object;
    public splitterSettings?: object;
    public ngOnInit(): void {
        this.data = GanttData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        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));

Using method

The Gantt chart provides below methods of treegrid object in gantt instance to customize the appearance of the rows in grid part :

  1. getRowByIndex: This method returns the HTML element of a row at the specified index. You can use this method to apply custom styles to a specific row.
  2. getRows: This method returns an array of all the row elements in the grid part. You can use this method to apply custom styles to all rows or to a specific set of rows based on some condition.
  3. getRowInfo: This method returns the data object and index of the row corresponding to the specified row element. You can use this method to apply custom styles based on the data in a row.
  4. getSelectedRowIndexes: This method returns an array of the indexes of the selected rows in the grid part. You can use this method to apply custom styles to the selected rows.
  5. getSelectedRows: This method returns an array of the HTML elements representing the selected rows in the grid part. You can use this method to directly loop through the selected rows and customize their styles.

Also the Gantt chart provides below methods to customize the appearance of the rows in chart part :

  1. getRowByIndex: This method returns the HTML element of a chart row at the specified index. You can use this method to apply custom styles to a specific row.
  2. getChartRows: This method returns an array of all the row elements in the chart part. You can use this method to apply custom styles to all rows or to a specific set of rows based on some condition.

The following example demonstrates how to use getRowByIndex method of treegrid object in gantt instance and getRowByIndex method of gantt chart component to customize the appearance of the row inside the dataBound event of the gantt chart.

import { BrowserModule } from '@angular/platform-browser';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';

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

@Component({
    imports: [
        GanttModule
   ],
standalone: true,
    selector: 'app-root',
    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>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    // Data for Gantt
    public data?: object[];
    @ViewChild('gantt')
    public gantt?: GanttComponent;
    public taskSettings?: object;
    public splitterSettings?: object;
    public ngOnInit(): void {
        this.data = GanttData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.splitterSettings = {
            position: '75%'
        };
    }
    dataBound() {
        let data = (this.gantt as GanttComponent).currentViewData;
        for (let i = 0; i < data.length; i++) {
            if((data[i] as any).ganttProperties.progress > 80){
                ((this.gantt as GanttComponent).treeGrid.getRowByIndex(i) as HTMLElement).style.background = 'rgb(193, 228, 234)';
                ((this.gantt as GanttComponent).getRowByIndex(i) 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 appearance of the parent and child rows by utilizing the dataBound event. This event is triggered after the data has been bound to the Gantt. Use this event to modify the parent and child row’s appearance, add custom elements, or perform any other customization by using condition. This can be achieved by using the getRows method of treegrid object in gantt instance and getChartRows method of ganttChartModule in gantt component.

Here’s an example illustrating how to utilize the dataBound event to customize the styles of parent and child rows based on the hasChildRecords property value in the dataSource object of the gantt. In this example, the style of each row is adjusted based on the hasChildRecords property.

Please refer to the following example.

import { BrowserModule } from '@angular/platform-browser';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';

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

@Component({
    imports: [
        GanttModule
   ],
standalone: true,
    selector: 'app-root',
    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='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;
    public taskSettings?: object;
    public splitterSettings?: object;
    public ngOnInit(): void {
        this.data = GanttData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.splitterSettings = {
            position: '75%'
        };
    }
    dataBound() {
        let data = (this.gantt as GanttComponent).currentViewData;
        for (let i = 0; i < data.length; i++) {
            if (!(data[i] as any).hasChildRecords) {
                //Here apply the background color of child rows
                ((this.gantt as GanttComponent).treeGrid.getRows()[i] as HTMLElement).style.background = '#33ff12';
                ((this.gantt as GanttComponent).ganttChartModule.getChartRows()[i] as HTMLElement).style.background = '#33ff12';
            } else {
                //Here apply the background color of parent rows
                ((this.gantt as GanttComponent).treeGrid.getRows()[i] as HTMLElement).style.background = '#ff2f1f';
                ((this.gantt as GanttComponent).ganttChartModule.getChartRows()[i] as HTMLElement).style.background = '#ff2f1f';
            }
        }
    }
}
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

The Syncfusion® Gantt chart allows you to auto-scroll to the taskbar position in timeline when clicking the particular row. You can control this behaviour by using the autofocustasks property of the Gantt chart component.

Here’s an example of how you can utilize the autofocustasks property to auto-scroll the taskbar on row click.

import { BrowserModule } from '@angular/platform-browser';
import { GanttModule, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';


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

@Component({
    imports: [
        GanttModule, CheckBoxModule
    ],
    providers: [SelectionService],
    standalone: true,
    selector: 'app-root',
    template:
        `<div style="padding:2px 0px 0px 0px">
            <ejs-checkbox #checkbox label='Enable / Disable Auto-focus Tasks' 
            (change)="onCheckBoxChange($event)"></ejs-checkbox>
        </div>
        <br>
        <ejs-gantt id="ganttDefault" #gantt 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>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    // Data for Gantt
    public data?: object[];
    @ViewChild('gantt')
    public gantt?: GanttComponent;
    public taskSettings?: object;
    public splitterSettings?: object;
    public 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) {
        if (args.checked) {
            (this.gantt as GanttComponent).autoFocusTasks = false;
        } else {
            (this.gantt as GanttComponent).autoFocusTasks = true;
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Row height

The Syncfusion® Gantt chart allows you to customize the height of rows based on your needs. This feature can be useful when you need to display more content in a row or when you want to reduce the height of rows to fit its content. You can achieve this by using the rowHeight property of the Gantt chart component. This property allows you to change the height of the entire gantt row to your desired value.

In the following example, the demonstration illustrates how to dynamically alter the row height using the rowHeight property.

import { BrowserModule } from '@angular/platform-browser';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from "@syncfusion/ej2-angular-buttons";

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

@Component({
    imports: [
        GanttModule, ButtonModule
   ],
standalone: true,
    selector: 'app-root',
    template:
        `<div>
          <button ejs-button id="small" cssClass="e-small" (click)="clickHandler($event)">
          Change height 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 60px</button>
        </div>
        <ejs-gantt id="ganttDefault" #gantt height="430px"  [dataSource]="data" rowHeight='42'
        [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>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    // Data for Gantt
    public data?: object[];
    @ViewChild('gantt')
    public gantt?: GanttComponent;
    public taskSettings?: object;
    public splitterSettings?: object;
    public heightRow: { [key: string]: number } = {
        small: 20,
        medium: 40,
        big: 60
    };
    public ngOnInit(): void {
        this.data = GanttData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.splitterSettings = {
            position: '75%'
        };
    }
    clickHandler(args: MouseEvent): void {
        (this.gantt as GanttComponent).rowHeight = this.heightRow[(args.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.
  • You can also set the height for a specific row using the rowHeight property of the corresponding grid row object in the rowDataBound event.

Customize row height for particular row

Customizing the row height for a particular row can be useful when you want to display more content in a particular row, reduce the height of a row to fit its content, or make a specific row stand out from the other rows in the gantt chart. This can be achieved by modifying CSS style height property of the particular row along with the dataBound event of the Gantt chart component, getRowByIndex method of the treegrid object in gantt instance and getRowByIndex method of gantt chart component.

In the below example, the row height for the row with TaskID as ‘2’ is set as ‘90px’ using the dataBound event.

import { BrowserModule } from '@angular/platform-browser';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from "@syncfusion/ej2-angular-buttons";

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

@Component({
    imports: [
        GanttModule, ButtonModule
   ],
standalone: true,
    selector: 'app-root',
    template:
        `<ejs-gantt id="ganttDefault" #gantt height="430px"  [dataSource]="data" rowHeight='42'
        [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 {
    // Data for Gantt
    public data?: object[];
    @ViewChild('gantt')
    public gantt?: GanttComponent;
    public taskSettings?: object;
    public splitterSettings?: object;
    public ngOnInit(): void {
        this.data = GanttData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.splitterSettings = {
            position: '75%'
        };
    }
    dataBound() {
        let data = (this.gantt as GanttComponent).currentViewData;
        for (let i = 0; i < data.length; i++) {
            if ((data[i] as any).ganttProperties.taskId == 2) {
                ((this.gantt as GanttComponent).treeGrid.getRowByIndex(i) as HTMLElement).style.height = '90px';
                ((this.gantt as GanttComponent).getRowByIndex(i) as HTMLElement).style.height = '90px';
            }
        }
    }
}
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 custom items when hovering over rows by using the dataBound event of the gantt chart.

The dataBound event is triggered after the data has been bound to the Gantt chart.

Here’s an illustrative example demonstrating how to implement a custom action using the dataBound event. In this event, when hovering over a row, a tooltip with a button is displayed. Clicking the button reveals a custom message.

import { BrowserModule } from '@angular/platform-browser';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from "@syncfusion/ej2-angular-buttons";

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

@Component({
    imports: [
        GanttModule, ButtonModule
   ],
standalone: true,
    selector: 'app-root',
    template:
        `<div id='show' style="padding:0px 0px 20px 0px;" >
        </div>
        <p id="message">{{message}}</p>
        <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>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    // Data for Gantt
    public data?: object[];
    @ViewChild('gantt')
    public gantt?: GanttComponent;
    public message: string = '';
    public taskSettings?: object;
    public splitterSettings?: object;
    public ngOnInit(): void {
        this.data = GanttData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.splitterSettings = {
            position: '50%'
        };
    }
    dataBound() {
        //Here bind mouse over event while hovering over the row
        ((this.gantt as GanttComponent).getRootElement() as HTMLElement).addEventListener(
            'mouseover',
            (mouseargs: MouseEvent) => {
                //Here button creation
                const buttonId = 'element_' + '1';
                const buttonElement = document.createElement('button');
                buttonElement.id = buttonId;
                buttonElement.textContent = 'Row details';
                let target: any;

                //Set tooltip target
                if (mouseargs && mouseargs.target != null) {
                    if ((mouseargs.target as any).classList.contains('e-rowcell') || (mouseargs.target as any).classList.contains('e-chart-row-cell')
                    ) {
                        target = mouseargs.target;
                    } else {
                        target = null;
                    }
                }
                //Tooltip creation
                const tooltip: Tooltip = new Tooltip(
                    {
                        content: buttonElement,
                        width: '100px',
                        height: '40px',
                        opensOn: 'Hover',
                    },
                    target
                );
                //Button click event
                buttonElement.addEventListener('click', () => {
                    let rowIndex;
                    if(target.closest('.e-row') !== null){
                        rowIndex = target.closest('.e-row').getAttribute('data-rowindex');
                    }else{
                        rowIndex = target.closest('.e-chart-row').getAttribute('data-rowindex');
                    }
                    // Handle button click here
                    const data: any = (this.gantt as GanttComponent).currentViewData[rowIndex].ganttProperties;
                    this.message = `Button clicked for Task ID: ${ data.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 provides a way to add a new row to the gantt chart programmatically. This feature is useful when you want to add a new record to the gantt without having manually enter data in the gantt. This can be done using the addRecord method of the Gantt chart.

The addRecord method takes three parameters:

  • The data object representing the new row to be added
  • The new row position, which determines where the new row should be inserted based on the newRowPosition property.
  • The index at which the new row should be inserted. If no index is specified, the new row will be added at the top of the Gantt chart.

In the gantt chart, the newRowPosition property offers the following positions to add the row:

  • Top : When you set newRowPosition to Top, the new row will be positioned at the top of the Gantt chart.
  • Bottom : When you set newRowPosition to Bottom, the new row will be positioned at the bottom of the Gantt chart.
  • Above : Setting newRowPosition to Above allows you to position the new row above a specified target row. This is particularly useful when you want to insert a row above an existing one.
  • Below : Setting newRowPosition to Below allows you to position the new row below a specified target row. This is beneficial for inserting a row immediately after another.
  • Child : Selecting Child for newRowPosition designates the new row as a child of a specified parent row. This is useful for creating hierarchical structures within the Gantt chart, where the new row becomes a subordinate of the specified parent row.

Here’s an example of how to add a new row using the addRecord method:

import { BrowserModule } from '@angular/platform-browser';
import { GanttModule, EditService } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from "@syncfusion/ej2-angular-buttons";

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

@Component({
    imports: [
        GanttModule, ButtonModule
   ],
providers: [EditService],
standalone: true,
    selector: 'app-root',
    template:
        `<div style="padding:0px 0px 20px 0px">
            <button ejs-button id='above' (click)='addabove()'>Add New Row as Above position</button>
            <button ejs-button id='below' (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 id="ganttDefault" #gantt 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>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    // Data for Gantt
    public data?: object[];
    @ViewChild('gantt')
    public gantt?: GanttComponent;
    public taskSettings?: object;
    public splitterSettings?: object;
    public editSettings?: object;
    public 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%'
        };
    }
    addabove() {
        const newRecord = {
            TaskID: this.generatetaskID(),
            TaskName: this.generatetaskName(),
            StartDate: this.generatestartDate(),
            Duration: this.generateduration(),
        };

        (this.gantt as GanttComponent).addRecord(newRecord, 'Above', 0);
    }
    addbelow() {
        const newRecord = {
            TaskID: this.generatetaskID(),
            TaskName: this.generatetaskName(),
            StartDate: this.generatestartDate(),
            Duration: this.generateduration(),
        };

        (this.gantt as GanttComponent).addRecord(newRecord, 'Below', 1);
    }
    addchild() {
        const newRecord = {
            TaskID: this.generatetaskID(),
            TaskName: this.generatetaskName(),
            StartDate: this.generatestartDate(),
            Duration: this.generateduration(),
        };
        (this.gantt as GanttComponent).clearSelection();
        (this.gantt as GanttComponent).addRecord(newRecord, 'Child', 2);
    }
    // Generate a random taskID
    generatetaskID(): number {
        return Math.floor(1000 + Math.random() * 90000);
    }
    // Generate a random taskName
    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;
    }
    // Generate a random startDate
    generatestartDate(): Date {
        return new Date();
    }
    // Generate a random duration value
    generateduration(): number {
        return Math.random() * 100;
    }
}
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

In a Syncfusion® gantt chart, you can show or hide a particular row based on some external action, such as a checkbox click. This can be useful in scenarios where you want to hide certain rows from the gantt temporarily, without removing them from the underlying data source. This can be achieved by using the getRowByIndex method of treegrid object in gantt instance, getRowByIndex method of gantt chart component and getRowsObject method of grid object within the gantt instance along with the change event of the checkbox

The getRowsObject method returns an array of row objects that represents all the rows in the grid part. You can use this method to iterate through all the rows and access their data and index.

The getRowByIndex method returns the HTML element of a row at the specified index. You can use this method to get a specific row and apply changes to it.

In the following example, the onCheckBoxChange method is used to check whether the checkbox is checked or not. If it is checked, the method iterates through all the rows in the grid part using the getRowsObject method. For each row, it checks whether the value in the TaskName column is equal to “Perform Soil test”. If it is, the index of that row is obtained using the getRowByIndex method and hidden by setting its display style to “none”. The index of the hidden row is also added to an array called hiddenRows.

If the checkbox is unchecked, the method iterates through the hiddenRows array and shows each row by setting its display style to an empty string. The hiddenRows array is also cleared.

import { BrowserModule } from '@angular/platform-browser';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from "@syncfusion/ej2-angular-buttons";
import { CheckBoxModule} from '@syncfusion/ej2-angular-buttons';

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

@Component({
    imports: [
        GanttModule, ButtonModule, CheckBoxModule
   ],
standalone: true,
    selector: 'app-root',
    template:
        `
        <div style="padding:2px 0px 0px 0px">
                <ejs-checkbox #checkbox label='Show / Hide Row' 
                (change)="onCheckBoxChange($event)"></ejs-checkbox>
            </div>
        <div style="margin-left:180px"><p style="color:red;" id="message"></p></div>
        <ejs-gantt id="ganttDefault" #gantt 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>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    // Data for Gantt
    public data?: object[];
    @ViewChild('gantt')
    public gantt?: GanttComponent;
    public taskSettings?: object;
    public splitterSettings?: object;
    public rowIndex?: number;
    public hiddenRows: number[] = [];
    public message?: string = '';
    public 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) {
        if (args.checked) {
            for (let i = 0; i < (this.gantt as GanttComponent).treeGrid.grid.getRowsObject().length; i++) {
                if (((this.gantt as GanttComponent).treeGrid.grid.getRowsObject()[i].data as any).TaskName === 'Perform Soil test') {
                    // check the row value
                    this.rowIndex = (this.gantt as GanttComponent).treeGrid.grid.getRowsObject()[i].index; //get particular row index
                    ((this.gantt as GanttComponent).treeGrid.getRowByIndex(this.rowIndex) as HTMLElement).style.display =
                        'none'; //hide row
                        ((this.gantt as GanttComponent).getRowByIndex(this.rowIndex) as HTMLElement).style.display =
                        'none';
                    this.hiddenRows.push((this.rowIndex as number)); // add row index to hiddenRows array
                }
            }
            if (this.hiddenRows.length > 0) {
                this.message = `Rows with a task name column value of 'Perform Soil test' have been hidden`;
            }
        } else {
            // Show hidden rows
            this.hiddenRows.forEach((rowIndex: number) => {
                ((this.gantt as GanttComponent).treeGrid.getRowByIndex(rowIndex) as HTMLElement).style.display = '';
                ((this.gantt as GanttComponent).getRowByIndex(rowIndex) as HTMLElement).style.display = '';
            });
            this.hiddenRows = [];
            this.message = 'Show all hidden rows';
        }
    }
}
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

Gantt chart provides several methods to retrieve row data and elements. This feature is useful when you need to access specific rows, perform custom operations, or manipulate the data displayed in the gantt.

  1. getRowByIndex: This method returns the HTML element of a grid row at the specified index. It can be used to retrieve the element of a specific row in the grid part.

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

  2. getRowInfo: This method allows you to retrieve row information based on a cell target element.

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

  3. getRows: This method returns an array of all the row elements in the grid part. If you need to retrieve row data and elements, you can combine the getRows method with the getRowInfo method.

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

  4. getSelectedRowIndexes: This method allows you to retrieve the collection of indexes of the selected rows. However, it does not directly provide the row elements and associated data. To access the row elements and data of the selected rows, you can combine the getSelectedRowIndexes method with getRowByIndex and getRowInfo method.

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

  5. getSelectedRows: This method returns an array of HTML elements representing the selected rows in the grid part. By iterating over this array, you can access each row element and data using the getRowInfo method. This way, you can access both the row elements and their associated data for the selected rows.

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

  6. getRowByIndex: This method returns the HTML element of a chart row at the specified index. It can be used to retrieve the element of a specific row in the chart part.

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

See Also