Selection in Angular Gantt component
4 Jan 202424 minutes to read
Selection provides an option to highlight a row or a cell. It can be done using arrow keys or by scrolling down the mouse. To disable selection in the Gantt component, set the allowSelection to false.
To select data, inject the SelectionService module in provider section of AppModule.
The Gantt component supports two types of selection that can be set by using the selectionSettings.type property. They are:
-
Single: Sets a single value by default and allows only selection of a single row or a cell. -
Multiple: Allows you to select multiple rows or cells. To perform the multi-selection, press and hold the CTRL key and click the desired rows or cells.
Selection mode
The Gantt component supports three types of selection modes that can be set by using the selectionSettings.mode. They are:
-
Row: Allows you to select only rows, and the row value is set by default. -
Cell: Allows you to select only cells. -
Both: Allows you to select rows and cells at the same time.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
template:
`<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [selectionSettings]="selectionSettings"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data?: object[];
public taskSettings?: object;
public selectionSettings?: SelectionSettingsModel;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.selectionSettings = {
mode: 'Both',
};
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { SelectionService } from '@syncfusion/ej2-angular-gantt';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, GanttModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [SelectionService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);Toggle selection
The toggle selection allows you to select and deselect a specific row or cell. To enable toggle selection, set the enableToggle property of the selectionSettings to true. If you click the selected row or cell, then it will be deselected and vice versa. By default, the enableToggle property is set to false.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
template:
`<button ejs-button id='toggle' (click)='toggle()'>Disable toggle</button>
<br><br>
<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [selectionSettings]="selectionSettings"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data?: object[];
public taskSettings?: object;
public selectionSettings?: SelectionSettingsModel;
@ViewChild('gantt', {static: true})
public ganttObj?: GanttComponent| any;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.selectionSettings = {
mode: 'Row',
type: 'Multiple',
enableToggle: true
};
}
toggle(): void {
this.ganttObj.selectionSettings.enableToggle = false;
};
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { SelectionService } from '@syncfusion/ej2-angular-gantt';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, GanttModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [SelectionService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);Clear selection
You can clear the selected cells and selected rows by using a method called clearSelection. The following code example demonstrates how to clear the selected rows in Gantt Chart.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
template:
`<button ejs-button id='selectMultipleRow' (click)='select()'>Select Multiple Rows</button>
<button ejs-button id='clearselection' (click)='clear()'>Clear Selection</button>
<br><br>
<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [selectionSettings]="selectionSettings"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data?: object[];
public taskSettings?: object;
public selectionSettings?: SelectionSettingsModel;
@ViewChild('gantt', {static: true})
public ganttObj?: GanttComponent| any;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.selectionSettings = {
mode: 'Row',
type: 'Multiple',
};
}
select(): void {
this.ganttObj.selectionModule.selectRows([1, 3, 5]); // passing the record index to select the rows
};
clear(): void {
this.ganttObj.clearSelection(); // Clear the selected rows
};
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { SelectionService } from '@syncfusion/ej2-angular-gantt';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, GanttModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [SelectionService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);Get selected row indexes and records
You can get the selected row indexes by using the getSelectedRowIndexes method. And by using getSelectedRecords method, you can get the selected record details.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
@Component({
selector: 'app-root',
template:
`<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [selectionSettings]="selectionSettings" (rowSelected) = "rowSelected($event)"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data?: object[];
public taskSettings?: object;
public selectionSettings?: SelectionSettingsModel;
@ViewChild('gantt', {static: true})
public ganttObj?: GanttComponent| any;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.selectionSettings = {
mode: 'Row',
type: 'Multiple',
};
}
public rowSelected(args: any) {
let selectedrowindex: number[] = this.ganttObj.selectionModule.getSelectedRowIndexes(); // get the selected row indexes.
alert(selectedrowindex); // to alert the selected row indexes.
let selectedrecords: Object[] = this.ganttObj.selectionModule.getSelectedRecords(); // get the selected records.
console.log(selectedrecords); // to print the selected records in console window.
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { SelectionService } from '@syncfusion/ej2-angular-gantt';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, GanttModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [SelectionService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);Multiple Selection based on condition
You can select multiple rows based on condition by using the selectRows method.
In the following code, the rows which contains TaskId value as 3 and 4 are selected at initial rendering.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
@Component({
selector: 'app-root',
template:
`<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [selectionSettings]="selectionSettings" (dataBound) = "dataBound($event)"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data?: object[];
public taskSettings?: object;
public selectionSettings?: SelectionSettingsModel;
@ViewChild('gantt', {static: true})
public ganttObj?: GanttComponent| any;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.selectionSettings = {
mode: 'Row',
type: 'Multiple',
};
}
public dataBound(args: any) {
var rowIndexes: any[] = [];
this.ganttObj.treeGrid.grid.dataSource.forEach((data: any,index: any) => {
if (data.TaskID === 3 || data.TaskID === 4) {
rowIndexes.push(index);
}
});
this.ganttObj.selectRows(rowIndexes);
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { SelectionService } from '@syncfusion/ej2-angular-gantt';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, GanttModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [SelectionService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);Touch interaction
When you tap gantt row, tapped row will be selected.
Single selection : To select a single row or cell, perform single tap on it.
Multiple selection : To perform multiple selection, tap on the multiple selection popup, and then tap the desired rows or cells.
