Selection in React Gantt Chart Component
6 Aug 202624 minutes to read
The Selection feature provides the ability to highlight a row or cell in the React Gantt Chart component. Selection can be performed using arrow keys or mouse clicks.
To disable selection, set the allowSelection property to false.
To enable selection functionality, inject the Selection module in the providers section of your React application.
The Gantt Chart component supports two types of selection that can be set by using the selectionSettings.type property. They are:
- Single: Allows selection of only one row or cell at a time. This is the default behavior.
- Multiple: Enables selection of multiple rows or cells. To perform multi-selection, press and hold the Ctrl key (on Windows/Linux) or Cmd key (on macOS) while clicking the desired rows or cells.
The following video demonstrates how selection works in the React Gantt Chart:
Selection mode
The Gantt Chart component supports three types of selection modes, which can be set using the selectionSettings.mode property:
- Row: Allows selection of rows only. This is the default mode.
- Cell: Allows selection of cells only.
- Both: Allows selection of both rows and cells at the same time.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
GanttComponent,
Inject,
Selection,
TaskFieldsModel,
SelectionSettingsModel
} from '@syncfusion/ej2-react-gantt';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';
function App() {
let ganttInstance = null;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const selectionSettings = {
mode: 'Row',
type: 'Multiple',
enableToggle: true
};
const valueChange = (args) => {
if (ganttInstance) {
ganttInstance.selectionSettings.mode = args.value;
}
};
const toggleColumnSelection = (args) => {
if (ganttInstance) {
ganttInstance.selectionSettings.enableToggle = args.checked;
}
};
return (
<div>
<div style=>
<label style=>
Choose selection mode:
</label>
<DropDownListComponent
style=
dataSource={['Row', 'Cell', 'Both']}
width={150}
index={0}
change={valueChange}
/>
</div>
<div style=>
<label style=>
Enable/Disable toggle selection
</label>
<SwitchComponent
id="switch"
checked={true}
change={toggleColumnSelection}
/>
</div>
<div style=>
<GanttComponent
id="ganttDefault"
ref={(g) => (ganttInstance = g)}
height="380px"
dataSource={data}
taskFields={taskFields}
selectionSettings={selectionSettings}
>
<Inject services={[Selection]} />
</GanttComponent>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, TaskFieldsModel, SelectionSettingsModel, Selection, Inject } from '@syncfusion/ej2-react-gantt';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { data } from './datasource';
function App() {
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const selectionSettings: SelectionSettingsModel = {
mode: 'Row'
};
const dropdownData: Object[] = [
{ text: 'Row', value: 'Row' },
{ text: 'Cell', value: 'Cell' },
{ text: 'Both', value: 'Both' }
];
let ganttInstance: any;
function valueChange(args: ChangeEventArgs): void {
ganttInstance.selectionSettings.mode = args.value as any;
}
return (
<div>
<div style=>
<label style=>
Choose selection mode:
</label>
<DropDownListComponent
width="200"
index={0}
dataSource={dropdownData}
change={valueChange}
/>
</div>
<div style=>
<GanttComponent
id="ganttDefault"
ref={(g: GanttComponent) => ganttInstance = g}
height="380px"
dataSource={data}
taskFields={taskFields}
selectionSettings={selectionSettings}>
<Inject services={[Selection]} />
</GanttComponent>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/tailwind3.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Toggle selection
Toggle selection allows you to select or deselect a specific row or cell with repeated clicks. To enable this feature, set the enableToggle property of selectionSettings to true.
When enabled, clicking a selected row or cell will deselect it, and clicking it again will reselect it. By default, the enableToggle property is set to false.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';
function App() {
let ganttInstance = null;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const selectionSettings = {
mode: 'Row',
type: 'Multiple',
enableToggle: true
};
const valueChange = (args) => {
if (ganttInstance) {
ganttInstance.selectionSettings.mode = args.value;
}
};
const toggleColumnSelection = (args) => {
if (ganttInstance) {
ganttInstance.selectionSettings.enableToggle = args.checked;
}
};
return (
<div>
<div style=>
<label style=>
Choose selection mode:
</label>
<DropDownListComponent
dataSource={['Row', 'Cell', 'Both']}
width={150}
index={0}
change={valueChange}
/>
</div>
<div style=>
<label style=>
Enable/Disable toggle selection
</label>
<SwitchComponent
id="switch"
checked={true}
change={toggleColumnSelection}
/>
</div>
<div style=>
<GanttComponent
id="ganttDefault"
ref={(g) => (ganttInstance = g)}
height="380px"
dataSource={data}
taskFields={taskFields}
selectionSettings={selectionSettings}>
<Inject services={[Selection]} />
</GanttComponent>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Selection, TaskFieldsModel, SelectionSettingsModel } from '@syncfusion/ej2-react-gantt';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';
function App() {
let ganttInstance: GanttComponent | null = null;
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const selectionSettings: SelectionSettingsModel = {
mode: 'Row',
type: 'Multiple',
enableToggle: true
};
const valueChange = (args: ChangeEventArgs): void => {
if (ganttInstance) {
ganttInstance.selectionSettings.mode = args.value as 'Row' | 'Cell' | 'Both';
}
};
const toggleColumnSelection = (args: any): void => {
if (ganttInstance) {
ganttInstance.selectionSettings.enableToggle = args.checked;
}
};
return (
<div>
<div style=>
<label style=>
Choose selection mode:
</label>
<DropDownListComponent
dataSource={['Row', 'Cell', 'Both']}
width={150}
index={0}
change={valueChange}
/>
</div>
<div style=>
<label style=>
Enable/Disable toggle selection
</label>
<SwitchComponent
id="switch"
checked={true}
change={toggleColumnSelection}
/>
</div>
<div style=>
<GanttComponent
id="ganttDefault"
ref={(g: GanttComponent) => (ganttInstance = g)}
height="380px"
dataSource={data}
taskFields={taskFields}
selectionSettings={selectionSettings}>
<Inject services={[Selection]} />
</GanttComponent>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/tailwind3.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Persist selection
Persist Selection retains selected tasks even after performing actions such as sorting, filtering, or refreshing the data. To enable this, set selectionSettings.persistSelection to true.
Cell selection is not supported by the persistence feature.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Selection, Sort, Filter } from '@syncfusion/ej2-react-gantt';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';
function App() {
let ganttInstance = null;
const taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const selectionSettings = {
mode: 'Row',
type: 'Multiple',
persistSelection: true
};
const toggleColumnSelection = (args) => {
if (ganttInstance) {
ganttInstance.selectionSettings.persistSelection = args.checked;
}
};
return (
<div>
<div style=>
<label style=>
Enable/Disable persist selection
</label>
<SwitchComponent
id="switch"
checked={true}
change={toggleColumnSelection}
/>
</div>
<div style=>
<GanttComponent
id="ganttDefault"
ref={(g) => (ganttInstance = g)}
height="370px"
dataSource={data}
allowFiltering={true}
allowSorting={true}
taskFields={taskSettings}
selectionSettings={selectionSettings}
>
<Inject services={[Selection, Sort, Filter]} />
</GanttComponent>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Selection, Sort, Filter, TaskFieldsModel, SelectionSettingsModel } from '@syncfusion/ej2-react-gantt';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import { ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { data } from './datasource';
function App() {
let ganttInstance: GanttComponent | null = null;
const taskSettings: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const selectionSettings: SelectionSettingsModel = {
mode: 'Row',
type: 'Multiple',
persistSelection: true
};
const toggleColumnSelection = (args: ChangeEventArgs & { checked: boolean }): void => {
if (ganttInstance) {
ganttInstance.selectionSettings.persistSelection = args.checked;
}
};
return (
<div>
<div style=>
<label style=>
Enable/Disable persist selection
</label>
<SwitchComponent
id="switch"
checked={true}
change={toggleColumnSelection}
/>
</div>
<div style=>
<GanttComponent
id="ganttDefault"
ref={(g) => (ganttInstance = g)}
height="370px"
dataSource={data}
allowFiltering={true}
allowSorting={true}
taskFields={taskSettings}
selectionSettings={selectionSettings}
>
<Inject services={[Selection, Sort, Filter]} />
</GanttComponent>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/tailwind3.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Hover highlighting
The hover highlighting feature in the React Gantt Chart enhances usability by visually highlighting tree grid rows, chart task bars, header cells, and timeline cells on hover. This makes it easier to follow tasks in complex project timelines.
To enable this feature, set the enableHover property to true in the component. By default, this property is set to false.
The following code example shows how to enable the hover highlighting in Gantt.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
let ganttInstance;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const settings = {
mode: 'Row',
type: 'Multiple'
};
return <GanttComponent dataSource={data} allowSelection={true} enableHover={true} taskFields={taskFields}
selectionSettings={settings} height='450px' ref={gantt => ganttInstance = gantt}>
<Inject services={[Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Selection, SelectionSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
let ganttInstance: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const settings: SelectionSettingsModel = {
mode: 'Row',
type: 'Multiple'
};
return <GanttComponent dataSource={data} allowSelection={true} enableHover={true} taskFields={taskFields}
selectionSettings={settings} height='450px' ref={gantt => ganttInstance = gantt}>
<Inject services={[Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/tailwind3.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Clear selection
To clear selected rows and cells in the Gantt Chart component, use the clearSelection method.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';
function App() {
let ganttInstance = null;
const taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const selectionSettings = {
mode: 'Both',
type: 'Multiple'
};
const dropdownData = [
{ text: 'Row', value: 'Row' },
{ text: 'Cell', value: 'Cell' },
{ text: 'Both', value: 'Both' }
];
const valueChange = (args) => {
if (ganttInstance) {
ganttInstance.selectionSettings.mode = args.value;
}
};
const clear = () => {
if (ganttInstance) {
ganttInstance.clearSelection();
}
};
return (
<div>
<div style=>
<label style=>Choose selection mode:</label>
<DropDownListComponent
dataSource={dropdownData}
width={150}
index={0}
change={valueChange}
/>
<ButtonComponent onClick={clear}>Clear Selection</ButtonComponent>
</div>
<GanttComponent
id="ganttDefault"
ref={(g) => (ganttInstance = g)}
height="430px"
dataSource={data}
taskFields={taskSettings}
selectionSettings={selectionSettings}
>
<Inject services={[Selection]} />
</GanttComponent>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, TaskFieldsModel, SelectionSettingsModel, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';
function App() {
let ganttInstance: GanttComponent | null = null;
const taskSettings: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const selectionSettings: SelectionSettingsModel = {
mode: 'Both',
type: 'Multiple'
};
const dropdownData = [
{ text: 'Row', value: 'Row' },
{ text: 'Cell', value: 'Cell' },
{ text: 'Both', value: 'Both' }
];
const valueChange = (args: ChangeEventArgs): void => {
if (ganttInstance) {
ganttInstance.selectionSettings.mode = args.value as 'Row' | 'Cell' | 'Both';
}
};
const clear = (): void => {
if (ganttInstance) {
ganttInstance.clearSelection();
}
};
return (
<div>
<div style=>
<label style=>Choose selection mode:</label>
<DropDownListComponent
dataSource={dropdownData}
width={150}
index={0}
change={valueChange}
/>
<ButtonComponent onClick={clear}>Clear Selection</ButtonComponent>
</div>
<GanttComponent
id="ganttDefault"
ref={(g: GanttComponent) => (ganttInstance = g)}
height="430px"
dataSource={data}
taskFields={taskSettings}
selectionSettings={selectionSettings}
>
<Inject services={[Selection]} />
</GanttComponent>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/tailwind3.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Touch interaction
The React Gantt Chart component supports touch interaction, allowing you to intuitively navigate and interact with chart elements on touch-enabled devices like smart phones and tablets. This feature enhances usability by allowing intuitive gestures for selecting and managing tasks.
Single Row selection: Tapping a row on a touch screen automatically selects it, offering a straightforward way to interact with the chart.
Multiple Row selection: To select multiple rows, tap a row to display a popup that activates multi-selection mode. After tapping the popup, continue tapping the desired rows to select them. This allows users to select multiple rows simultaneously, as illustrated below:
