Row selection in Angular Gantt component

18 Oct 202524 minutes to read

The Angular Gantt component supports row selection using mouse clicks or keyboard navigation (arrow keys). This enables users to highlight, manipulate, or trigger actions on selected task rows.

Single row selection

You can enable single row selection in the Gantt component by setting selectionSettings.mode to Row and selectionSettings.type to Single. This allows you to select only one task row at a time.

app.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [GanttModule],
  providers: [SelectionService],
  template: `
    <ejs-gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [selectionSettings]="selectionSettings">
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  public data: object[] = [];
  public taskSettings: object = {};
  public selectionSettings: SelectionSettingsModel = {};

  ngOnInit(): void {
    this.data = [
      {
        TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'),
      },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      {
        TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'),
      },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      dependency: 'Predecessor',
      parentID: 'ParentID'
    };
    this.selectionSettings = {
      mode: 'Row',
      type: 'Single'
    };
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Multiple row selection

You can enable multiple row selection in the Gantt component by setting selectionSettings.mode to Row and selectionSettings.type to Multiple. This allows selection of more than one task row at a time by holding down the Ctrl key while clicking on multiple rows.

app.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [GanttModule],
  providers: [SelectionService],
  template: `
    <ejs-gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [selectionSettings]="selectionSettings">
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  public data: object[] = [];
  public taskSettings: object = {};
  public selectionSettings: SelectionSettingsModel = {};

  ngOnInit(): void {
    this.data = [
      {
        TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'),
      },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      {
        TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'),
      },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      dependency: 'Predecessor',
      parentID: 'ParentID'
    };
    this.selectionSettings = {
      mode: 'Row',
      type: 'Multiple'
    };
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Row selection event sequence

• On initial row selection: rowSelecting triggers first, followed by rowSelected.

• When selecting a different row:

  • rowSelecting is followed by rowDeselecting and rowDeselected to deselect the previously selected row.

  • Then, rowSelected triggers for the newly selected row.

This sequence ensures proper handling of row transitions during selection and deselection.

Select row at initial rendering

You can highlight or pre-select a specific row during the initial rendering of the Gantt component by setting the selectedRowIndex property. This selects the row at the specified index when the Gantt loads.

The following example selects the row at index 5 during initial load:

app.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [GanttModule],
  providers: [SelectionService],
  template: `
    <ejs-gantt height="370px" [dataSource]="data" [selectedRowIndex] = '5' [taskFields]="taskSettings" [selectionSettings]="selectionSettings">
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  public data: object[] = [];
  public taskSettings: object = {};
  public selectionSettings: SelectionSettingsModel = {};

  ngOnInit(): void {
    this.data = [
      {
        TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'),
      },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      {
        TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'),
      },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      dependency: 'Predecessor',
      parentID: 'ParentID'
    };
    this.selectionSettings = {
      mode: 'Row',
      type: 'Multiple'
    };
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can also select single or multiple rows during the initial load by using the selectRow or selectRows method inside the dataBound event.

Select rows externally

You can programmatically or dynamically select single rows, multiple rows, or a range of rows in the Angular Gantt component.

Single row selection

Select a single row in the Gantt component by calling the selectRow method with the desired row index.

app.component.ts

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttComponent, GanttModule, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
import { TextBoxComponent, TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
    standalone: true,
    selector: 'app-root',
    imports: [GanttModule, TextBoxModule, ButtonModule],
    providers: [SelectionService],
    template: `  
        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
            <label style="font-weight: bold;">Enter the row index:</label>
            <ejs-textbox #textbox width="100"></ejs-textbox>
            <button ejs-button (click)="click()">Select Row</button>
        </div>
        <ejs-gantt #gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [selectionSettings]="selectionSettings">
        </ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
    @ViewChild('gantt', { static: true }) public ganttInstance!: GanttComponent;
    @ViewChild('textbox', { static: false }) public textbox?: TextBoxComponent;
    public data: object[] = [];
    public taskSettings: object = {};
    public selectionSettings: SelectionSettingsModel = {};

    ngOnInit(): void {
        this.data = [
            { TaskID: 1, TaskName: 'Initiation Phase', StartDate: new Date('2023-04-01'), Duration: 5, Progress: 40 },
            { TaskID: 2, TaskName: 'Site Survey', StartDate: new Date('2023-04-06'), Duration: 4, ParentID: 1, Progress: 60 },
            { TaskID: 3, TaskName: 'Soil Testing', StartDate: new Date('2023-04-10'), Duration: 4, ParentID: 1, Progress: 50 },
            { TaskID: 4, TaskName: 'Approval Process', StartDate: new Date('2023-04-14'), Duration: 3, ParentID: 1, Progress: 30 },
            { TaskID: 5, TaskName: 'Estimation Phase', StartDate: new Date('2023-04-18'), Duration: 6, Progress: 20 },
            { TaskID: 6, TaskName: 'Floor Plan Design', StartDate: new Date('2023-04-24'), Duration: 3, ParentID: 5, Progress: 50 },
            { TaskID: 7, TaskName: 'Material Listing', StartDate: new Date('2023-04-27'), Duration: 3, ParentID: 5, Progress: 50 },
            { TaskID: 8, TaskName: 'Final Approval', StartDate: new Date('2023-04-30'), Duration: 2, ParentID: 5, Progress: 50 }
        ];
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID: 'ParentID'
        };
        this.selectionSettings = {
            mode: 'Row',
            type: 'Single'
        };
    }

    public click(): void {
        const value = (this.textbox as TextBoxComponent).element.value as string;
        const rowIndex = parseInt(value, 10);
        if (!isNaN(rowIndex)) {
            this.ganttInstance.selectRow(rowIndex);
        }
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Multiple rows selection

Select multiple rows in the Gantt component by using the selectRows method with an array of row indexes.

app.component.ts

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttComponent, GanttModule, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [GanttModule, ButtonModule],
  providers: [SelectionService],
  template: `
    <div style="display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0 20px 0;">
      <button ejs-button (click)="selectRows([1, 3])">Select [1, 3]</button>
      <button ejs-button (click)="selectRows([0, 2])">Select [0, 2]</button>
      <button ejs-button (click)="selectRows([2, 4])">Select [2, 4]</button>
      <button ejs-button (click)="selectRows([0, 5])">Select [0, 5]</button>
      <button ejs-button (click)="selectRows([1, 6])">Select [1, 6]</button>
      <button ejs-button (click)="selectRows([0, 7, 2])">Select [0, 7, 2]</button>
      <button ejs-button (click)="selectRows([1, 6, 7])">Select [1, 6, 7]</button>
      <button ejs-button (click)="selectRows([4, 6, 7])">Select [4, 6, 7]</button>
      <button ejs-button (click)="selectRows([2, 5, 6])">Select [2, 5, 6]</button>
    </div>
    <ejs-gantt #gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [selectionSettings]="selectionSettings" enableHover="true">
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance!: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public selectionSettings: SelectionSettingsModel = {};

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Kickoff', StartDate: new Date('2023-04-01'), Duration: 5, Progress: 40 },
      { TaskID: 2, TaskName: 'Requirement Gathering', StartDate: new Date('2023-04-06'), Duration: 4, ParentID: 1, Progress: 60 },
      { TaskID: 3, TaskName: 'Feasibility Study', StartDate: new Date('2023-04-10'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Initial Approval', StartDate: new Date('2023-04-14'), Duration: 3, ParentID: 1, Progress: 30 },
      { TaskID: 5, TaskName: 'Design Phase', StartDate: new Date('2023-04-18'), Duration: 6, Progress: 20 },
      { TaskID: 6, TaskName: 'UI/UX Design', StartDate: new Date('2023-04-24'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'Architecture Planning', StartDate: new Date('2023-04-27'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Final Review', StartDate: new Date('2023-04-30'), Duration: 2, ParentID: 5, Progress: 50 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.selectionSettings = {
      mode: 'Row',
      type: 'Multiple'
    };
  }

  public selectRows(rowIndexes: number[]): void {
    this.ganttInstance.clearSelection();
    this.ganttInstance.selectRows(rowIndexes);
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Range of rows selection

Select a range of rows in the Gantt component by using the selectRowsByRange method with the start and end row indexes.

app.component.ts

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttComponent, GanttModule, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
import { TextBoxComponent, TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [GanttModule, TextBoxModule, ButtonModule],
  providers: [SelectionService],
  template: `
    <div style="display: flex; align-items: center; gap: 10px; padding: 20px 0;">
      <label style="font-weight: bold;">Start Row Index:</label>
      <ejs-textbox #startTextbox type="number" width="120"></ejs-textbox>
      <label style="font-weight: bold;">End Row Index:</label>
      <ejs-textbox #endTextbox type="number" width="120"></ejs-textbox>
      <button ejs-button (click)="selectRowRange()">Select Rows</button>
    </div>
    <ejs-gantt #gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [selectionSettings]="selectionSettings" enableHover="true">
    </ejs-gantt>
  `,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance!: GanttComponent;
  @ViewChild('startTextbox') public startTextbox!: TextBoxComponent;
  @ViewChild('endTextbox') public endTextbox!: TextBoxComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public selectionSettings: SelectionSettingsModel = {};

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Planning', StartDate: new Date('2023-04-01'), Duration: 5, Progress: 40 },
      { TaskID: 2, TaskName: 'Requirement Analysis', StartDate: new Date('2023-04-06'), Duration: 4, ParentID: 1, Progress: 60 },
      { TaskID: 3, TaskName: 'Design', StartDate: new Date('2023-04-10'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Development', StartDate: new Date('2023-04-14'), Duration: 3, ParentID: 1, Progress: 30 },
      { TaskID: 5, TaskName: 'Testing', StartDate: new Date('2023-04-18'), Duration: 6, Progress: 20 },
      { TaskID: 6, TaskName: 'Deployment', StartDate: new Date('2023-04-24'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'Maintenance', StartDate: new Date('2023-04-27'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Closure', StartDate: new Date('2023-04-30'), Duration: 2, ParentID: 5, Progress: 50 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.selectionSettings = {
      mode: 'Row',
      type: 'Multiple'
    };
  }

  public selectRowRange(): void {
    const start = parseInt(this.startTextbox.element.value, 10);
    const end = parseInt(this.endTextbox.element.value, 10);
    if (!isNaN(start) && !isNaN(end) && start >= 0 && end >= start) {
      this.ganttInstance.clearSelection();
      this.ganttInstance.selectionModule.selectRowsByRange(start, end);
    }
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Get selected row information

To access selected row details in the Angular Gantt component:

• getSelectedRowIndexes – Returns the index positions of selected rows.
• getSelectedRecords – Provides the corresponding data objects.
• getSelectedRows – Retrieves the actual row elements from the DOM.

app.component.ts

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GanttComponent, GanttModule, SelectionService, SelectionSettingsModel } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GanttModule, ButtonModule],
  providers: [SelectionService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="button-container">
      <button ejs-button cssClass="action-button" (click)="getSelectedRowInfo()">Show Selected Tasks</button>
    </div>
    <div class="table-container">
      <table *ngIf="selectedRecords.length > 0" class="task-table">
        <thead>
          <tr>
            <th>Index</th>
            <th>Task Details</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let record of selectedRecords; let i = index" [ngClass]="{'selected-row': true, 'alternate-row': i % 2 !== 0}">
            <td></td>
            <td>
              <div><strong>Task ID:</strong> </div>
              <div><strong>Task Name:</strong> </div>
              <div><strong>Start Date:</strong> </div>
              <div><strong>Duration:</strong> </div>
              <div><strong>Progress:</strong> %</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [selectionSettings]="selectionSettings">
    </ejs-gantt>
  `,
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance!: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public selectionSettings: SelectionSettingsModel = {};
  public selectedRowIndexes: number[] = [];
  public selectedRecords: Task[] = [];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Progress: 0 },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Progress: 0 },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
    ];

    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };

    this.selectionSettings = {
      mode: 'Row',
      type: 'Multiple'
    };
  }

  public getSelectedRowInfo(): void {
    // Get selected rows and apply custom style.
    this.selectedRecords = this.ganttInstance.selectionModule.getSelectedRecords() as Task[];
    this.selectedRowIndexes = this.ganttInstance.selectionModule.getSelectedRowIndexes();
    const selectedRows = this.ganttInstance.selectionModule.getSelectedRows() as HTMLElement[];

    // Apply custom-selected-row class to currently selected rows.
    selectedRows.forEach(row => row.classList.add('custom-selected-row'));
  }
}

