HelpBot Assistant

How can I help you?

Cell Selection in React Gantt Chart Component

19 Feb 202624 minutes to read

Cell selection in the Gantt Chart component enables interactive selection of specific cells or ranges of cells within the grid. You may select cells using mouse clicks or arrow keys (up, down, left, right). This is useful for highlighting, manipulating, or performing operations on particular Gantt cells.

Single cell selection

Single cell selection in the Gantt Chart is enabled by setting selectionSettings.mode to Cell and selectionSettings.type to Single. This allows selecting only one cell at a time.

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() {

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

  const selectionSettings = {
    mode: "Cell",
    type: "Single"
  };

  return (
    <GanttComponent
      height="370px"
      dataSource={data}
      taskFields={taskSettings}
      selectionSettings={selectionSettings}
    >
      <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
} from "@syncfusion/ej2-react-gantt";

import { data } from "./datasource";

function App() {

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

  const selectionSettings: object = {
    mode: "Cell",
    type: "Single"
  };

  return (
    <GanttComponent
      height="370px"
      dataSource={data}
      taskFields={taskSettings}
      selectionSettings={selectionSettings}
    >
      <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/32.2.3/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Multiple cell selection

Multiple cell selection in the Gantt Chart is enabled by setting selectionSettings.mode to Cell and selectionSettings.type to Multiple. This allows selecting multiple cells at a time by holding the Ctrl key while clicking on each desired cell.

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() {

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

  const selectionSettings = {
    mode: "Cell",
    type: "Multiple"
  };

  return (
    <GanttComponent
      height="370px"
      dataSource={data}
      taskFields={taskSettings}
      selectionSettings={selectionSettings}
    >
      <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,
  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: "Cell",
    type: "Multiple"
  };

  return (
    <GanttComponent
      height="370px"
      dataSource={data}
      taskFields={taskSettings}
      selectionSettings={selectionSettings}
    >
      <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/32.2.3/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Cell selection mode

Cell selection mode controls how cells or ranges are selected. Set the desired mode using selectionSettings.cellSelectionMode:

  • Flow (default): Selects a continuous flow of cells between the start and end indices across rows.
  • Box: Selects a rectangular range covering specified rows and columns.
  • BoxWithBorder: Similar to Box mode, but applies a border for better visual distinction of the selected range.

For cell selection modes, selectionSettings.mode must be Cell or Both, and type must be Multiple.

The following example demonstrates how to change both the selection mode and the cell selection mode using a DropDownList component.

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 { 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: "Cell",
        type: "Multiple",
        cellSelectionMode: "Flow"
    };

    const modeOptions = [
        { text: "Cell", value: "Cell" },
        { text: "Row", value: "Row" },
        { text: "Both", value: "Both" }
    ];

    const cellModeOptions = [
        { text: "Flow", value: "Flow" },
        { text: "Box", value: "Box" },
        { text: "BoxWithBorder", value: "BoxWithBorder" }
    ];

    function selectionModeChange(args) {
        if (ganttInstance) {
            ganttInstance.treeGrid.grid.selectionSettings.mode = args.value;
            ganttInstance.treeGrid.grid.refresh();
        }
    }

    function cellSelectionModeChange(args) {
        if (ganttInstance) {
            ganttInstance.treeGrid.grid.selectionSettings.cellSelectionMode = args.value;
        }
    }

    return (
        <div>
            <div style=>
                <div>
                    <label style=>Select Mode:</label>
                    <DropDownListComponent
                        width="150"
                        dataSource={modeOptions}
                        index={0}
                        change={selectionModeChange}
                    />
                </div>

                <div>
                    <label style=>Cell Selection Style:</label>
                    <DropDownListComponent
                        width="150"
                        dataSource={cellModeOptions}
                        index={0}
                        change={cellSelectionModeChange}
                    />
                </div>
            </div>

            <GanttComponent
                ref={(g) => (ganttInstance = g)}
                height="370px"
                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, Inject, Selection, TaskFieldsModel, SelectionSettingsModel } from "@syncfusion/ej2-react-gantt";
import { DropDownListComponent, 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: "Cell",
        type: "Multiple",
        cellSelectionMode: "Flow"
    };

    const modeOptions = [
        { text: "Cell", value: "Cell" },
        { text: "Row", value: "Row" },
        { text: "Both", value: "Both" }
    ];

    const cellModeOptions = [
        { text: "Flow", value: "Flow" },
        { text: "Box", value: "Box" },
        { text: "BoxWithBorder", value: "BoxWithBorder" }
    ];

    function selectionModeChange(args: ChangeEventArgs): void {
        if (ganttInstance) {
            ganttInstance.treeGrid.grid.selectionSettings.mode = args.value as any;
            ganttInstance.treeGrid.grid.refresh();
        }
    }

    function cellSelectionModeChange(args: ChangeEventArgs): void {
        if (ganttInstance) {
            ganttInstance.treeGrid.grid.selectionSettings.cellSelectionMode =
                args.value as any;
        }
    }

    return (
        <div>
            <div style=>
                <div>
                    <label style=>Select Mode:</label>
                    <DropDownListComponent
                        width="150"
                        dataSource={modeOptions}
                        index={0}
                        change={selectionModeChange}
                    />
                </div>

                <div>
                    <label style=>Cell Selection Style:</label>
                    <DropDownListComponent
                        width="150"
                        dataSource={cellModeOptions}
                        index={0}
                        change={cellSelectionModeChange}
                    />
                </div>
            </div>

            <GanttComponent
                ref={(g) => (ganttInstance = g)}
                height="370px"
                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/32.2.3/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Select cells externally

You may programmatically select a single row, multiple cells, or a range of cells in the Gantt Chart using built-in methods.

Single cell selection

Select a specific cell in the Gantt Chart by calling the selectCell method and providing the desired row and column indexes as arguments.

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    GanttComponent,
    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 ganttInstance = null;
    let rowTextBox = null;
    let cellTextBox = null;

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

    const selectionSettings = {
        mode: "Cell",
        type: "Single"
    };

    function selectCell() {
        const rowIndex = parseInt(rowTextBox.element.value, 10);
        const cellIndex = parseInt(cellTextBox.element.value, 10);

        if (!isNaN(rowIndex) && !isNaN(cellIndex) && ganttInstance) {
            ganttInstance.selectCell({ rowIndex, cellIndex });
        }
    }

    return (
        <div>
            <div style=>
                <label style=>Enter the row index:</label>
                <TextBoxComponent width="100" ref={(t) => (rowTextBox = t)} />

                <label style=>Enter the cell index:</label>
                <TextBoxComponent width="100" ref={(t) => (cellTextBox = t)} />

                <ButtonComponent onClick={selectCell}>Select Cell</ButtonComponent>
            </div>

            <GanttComponent
                height="370px"
                dataSource={data}
                taskFields={taskSettings}
                selectionSettings={selectionSettings}
                ref={(g) => (ganttInstance = g)}
            >
                <Inject services={[Selection]} />
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    GanttComponent,
    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 ganttInstance: GanttComponent | null = null;
    let rowTextBox: TextBoxComponent | null = null;
    let cellTextBox: TextBoxComponent | null = null;

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

    const selectionSettings = {
        mode: "Cell",
        type: "Single"
    };

    function selectCell(): void {
        const rowIndex = parseInt((rowTextBox as any).element.value, 10);
        const cellIndex = parseInt((cellTextBox as any).element.value, 10);

        if (!isNaN(rowIndex) && !isNaN(cellIndex) && ganttInstance) {
            ganttInstance.selectCell({ rowIndex, cellIndex });
        }
    }

    return (
        <div>
            <div style=>
                <label style=>Enter the row index:</label>
                <TextBoxComponent width="100" ref={(t) => (rowTextBox = t)} />

                <label style=>Enter the cell index:</label>
                <TextBoxComponent width="100" ref={(t) => (cellTextBox = t)} />

                <ButtonComponent onClick={selectCell}>Select Cell</ButtonComponent>
            </div>

            <GanttComponent
                height="370px"
                dataSource={data}
                taskFields={taskSettings}
                selectionSettings={selectionSettings}
                ref={(g) => (ganttInstance = g)}
            >
                <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/32.2.3/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Multiple cell selection

Select multiple cells in the Gantt Chart by calling the selectCells method and providing an array of the row and column indexes for each target cell.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, Inject, Selection } from "@syncfusion/ej2-react-gantt";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import { data } from "./datasource";

function App() {

    let ganttInstance = null;

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

    const selectionSettings = {
        mode: "Cell",
        type: "Multiple"
    };

    function selectCells(indexes) {
        if (!ganttInstance) return;

        const rowIndex = indexes[0];
        const cellIndex = indexes[1];

        ganttInstance.clearSelection();

        const cell = {
            rowIndex: rowIndex,
            cellIndexes: [cellIndex]
        };

        ganttInstance.selectCells([cell]);
    }

    return (
        <div>
            <div style=>
                <ButtonComponent onClick={() => selectCells([0, 0])}>Select [0, 0]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([1, 1])}>Select [1, 1]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([2, 2])}>Select [2, 2]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([3, 3])}>Select [3, 3]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([4, 4])}>Select [4, 4]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([5, 0])}>Select [5, 0]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([6, 1])}>Select [6, 1]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([7, 2])}>Select [7, 2]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([3, 4])}>Select [3, 4]</ButtonComponent>
            </div>

            <GanttComponent
                ref={(g) => (ganttInstance = g)}
                height="370px"
                dataSource={data}
                taskFields={taskSettings}
                selectionSettings={selectionSettings}
                enableHover={true}
            >
                <Inject services={[Selection]} />
            </GanttComponent>
        </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 { 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",
        duration: "Duration",
        progress: "Progress",
        parentID: "ParentID"
    };

    const selectionSettings: SelectionSettingsModel = {
        mode: "Cell",
        type: "Multiple"
    };

    function selectCells(indexes: number[]): void {
        if (!ganttInstance) return;

        const rowIndex = indexes[0];
        const cellIndex = indexes[1];

        ganttInstance.clearSelection();

        const cell = {
            rowIndex: rowIndex,
            cellIndexes: [cellIndex]
        };

        ganttInstance.selectCells([cell]);
    }

    return (
        <div>
            <div style=>
                <ButtonComponent onClick={() => selectCells([0, 0])}>Select [0, 0]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([1, 1])}>Select [1, 1]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([2, 2])}>Select [2, 2]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([3, 3])}>Select [3, 3]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([4, 4])}>Select [4, 4]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([5, 0])}>Select [5, 0]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([6, 1])}>Select [6, 1]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([7, 2])}>Select [7, 2]</ButtonComponent>
                <ButtonComponent onClick={() => selectCells([3, 4])}>Select [3, 4]</ButtonComponent>
            </div>

            <GanttComponent
                ref={(g) => (ganttInstance = g)}
                height="370px"
                dataSource={data}
                taskFields={taskSettings}
                selectionSettings={selectionSettings}
                enableHover={true}
            >
                <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/32.2.3/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Get selected cell information

