Syncfusion AI Assistant

How can I help you?

Row Selection in React Gantt Chart Component

12 Mar 202624 minutes to read

The React Gantt Chart 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 Chart component by setting selectionSettings.mode to Row and selectionSettings.type to Single. This allows you to select only one task row at a time.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const selectionSettings = {
    mode: 'Row',
    type: 'Single'
  };
  return (
    <GanttComponent
      height="370px"
      dataSource={data}
      taskFields={taskSettings}
      selectionSettings={selectionSettings}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" width="90" textAlign="Right" />
        <ColumnDirective field="TaskName" width="250" />
        <ColumnDirective field="StartDate" width="150" format="yMd" />
        <ColumnDirective field="Duration" width="120" textAlign="Right" />
        <ColumnDirective field="Progress" width="120" textAlign="Right" />
      </ColumnsDirective>
      <Inject services={[Selection]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, SelectionSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const selectionSettings: SelectionSettingsModel = {
    mode: 'Row',
    type: 'Single'
  };
  return (
    <GanttComponent
      height="370px"
      dataSource={data}
      taskFields={taskSettings}
      selectionSettings={selectionSettings}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" width="90" textAlign="Right" />
        <ColumnDirective field="TaskName" width="250" />
        <ColumnDirective field="StartDate" width="150" format="yMd" />
        <ColumnDirective field="Duration" width="120" textAlign="Right" />
        <ColumnDirective field="Progress" width="120" textAlign="Right" />
      </ColumnsDirective>
      <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/33.1.44/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>

Multiple row selection

You can enable multiple row selection in the Gantt Chart 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.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
    const taskSettings = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const selectionSettings = {
        mode: 'Row',
        type: 'Multiple'
    };
    function selectRows(indexes) {
        const ganttObj = document.querySelector('#gantt').ej2_instances[0];
        ganttObj.clearSelection();
        ganttObj.selectRows(indexes);
    }
    return (
        <div>
            <div style=>
                <ButtonComponent onClick={() => selectRows([1, 3])}>Select [1, 3]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([0, 2])}>Select [0, 2]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([2, 4])}>Select [2, 4]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([0, 5])}>Select [0, 5]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([1, 6])}>Select [1, 6]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([0, 7, 2])}>Select [0, 7, 2]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([1, 6, 7])}>Select [1, 6, 7]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([4, 6, 7])}>Select [4, 6, 7]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([2, 5, 6])}>Select [2, 5, 6]</ButtonComponent>
            </div>

            <GanttComponent
                id="gantt"
                height="370px"
                dataSource={data}
                taskFields={taskSettings}
                selectionSettings={selectionSettings}
                enableHover={true}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" width="90" textAlign="Right" />
                    <ColumnDirective field="TaskName" width="250" />
                    <ColumnDirective field="StartDate" width="150" format="yMd" />
                    <ColumnDirective field="Duration" width="120" textAlign="Right" />
                    <ColumnDirective field="Progress" width="120" textAlign="Right" />
                </ColumnsDirective>

                <Inject services={[Selection]} />
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, SelectionSettingsModel } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
    const taskSettings: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const selectionSettings: SelectionSettingsModel = {
        mode: 'Row',
        type: 'Multiple'
    };
    function selectRows(indexes: number[]) {
        const ganttObj: any = (document.querySelector('#gantt') as any).ej2_instances[0];
        ganttObj.clearSelection();
        ganttObj.selectRows(indexes);
    }
    return (
        <div>
            <div style=>
                <ButtonComponent onClick={() => selectRows([1, 3])}>Select [1, 3]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([0, 2])}>Select [0, 2]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([2, 4])}>Select [2, 4]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([0, 5])}>Select [0, 5]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([1, 6])}>Select [1, 6]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([0, 7, 2])}>Select [0, 7, 2]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([1, 6, 7])}>Select [1, 6, 7]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([4, 6, 7])}>Select [4, 6, 7]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([2, 5, 6])}>Select [2, 5, 6]</ButtonComponent>
            </div>

            <GanttComponent
                id="gantt"
                height="370px"
                dataSource={data}
                taskFields={taskSettings}
                selectionSettings={selectionSettings}
                enableHover={true}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" width="90" textAlign="Right" />
                    <ColumnDirective field="TaskName" width="250" />
                    <ColumnDirective field="StartDate" width="150" format="yMd" />
                    <ColumnDirective field="Duration" width="120" textAlign="Right" />
                    <ColumnDirective field="Progress" width="120" textAlign="Right" />
                </ColumnsDirective>

                <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/33.1.44/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>

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 Chart 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:

index.jsx
index.tsx
index.html
import * as React from 'react'; import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {

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

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

  return (
    <GanttComponent
      height="370px"
      dataSource={data}
      selectedRowIndex={5}
      taskFields={taskSettings}
      selectionSettings={selectionSettings}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" width="90" textAlign="Right" />
        <ColumnDirective field="TaskName" width="250" />
        <ColumnDirective field="StartDate" width="150" format="yMd" />
        <ColumnDirective field="Duration" width="120" textAlign="Right" />
        <ColumnDirective field="Progress" width="120" textAlign="Right" />
      </ColumnsDirective>

      <Inject services={[Selection]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react'; import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, SelectionSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {

  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    parentID: 'ParentID'
  };

  const selectionSettings: SelectionSettingsModel = {
    mode: 'Row',
    type: 'Multiple'
  };

  return (
    <GanttComponent
      height="370px"
      dataSource={data}
      selectedRowIndex={5}
      taskFields={taskSettings}
      selectionSettings={selectionSettings}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" width="90" textAlign="Right" />
        <ColumnDirective field="TaskName" width="250" />
        <ColumnDirective field="StartDate" width="150" format="yMd" />
        <ColumnDirective field="Duration" width="120" textAlign="Right" />
        <ColumnDirective field="Progress" width="120" textAlign="Right" />
      </ColumnsDirective>

      <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/33.1.44/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>

Select rows externally

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

Single row selection

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

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
  let textBoxObj = null;
  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const selectionSettings = {
    mode: 'Row',
    type: 'Single'
  };
  function clickHandler() {
    if (textBoxObj) {
      const value = textBoxObj.value;
      const index = parseInt(value, 10);
      if (!isNaN(index)) {
        const ganttObj = document.querySelector('#gantt').ej2_instances[0];
        ganttObj.selectRow(index);
      }
    }
  }
  return (
    <div>
      <div style=>
        <label style=>Enter the row index:</label>
        <TextBoxComponent width="100" ref={(scope) => { textBoxObj = scope; }} />
        <ButtonComponent onClick={clickHandler}>Select Row</ButtonComponent>
      </div>
      <GanttComponent
        id="gantt"
        height="370px"
        dataSource={data}
        taskFields={taskSettings}
        selectionSettings={selectionSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" width="90" textAlign="Right" />
          <ColumnDirective field="TaskName" width="200" />
          <ColumnDirective field="StartDate" width="120" format="yMd" />
          <ColumnDirective field="Duration" width="120" textAlign="Right" />
          <ColumnDirective field="Progress" width="120" textAlign="Right" />
        </ColumnsDirective>
        <Inject services={[Selection]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, SelectionSettingsModel } from '@syncfusion/ej2-react-gantt';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
  let textBoxObj: any = null;
  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const selectionSettings: SelectionSettingsModel = {
    mode: 'Row',
    type: 'Single'
  };
  function clickHandler() {
    if (textBoxObj) {
      const value = textBoxObj.value;
      const index = parseInt(value, 10);
      if (!isNaN(index)) {
        const ganttObj: any = (document.querySelector('#gantt') as any).ej2_instances[0];
        ganttObj.selectRow(index);
      }
    }
  }
  return (
    <div>
      <div style=>
        <label style=>Enter the row index:</label>
        <TextBoxComponent
          width="100"
          ref={(scope) => { textBoxObj = scope; }}
        />
        <ButtonComponent onClick={clickHandler}>Select Row</ButtonComponent>
      </div>
      <GanttComponent
        id="gantt"
        height="370px"
        dataSource={data}
        taskFields={taskSettings}
        selectionSettings={selectionSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" width="90" textAlign="Right" />
          <ColumnDirective field="TaskName" width="200" />
          <ColumnDirective field="StartDate" width="120" format="yMd" />
          <ColumnDirective field="Duration" width="120" textAlign="Right" />
          <ColumnDirective field="Progress" width="120" textAlign="Right" />
        </ColumnsDirective>
        <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/33.1.44/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>

Multiple rows selection

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

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
    const taskSettings = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const selectionSettings = {
        mode: 'Row',
        type: 'Multiple'
    };
    function selectRows(indexes) {
        const ganttObj = document.querySelector('#gantt').ej2_instances[0];
        ganttObj.clearSelection();
        ganttObj.selectRows(indexes);
    }
    return (
        <div>
            <div style=>
                <ButtonComponent onClick={() => selectRows([1, 3])}>Select [1, 3]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([0, 2])}>Select [0, 2]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([2, 4])}>Select [2, 4]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([0, 5])}>Select [0, 5]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([1, 6])}>Select [1, 6]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([0, 7, 2])}>Select [0, 7, 2]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([1, 6, 7])}>Select [1, 6, 7]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([4, 6, 7])}>Select [4, 6, 7]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([2, 5, 6])}>Select [2, 5, 6]</ButtonComponent>
            </div>

            <GanttComponent
                id="gantt"
                height="370px"
                dataSource={data}
                taskFields={taskSettings}
                selectionSettings={selectionSettings}
                enableHover={true}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" width="90" textAlign="Right" />
                    <ColumnDirective field="TaskName" width="250" />
                    <ColumnDirective field="StartDate" width="150" format="yMd" />
                    <ColumnDirective field="Duration" width="120" textAlign="Right" />
                    <ColumnDirective field="Progress" width="120" textAlign="Right" />
                </ColumnsDirective>

                <Inject services={[Selection]} />
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, SelectionSettingsModel } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
    const taskSettings: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const selectionSettings: SelectionSettingsModel = {
        mode: 'Row',
        type: 'Multiple'
    };
    function selectRows(indexes: number[]) {
        const ganttObj: any = (document.querySelector('#gantt') as any).ej2_instances[0];
        ganttObj.clearSelection();
        ganttObj.selectRows(indexes);
    }
    return (
        <div>
            <div style=>
                <ButtonComponent onClick={() => selectRows([1, 3])}>Select [1, 3]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([0, 2])}>Select [0, 2]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([2, 4])}>Select [2, 4]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([0, 5])}>Select [0, 5]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([1, 6])}>Select [1, 6]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([0, 7, 2])}>Select [0, 7, 2]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([1, 6, 7])}>Select [1, 6, 7]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([4, 6, 7])}>Select [4, 6, 7]</ButtonComponent>
                <ButtonComponent onClick={() => selectRows([2, 5, 6])}>Select [2, 5, 6]</ButtonComponent>
            </div>

            <GanttComponent
                id="gantt"
                height="370px"
                dataSource={data}
                taskFields={taskSettings}
                selectionSettings={selectionSettings}
                enableHover={true}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" width="90" textAlign="Right" />
                    <ColumnDirective field="TaskName" width="250" />
                    <ColumnDirective field="StartDate" width="150" format="yMd" />
                    <ColumnDirective field="Duration" width="120" textAlign="Right" />
                    <ColumnDirective field="Progress" width="120" textAlign="Right" />
                </ColumnsDirective>

                <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/33.1.44/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>

Range of rows selection

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

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
    let startObj = null;
    let endObj = null;
    const taskSettings = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const selectionSettings = {
        mode: 'Row',
        type: 'Multiple'
    };
    function selectRowRange() {
        const start = parseInt(startObj.value, 10);
        const end = parseInt(endObj.value, 10);

        if (!isNaN(start) && !isNaN(end) && start >= 0 && end >= start) {
            const ganttObj = document.querySelector('#gantt').ej2_instances[0];
            ganttObj.clearSelection();
            ganttObj.selectionModule.selectRowsByRange(start, end);
        }
    }
    return (
        <div>
            <div style=>
                <label style=>Start Row Index:</label>
                <TextBoxComponent width="120" type="number" ref={(scope) => { startObj = scope; }} />
                <label style=>End Row Index:</label>
                <TextBoxComponent width="120" type="number" ref={(scope) => { endObj = scope; }} />
                <ButtonComponent onClick={selectRowRange}>Select Rows</ButtonComponent>
            </div>
            <GanttComponent
                id="gantt"
                height="370px"
                dataSource={data}
                taskFields={taskSettings}
                selectionSettings={selectionSettings}
                enableHover={true}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" width="90" textAlign="Right" />
                    <ColumnDirective field="TaskName" width="220" />
                    <ColumnDirective field="StartDate" width="150" format="yMd" />
                    <ColumnDirective field="Duration" width="120" textAlign="Right" />
                    <ColumnDirective field="Progress" width="120" textAlign="Right" />
                </ColumnsDirective>
                <Inject services={[Selection]} />
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, SelectionSettingsModel } from '@syncfusion/ej2-react-gantt';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
    let startObj: any = null;
    let endObj: any = null;
    const taskSettings: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const selectionSettings: SelectionSettingsModel = {
        mode: 'Row',
        type: 'Multiple'
    };
    function selectRowRange() {
        const start = parseInt(startObj.value, 10);
        const end = parseInt(endObj.value, 10);

        if (!isNaN(start) && !isNaN(end) && start >= 0 && end >= start) {
            const ganttObj: any = (document.querySelector('#gantt') as any).ej2_instances[0];
            ganttObj.clearSelection();
            ganttObj.selectionModule.selectRowsByRange(start, end);
        }
    }
    return (
        <div>
            <div style=>
                <label style=>Start Row Index:</label>
                <TextBoxComponent width="120" type="number" ref={(scope) => { startObj = scope; }} />
                <label style=>End Row Index:</label>
                <TextBoxComponent width="120" type="number" ref={(scope) => { endObj = scope; }} />
                <ButtonComponent onClick={selectRowRange}>Select Rows</ButtonComponent>
            </div>
            <GanttComponent
                id="gantt"
                height="370px"
                dataSource={data}
                taskFields={taskSettings}
                selectionSettings={selectionSettings}
                enableHover={true}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" width="90" textAlign="Right" />
                    <ColumnDirective field="TaskName" width="220" />
                    <ColumnDirective field="StartDate" width="150" format="yMd" />
                    <ColumnDirective field="Duration" width="120" textAlign="Right" />
                    <ColumnDirective field="Progress" width="120" textAlign="Right" />
                </ColumnsDirective>
                <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/33.1.44/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>

Enable multi row selection without Ctrl key

You can enable simple multi-row selection by setting the enableSimpleMultiRowSelection property to true in the Grid configuration during the created event. This allows multiple rows to be selected individually through clicks without holding the Ctrl key.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
    let startObj = null;
    let endObj = null;
    const taskSettings = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const selectionSettings = {
        mode: 'Row',
        type: 'Multiple'
    };
    function selectRowRange() {
        const start = parseInt(startObj.value, 10);
        const end = parseInt(endObj.value, 10);

        if (!isNaN(start) && !isNaN(end) && start >= 0 && end >= start) {
            const ganttObj = document.querySelector('#gantt').ej2_instances[0];
            ganttObj.clearSelection();
            ganttObj.selectionModule.selectRowsByRange(start, end);
        }
    }
    return (
        <div>
            <div style=>
                <label style=>Start Row Index:</label>
                <TextBoxComponent width="120" type="number" ref={(scope) => { startObj = scope; }} />
                <label style=>End Row Index:</label>
                <TextBoxComponent width="120" type="number" ref={(scope) => { endObj = scope; }} />
                <ButtonComponent onClick={selectRowRange}>Select Rows</ButtonComponent>
            </div>
            <GanttComponent
                id="gantt"
                height="370px"
                dataSource={data}
                taskFields={taskSettings}
                selectionSettings={selectionSettings}
                enableHover={true}
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" width="90" textAlign="Right" />
                    <ColumnDirective field="TaskName" width="220" />
                    <ColumnDirective field="StartDate" width="150" format="yMd" />
                    <ColumnDirective field="Duration" width="120" textAlign="Right" />
                    <ColumnDirective field="Progress" width="120" textAlign="Right" />
                </ColumnsDirective>
                <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 } from '@syncfusion/ej2-react-gantt';
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',
        type: 'Multiple'
    };
    function created(args: object): void {
        const gantt: any = (document.getElementById('ganttDefault') as any).ej2_instances[0];
        if (gantt) {
            gantt.treeGrid.grid.selectionSettings.enableSimpleMultiRowSelection = false;
        }
    }
    return (
        <GanttComponent
            id="ganttDefault"
            height="450px"
            dataSource={data}
            taskFields={taskFields}
            selectionSettings={selectionSettings}
            created={created}>
        </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/33.1.44/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>

Get selected row information

To access selected row details in the React Gantt Chart component:

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

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const selectionSettings = {
        mode: 'Row',
        type: 'Multiple'
    };
    let ganttInstance;
    function getSelectedRowInfo() {
        const selectedRecords = ganttInstance.selectionModule.getSelectedRecords();
        const selectedIndexes = ganttInstance.selectionModule.getSelectedRowIndexes();
        const selectedRows = ganttInstance.selectionModule.getSelectedRows();
        selectedRows.forEach((row) => row.classList.add('custom-selected-row'));
        console.log(selectedRecords);
        console.log(selectedIndexes);
    }
    function created() {
        ganttInstance = document.getElementById('gantt').ej2_instances[0];
    }
    return (
        <div>
            <div className="button-container">
                <button className="action-button" onClick={getSelectedRowInfo}>Show Selected Tasks</button>
            </div>
            <GanttComponent
                id="gantt"
                height="430px"
                dataSource={data}
                taskFields={taskFields}
                selectionSettings={selectionSettings}
                created={created}>
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, TaskFieldsModel, SelectionSettingsModel } from '@syncfusion/ej2-react-gantt';
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',
        type: 'Multiple'
    };
    let ganttInstance: GanttComponent;
    function getSelectedRowInfo(): void {
        const selectedRecords = ganttInstance.selectionModule.getSelectedRecords();
        const selectedIndexes = ganttInstance.selectionModule.getSelectedRowIndexes();
        const selectedRows = ganttInstance.selectionModule.getSelectedRows();
        selectedRows.forEach((row: any) => row.classList.add('custom-selected-row'));
        console.log(selectedRecords);
        console.log(selectedIndexes);
    }
    function created(): void {
        ganttInstance = (document.getElementById('gantt') as any).ej2_instances[0];
    }
    return (
        <div>
            <div className="button-container">
                <button className="action-button" onClick={getSelectedRowInfo}>Show Selected Tasks</button>
            </div>
            <GanttComponent
                id="gantt"
                height="430px"
                dataSource={data}
                taskFields={taskFields}
                selectionSettings={selectionSettings}
                created={created}>
            </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/33.1.44/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>

Note: The Gantt Chart 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 React Gantt Chart 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 mauve background color.
In rowDeselecting, if Progress > 80, the background color changes to yellow.

The following sample demonstrates

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Selection, Inject, Edit } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };
    const selectionSettings = {
        mode: 'Row',
        type: 'Multiple'
    };
    let message = "";
    function updateMessage() {
        const el = document.getElementById("message");
        if (el) el.innerHTML = message;
    }
    function rowSelecting(args) {
        const task = args.data;
        if (task.TaskID === 2) {
            args.cancel = true;
            message += " - Selection cancelled for TaskID 2";
            updateMessage();
        }
    }
    function rowSelected(args) {
        const task = args.data;
        if (task.Progress && task.Progress > 40) {
            args.row.style.backgroundColor = "rgba(203, 246, 205, 1)";
        }
    }
    function rowDeselected(args) {
        if (args.data && !Array.isArray(args.data)) {
            const task = args.data;
            if (task.Progress && task.Progress <= 40) {
                args.row.style.backgroundColor = "#e1838eff";
            }
        }
    }
    function rowDeselecting(args) {
        if (args.data && !Array.isArray(args.data)) {
            const task = args.data;
            if (task.Progress && task.Progress > 80) {
                args.row.style.backgroundColor = "#f5f54bff";
            }
        }
    }
    return (
        <div>
            <p id="message"></p>
            <GanttComponent
                id="ganttDefault"
                height="370px"
                dataSource={data}
                taskFields={taskFields}
                rowSelecting={rowSelecting}
                rowSelected={rowSelected}
                rowDeselected={rowDeselected}
                rowDeselecting={rowDeselecting}
                selectionSettings={selectionSettings}
                enableHover={false}
            >
                <Inject services={[Edit, Selection]} />
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, RowSelectEventArgs, RowSelectingEventArgs, RowDeselectEventArgs, TaskFieldsModel, SelectionSettingsModel, Selection, Inject, Edit } from '@syncfusion/ej2-react-gantt';
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',
        type: 'Multiple'
    };
    let message = "";
    function updateMessage() {
        const el = document.getElementById("message");
        if (el) el.innerHTML = message;
    }
    function rowSelecting(args: RowSelectingEventArgs): void {
        const task: any = args.data;
        if (task.TaskID === 2) {
            args.cancel = true;
            message += " - Selection cancelled for TaskID 2";
            updateMessage();
        }
    }
    function rowSelected(args: RowSelectEventArgs): void {
        const task: any = args.data;
        if (task.Progress && task.Progress > 40) {
            (args.row as HTMLElement).style.backgroundColor = "rgba(203, 246, 205, 1)";
        }
    }
    function rowDeselected(args: RowDeselectEventArgs): void {
        if (args.data && !Array.isArray(args.data)) {
            const task: any = args.data;
            if (task.Progress && task.Progress <= 40) {
                (args.row as HTMLElement).style.backgroundColor = "#e1838eff";
            }
        }
    }
    function rowDeselecting(args: RowDeselectEventArgs): void {
        if (args.data && !Array.isArray(args.data)) {
            const task: any = args.data;
            if (task.Progress && task.Progress > 80) {
                (args.row as HTMLElement).style.backgroundColor = "#f5f54bff";
            }
        }
    }
    return (
        <div>
            <p id="message"></p>
            <GanttComponent
                id="ganttDefault"
                height="370px"
                dataSource={data}
                taskFields={taskFields}
                rowSelecting={rowSelecting}
                rowSelected={rowSelected}
                rowDeselected={rowDeselected}
                rowDeselecting={rowDeselecting}
                selectionSettings={selectionSettings}
                enableHover={false}
            >
                <Inject services={[Edit, 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/33.1.44/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>

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

How can I help you?

Row Selection in React Gantt Chart Component

Single row selection

Multiple row selection

Row selection event sequence

Select row at initial rendering

Select rows externally

Single row selection

Multiple rows selection

Range of rows selection

Enable multi row selection without Ctrl key

Get selected row information

Customize row selection action