interface Task {
  TaskID: number;
  TaskName: string;
  StartDate: Date;
  EndDate?: Date;
  Duration?: number;
  Progress?: number;
  ParentID?: number;
}

app.component.css

.button-container {
      padding: 20px 0;
    }

    .action-button {
      background: linear-gradient(90deg, #1e3a8a, #3b82f6);
      color: #ffffff;
      padding: 12px 24px;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .action-button:hover {
      background: linear-gradient(90deg, #1e40af, #60a5fa);
      transform: scale(1.05);
    }

    .action-button:active {
      transform: scale(0.95);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .action-button:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
    }

    .table-container {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }

    .task-table {
      border-collapse: collapse;
      width: 80%;
      max-width: 900px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .task-table th, .task-table td {
      padding: 12px 16px;
      text-align: left;
      border: 1px solid #e5e7eb;
    }

    .task-table th {
      background: #f3f4f6;
      font-weight: 600;
      color: #1f2937;
    }

    .selected-row {
      background: #eff6ff;
      transition: background 0.2s ease;
    }

    .alternate-row {
      background: #f9fafb;
    }

    .task-table td div {
      margin-bottom: 6px;
      color: #1f2937;
    }
      
    .e-gantt .e-grid .custom-selected-row .e-selectionbackground {
      background-color: #d1e7dd !important;
    }

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Note: The Gantt component supports keyboard navigation for row selection. Use arrow keys to move focus and Enter or Space to select rows. Ensure accessibility compliance by providing appropriate ARIA attributes.

Customize row selection action

You can customize row selection in the Gantt chart using rowSelecting, rowSelected, rowDeselecting, and rowDeselected events, which allow dynamic control over selection behavior based on specific conditions.

The following demonstrates how row selection and background color updates are handled in the Angular Gantt component:

• In rowSelecting, selection is prevented when TaskID is 2.
• In rowSelected, rows with Progress > 40 are highlighted with a green background.
• In rowDeselected, rows with Progress ≤ 40 are styled with mauvelous background color.
• In rowDeselecting, if Progress > 80, the background color changes to yellow.

The following sample demonstrates

app.component.ts

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GanttComponent, GanttModule, RowDeselectEventArgs, RowSelectEventArgs, RowSelectingEventArgs, SelectionService, SelectionSettingsModel } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GanttModule, ButtonModule],
  providers: [SelectionService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <p id="message" *ngIf="showMessage"></p>
    <ejs-gantt #gantt id="ganttDefault" height="370px" [dataSource]="data" [taskFields]="taskSettings" (rowSelected)="rowSelected($event)" (rowSelecting)="rowSelecting($event)" (rowDeselected)="rowDeselected($event)" (rowDeselecting)="rowDeselecting($event)" [selectionSettings]="selectionSettings" enableHover="false">
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance!: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public selectionSettings: SelectionSettingsModel = {};
  public showMessage = false;
  public message = '';

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 60 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 30 },
      { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 90 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 30 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 80 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.selectionSettings = {
      mode: 'Row',
      type: 'Multiple'
    };
  }

  public rowSelecting(args: RowSelectingEventArgs): void {
    const task = args.data as Task;
    this.showMessage = true;
    if (task.TaskID === 2) {
      args.cancel = true;
      this.message += ' - Selection cancelled for TaskID 2';
    }
  }

  public rowSelected(args: RowSelectEventArgs): void {
    const task = args.data as Task;
    if (task.Progress && task.Progress > 40) {
      (args.row as HTMLElement).style.backgroundColor = 'rgba(203, 246, 205, 1)';
    }
  }

  public rowDeselected(args: RowDeselectEventArgs): void {
    if (args.data && !Array.isArray(args.data)) {
      const task = args.data as Task;
      if (task.Progress && task.Progress <= 40) {
        (args.row as HTMLElement).style.backgroundColor = '#e1838eff';
      }
    }
  }

  public rowDeselecting(args: RowDeselectEventArgs): void {
    if (args.data && !Array.isArray(args.data)) {
      const task = args.data as Task;
      if (task.Progress && task.Progress > 80) {
        (args.row as HTMLElement).style.backgroundColor = '#f5f54bff';
      }
    }
  }
}

interface Task {
  TaskID: number;
  TaskName: string;
  StartDate: Date;
  EndDate?: Date;
  Duration?: number;
  Progress?: number;
  ParentID?: number;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));