To retrieve information about selected cells in the Gantt Chart, use methods like getSelectedRowCellIndexes method to get the list of row and column indexes for selected cells, and the getCellSelectedRecords method to retrieve the related data objects for each selected cell.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, Inject, Selection } from "@syncfusion/ej2-react-gantt";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import { DialogComponent } from "@syncfusion/ej2-react-popups";
import { data } from "./datasource";
function App() {

    let ganttObj = null;
    let dialogObj = null;

    function showDetails() {
        if (!ganttObj || !dialogObj) return;

        const selectedRecords = ganttObj.selectionModule.getCellSelectedRecords();
        const selectedIndexes = ganttObj.selectionModule.getSelectedRowCellIndexes();

        const container = document.getElementById("details-container");
        if (!container) return;

        let html = `
            <table border="1" cellpadding="6" cellspacing="0" style="width:100%; border-collapse: collapse;">
                <thead>
                <tr>
                    <th>Row Index</th>
                    <th>Cell Index</th>
                    <th>Row Details</th>
                </tr>
                </thead>
                <tbody>
        `;

        selectedIndexes.forEach((index, i) => {
            const r = selectedRecords[i] || {};

            html += `
            <tr>
            <td>${index.rowIndex}</td>
            <td>${index.cellIndexes.join(", ")}</td>
            <td>
                <table style="width:100%; border-collapse:collapse;">
                <tr><td><b>Task ID:</b></td><td>${r.TaskID}</td></tr>
                <tr><td><b>Task Name:</b></td><td>${r.TaskName}</td></tr>
                <tr><td><b>Start Date:</b></td><td>${r.StartDate ? new Date(r.StartDate).toDateString() : ""}</td></tr>
                <tr><td><b>Duration:</b></td><td>${r.Duration}</td></tr>
                <tr><td><b>Progress:</b></td><td>${r.Progress}%</td></tr>
                </table>
            </td>
            </tr>
        `;
        });

        html += `</tbody></table>`;

        container.innerHTML = html;
        dialogObj.show();
    }

    function closeDialog() {
        dialogObj && dialogObj.hide();
    }

    return (
        <div style=>

            <ButtonComponent onClick={showDetails}>Show Selected Cell Details</ButtonComponent>

            <GanttComponent
                ref={(g) => (ganttObj = g)}
                height="370px"
                dataSource={data}
                selectionSettings=
                taskFields=
            >
                <Inject services={[Selection]} />
            </GanttComponent>

            <DialogComponent
                ref={(d) => (dialogObj = d)}
                header="Selected Cell Details"
                visible={false}
                close={closeDialog}
                width="600px"
                height="300px"
                showCloseIcon={true}
                position=
            >
                <div id="details-container" style=
                ></div>
            </DialogComponent>

        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, Inject, Selection } from "@syncfusion/ej2-react-gantt";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import { DialogComponent } from "@syncfusion/ej2-react-popups";
import { data } from "./datasource";
function App() {

    let ganttObj: GanttComponent | null = null;
    let dialogObj: DialogComponent | null = null;

    function showDetails(): void {
        if (!ganttObj || !dialogObj) return;

        const selectedRecords = ganttObj.selectionModule.getCellSelectedRecords();
        const selectedIndexes = ganttObj.selectionModule.getSelectedRowCellIndexes();

        const container = document.getElementById("details-container");
        if (!container) return;

        let html = `
            <table border="1" cellpadding="6" cellspacing="0" style="width:100%; border-collapse: collapse;">
                <thead>
                <tr>
                    <th>Row Index</th>
                    <th>Cell Index</th>
                    <th>Row Details</th>
                </tr>
                </thead>
                <tbody>
        `;

        selectedIndexes.forEach((index: any, i: any) => {
            const r: any = selectedRecords[i] || {};

            html += `
            <tr>
            <td>${index.rowIndex}</td>
            <td>${index.cellIndexes.join(", ")}</td>
            <td>
                <table style="width:100%; border-collapse:collapse;">
                <tr><td><b>Task ID:</b></td><td>${r.TaskID}</td></tr>
                <tr><td><b>Task Name:</b></td><td>${r.TaskName}</td></tr>
                <tr><td><b>Start Date:</b></td><td>${r.StartDate ? new Date(r.StartDate).toDateString() : ""}</td></tr>
                <tr><td><b>Duration:</b></td><td>${r.Duration}</td></tr>
                <tr><td><b>Progress:</b></td><td>${r.Progress}%</td></tr>
                </table>
            </td>
            </tr>
        `;
        });

        html += `</tbody></table>`;

        container.innerHTML = html;
        dialogObj.show();
    }

    function closeDialog(): void {
        dialogObj && dialogObj.hide();
    }

    return (
        <div style=>

            <ButtonComponent onClick={showDetails}>Show Selected Cell Details</ButtonComponent>

            <GanttComponent
                ref={(g) => (ganttObj = g)}
                height="370px"
                dataSource={data}
                selectionSettings=
                taskFields=
            >
                <Inject services={[Selection]} />
            </GanttComponent>

            <DialogComponent
                ref={(d) => (dialogObj = d)}
                header="Selected Cell Details"
                visible={false}
                close={closeDialog}
                width="600px"
                height="300px"
                showCloseIcon={true}
                position=
            >
                <div id="details-container" style=
                ></div>
            </DialogComponent>

        </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/32.2.3/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Customize cell selection action

You may customize cell selection behavior in the Gantt Chart using cellSelecting, cellSelected, cellDeselecting, and cellDeselected events. These events provide dynamic control over selection, allowing conditional logic and visual updates based on specific criteria.

The following sample demonstrates customizing cell selection in the Gantt Chart using Syncfusion events. In the cellSelected event, the background color is set to rgb(96, 158, 101), while selection is canceled in the cellSelecting event when the TaskName is Perform Soil test. During cellDeselecting, the text color is changed to rgb(253, 253, 253), and in the cellDeselected event, the background color is updated to rgb(245, 69, 69).

import * as React from "react";
import * as ReactDOM from "react-dom";

import {
    GanttComponent,
    Selection,
    Inject
} 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: "Cell",
        type: "Single"
    };

    function updateMessage(text) {
        const msgEl = document.getElementById("message");
        if (msgEl) {
            msgEl.innerText = text;
            msgEl.style.display = "block";
        }
    }

    function cellSelected(args) {
        updateMessage("Trigger cellSelected");
        (args.currentCell).style.backgroundColor = "rgb(96, 158, 101)";
    }

    function cellSelecting(args) {
        updateMessage("Trigger cellSelecting");

        const task = args.data;
        if (task.TaskName === "Perform Soil test") {
            args.cancel = true;
            updateMessage('Trigger cellSelecting - Selection canceled for "Perform Soil test"');
        }
    }

    function cellDeselected(args) {
        updateMessage("Trigger cellDeselected");

        if (args.cells && args.cells.length > 0) {
            const cell = args.cells[0];
            cell.style.backgroundColor = "rgb(245, 69, 69)";
        }
    }

    function cellDeselecting(args) {
        updateMessage("Trigger cellDeselecting");

        if (args.cells && args.cells.length > 0) {
            const cell = args.cells[0];
            cell.style.color = "rgb(253, 253, 253)";
        }
    }

    return (
        <div>
            <p id="message" style=></p>

            <GanttComponent
                ref={(g) => (ganttInstance = g)}
                height="370px"
                dataSource={data}
                taskFields={taskSettings}
                selectionSettings={selectionSettings}
                enableHover={false}
                cellSelected={cellSelected}
                cellSelecting={cellSelecting}
                cellDeselected={cellDeselected}
                cellDeselecting={cellDeselecting}
            >
                <Inject services={[Selection]} />
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));
import * as React from "react";
import * as ReactDOM from "react-dom";

import {
    GanttComponent,
    Selection,
    Inject
} from "@syncfusion/ej2-react-gantt";

import { CellSelectingEventArgs, CellSelectEventArgs, CellDeselectEventArgs } from "@syncfusion/ej2-react-grids";

import { data } from "./datasource";

function App() {

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

    const selectionSettings: object = {
        mode: "Cell",
        type: "Single"
    };

    function updateMessage(text: string): void {
        const msgEl = document.getElementById("message");
        if (msgEl) {
            msgEl.innerText = text;
            msgEl.style.display = "block";
        }
    }

    function cellSelected(args: CellSelectEventArgs): void {
        updateMessage("Trigger cellSelected");
        (args.currentCell as HTMLElement).style.backgroundColor = "rgb(96, 158, 101)";
    }

    function cellSelecting(args: CellSelectingEventArgs): void {
        updateMessage("Trigger cellSelecting");

        const task: any = args.data;
        if (task.TaskName === "Perform Soil test") {
            args.cancel = true;
            updateMessage('Trigger cellSelecting - Selection canceled for "Perform Soil test"');
        }
    }

    function cellDeselected(args: CellDeselectEventArgs): void {
        updateMessage("Trigger cellDeselected");

        if (args.cells && args.cells.length > 0) {
            const cell = args.cells[0] as HTMLElement;
            cell.style.backgroundColor = "rgb(245, 69, 69)";
        }
    }

    function cellDeselecting(args: CellDeselectEventArgs): void {
        updateMessage("Trigger cellDeselecting");

        if (args.cells && args.cells.length > 0) {
            const cell = args.cells[0] as HTMLElement;
            cell.style.color = "rgb(253, 253, 253)";
        }
    }

    return (
        <div>
            <p id="message" style=></p>

            <GanttComponent
                ref={(g) => (ganttInstance = g)}
                height="370px"
                dataSource={data}
                taskFields={taskSettings}
                selectionSettings={selectionSettings}
                enableHover={false}
                cellSelected={cellSelected}
                cellSelecting={cellSelecting}
                cellDeselected={cellDeselected}
                cellDeselecting={cellDeselecting}
            >
                <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/32.2.3/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Limitations for cell selection

  • Cell-based selection is not supported when virtualization is enabled.