Row Selection in EJ2 TypeScript Gantt Chart Control

27 May 202624 minutes to read

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

index.ts
index.html
import { Gantt, Selection } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';

Gantt.Inject(Selection);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '370px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    selectionSettings: {
        mode: 'Row',
        type: 'Single'
    },
    columns: [
        { field: 'TaskID', width: 90, textAlign: 'Right' },
        { field: 'TaskName', width: 250 },
        { field: 'StartDate', width: 150, format: 'yMd' },
        { field: 'Duration', width: 120, textAlign: 'Right' },
        { field: 'Progress', width: 120, textAlign: 'Right' }
    ]
});

gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
	<link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>        
    </div>
</body>

</html>

Multiple row selection

You can enable multiple row selection in the Gantt Chart control 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.ts
index.html
import { Gantt, Selection } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';

Gantt.Inject(Selection);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '370px',
    enableHover: true,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    selectionSettings: {
        mode: 'Row',
        type: 'Multiple'
    },
    columns: [
        { field: 'TaskID', width: 90, textAlign: 'Right' },
        { field: 'TaskName', width: 250 },
        { field: 'StartDate', width: 150, format: 'yMd' },
        { field: 'Duration', width: 120, textAlign: 'Right' },
        { field: 'Progress', width: 120, textAlign: 'Right' }
    ]
});

gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id="Gantt"></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 control 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.ts
index.html
import { Gantt, Selection } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';

Gantt.Inject(Selection);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '370px',
    selectedRowIndex: 5,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        parentID: 'ParentID'
    },
    selectionSettings: {
        mode: 'Row',
        type: 'Multiple'
    },
    columns: [
        { field: 'TaskID', width: 90, textAlign: 'Right' },
        { field: 'TaskName', width: 250 },
        { field: 'StartDate', width: 150, format: 'yMd' },
        { field: 'Duration', width: 120, textAlign: 'Right' },
        { field: 'Progress', width: 120, textAlign: 'Right' }
    ]
});

gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
	<link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>        
    </div>
</body>

</html>

Select rows externally

You can programmatically or dynamically select single rows, multiple rows, or a range of rows in the EJ2 TypeScript Gantt Chart control.

Single row selection

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

index.ts
index.html
import { Gantt, Selection } from '@syncfusion/ej2-gantt';
import { TextBox } from '@syncfusion/ej2-inputs';
import { Button } from '@syncfusion/ej2-buttons';
import { GanttData } from './datasource.ts';

Gantt.Inject(Selection);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '370px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    selectionSettings: {
        mode: 'Row',
        type: 'Single'
    },
    columns: [
        { field: 'TaskID', width: 90, textAlign: 'Right' },
        { field: 'TaskName', width: 200 },
        { field: 'StartDate', width: 120, format: 'yMd' },
        { field: 'Duration', width: 120, textAlign: 'Right' },
        { field: 'Progress', width: 120, textAlign: 'Right' }
    ]
});

gantt.appendTo('#Gantt');

let textBox: TextBox = new TextBox({ width: '100px' });
textBox.appendTo('#rowIndex');

let selectBtn: Button = new Button();
selectBtn.appendTo('#selectRow');

document.getElementById('selectRow')!.addEventListener('click', () => {
    let index: number = parseInt(textBox.value as string, 10);
    if (!isNaN(index)) {
        gantt.selectRow(index);
    }
});
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px">
            <label style="font-weight:bold">Enter the row index:</label>
            <input id="rowIndex" />
            <button id="selectRow">Select Row</button>
        </div>
        <div id='Gantt'></div>
    </div>
</body>

</html>

Multiple rows selection

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

index.ts
index.html
import { Gantt, Selection } from '@syncfusion/ej2-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { GanttData } from './datasource.ts';

Gantt.Inject(Selection);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '370px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    selectionSettings: {
        mode: 'Row',
        type: 'Multiple'
    }
});

gantt.appendTo('#Gantt');

function selectRows(indexes: number[]): void {
    gantt.clearSelection();
    gantt.selectRows(indexes);
}

let buttons: { id: string; rows: number[] }[] = [
    { id: 'btn1', rows: [1, 3] },
    { id: 'btn2', rows: [0, 2] },
    { id: 'btn3', rows: [2, 4] },
    { id: 'btn4', rows: [0, 5] },
    { id: 'btn5', rows: [1, 6] },
    { id: 'btn6', rows: [0, 7, 2] },
    { id: 'btn7', rows: [1, 6, 7] },
    { id: 'btn8', rows: [4, 6, 7] },
    { id: 'btn9', rows: [2, 5, 6] }
];

buttons.forEach((btn) => {
    new Button().appendTo('#' + btn.id);
    document.getElementById(btn.id)!.addEventListener('click', () => {
        selectRows(btn.rows);
    });
});
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div style="display:flex;flex-wrap:wrap;gap:10px;padding:10px 0 20px 0;">
            <button id="btn1">Select [1, 3]</button>
            <button id="btn2">Select [0, 2]</button>
            <button id="btn3">Select [2, 4]</button>
            <button id="btn4">Select [0, 5]</button>
            <button id="btn5">Select [1, 6]</button>
            <button id="btn6">Select [0, 7, 2]</button>
            <button id="btn7">Select [1, 6, 7]</button>
            <button id="btn8">Select [4, 6, 7]</button>
            <button id="btn9">Select [2, 5, 6]</button>
        </div>
        <div id='Gantt'></div>
    </div>
</body>

</html>

Range of rows selection

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

index.ts
index.html
import { Gantt, Selection } from '@syncfusion/ej2-gantt';
import { TextBox } from '@syncfusion/ej2-inputs';
import { Button } from '@syncfusion/ej2-buttons';
import { GanttData } from './datasource.ts';

Gantt.Inject(Selection);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '370px',
    enableHover: true,
    selectionSettings: {
        mode: 'Row',
        type: 'Multiple'
    },
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    columns: [
        { field: 'TaskID', width: 90, textAlign: 'Right' },
        { field: 'TaskName', width: 220 },
        { field: 'StartDate', width: 150, format: 'yMd' },
        { field: 'Duration', width: 120, textAlign: 'Right' },
        { field: 'Progress', width: 120, textAlign: 'Right' }
    ]
});

gantt.appendTo('#Gantt');

let startInput: TextBox = new TextBox({ type: 'number', width: '120px' });
startInput.appendTo('#startRow');

let endInput: TextBox = new TextBox({ type: 'number', width: '120px' });
endInput.appendTo('#endRow');

let selectBtn: Button = new Button({ content: 'Select Rows' });
selectBtn.appendTo('#selectRows');

document.getElementById('selectRows')!.addEventListener('click', () => {
    let start: number = parseInt(startInput.value as string, 10);
    let end: number = parseInt(endInput.value as string, 10);

    if (!isNaN(start) && !isNaN(end) && start >= 0 && end >= start) {
        gantt.clearSelection();
        gantt.selectionModule.selectRowsByRange(start, end);
    }
});
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div style="display:flex; align-items:center; gap:10px; padding:20px 0">
            <label style="font-weight:bold">Start Row Index:</label>
            <input id="startRow" />

            <label style="font-weight:bold">End Row Index:</label>
            <input id="endRow" />

            <button id="selectRows"></button>
        </div>
        <div id="Gantt"></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.ts
index.html
import { Gantt, Selection } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';

Gantt.Inject(Selection);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    selectionSettings: {
        mode: 'Row',
        type: 'Multiple'
    },
    created: () => {
        let ganttObj = document.getElementById('Gantt')!.ej2_instances[0] as Gantt;
        ganttObj.treeGrid.grid.selectionSettings.enableSimpleMultiRowSelection = false;
    }
});

gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id="Gantt"></div>
    </div>
</body>

</html>

Get selected row information

To access selected row details in the EJ2 TypeScript Gantt Chart control:

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

index.ts
index.html
import { Gantt, Selection } from '@syncfusion/ej2-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { GanttData } from './datasource.ts';

Gantt.Inject(Selection);

let gantt: Gantt;
let ganttInstance: Gantt;

gantt = new Gantt({
    dataSource: GanttData,
    height: '430px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    selectionSettings: {
        mode: 'Row',
        type: 'Multiple'
    },
    created: () => {
        ganttInstance = document.getElementById('Gantt')!.ej2_instances[0] as Gantt;
    }
});

gantt.appendTo('#Gantt');

/* Button */
let showBtn: Button = new Button({
    content: 'Show Selected Tasks',
    cssClass: 'action-button'
});
showBtn.appendTo('#showSelected');

/* Button click */
document.getElementById('showSelected')!.addEventListener('click', () => {

    let tableContainer: HTMLElement = document.getElementById('tableContainer')!;
    tableContainer.innerHTML = '';

    let selectedRecords: any[] =
        ganttInstance.selectionModule.getSelectedRecords() as any[];

    if (!selectedRecords || selectedRecords.length === 0) {
        return;
    }

    let table: HTMLTableElement = document.createElement('table');
    table.className = 'task-table';

    table.innerHTML = `
        <thead>
            <tr>
                <th>Index</th>
                <th>Task Details</th>
            </tr>
        </thead>
        <tbody></tbody>
    `;

    let tbody: HTMLTableSectionElement =
        table.querySelector('tbody') as HTMLTableSectionElement;

    selectedRecords.forEach((task, index) => {
        let row: HTMLTableRowElement = document.createElement('tr');
        row.className = index % 2 !== 0
            ? 'selected-row alternate-row'
            : 'selected-row';

        row.innerHTML = `
            <td>${index + 1}</td>
            <td>
                <div><strong>Task ID:</strong> ${task.TaskID}</div>
                <div><strong>Task Name:</strong> ${task.TaskName}</div>
                <div><strong>Start Date:</strong> ${task.StartDate}</div>
                <div><strong>Duration:</strong> ${task.Duration || '-'}</div>
                <div><strong>Progress:</strong> ${task.Progress || 0}%</div>
            </td>
        `;
        tbody.appendChild(row);
    });

    table.appendChild(tbody);
    tableContainer.appendChild(table);
});
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
        <style>
        .button-container {
            padding: 20px 0;
        }

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

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

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

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

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

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

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

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

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

        .alternate-row {
            background: #f9fafb;
        }

        .task-table td div {
            margin-bottom: 6px;
            color: #1f2937;
        }

        .e-gantt .e-grid .custom-selected-row .e-selectionbackground {
            background-color: #d1e7dd !important;
        }
    </style>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id="showSelected"></div>
        <div id="tableContainer" class="table-container"></div>
        <div id="Gantt"></div>
    </div>
</body>

</html>

Note: The Gantt Chart control 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 EJ2 TypeScript Gantt Chart control:

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.ts
index.html
import { Gantt, Selection, Edit } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';

Gantt.Inject(Edit, Selection);

let message: string = '';

function updateMessage(): void {
    let el: HTMLElement | null = document.getElementById('message');
    if (el) {
        el.innerHTML = message;
    }
}

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '370px',
    enableHover: false,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    selectionSettings: {
        mode: 'Row',
        type: 'Multiple'
    },
    rowSelecting: (args: { data: any; cancel: boolean; }) => {
        let task: any = args.data;
        if (task.TaskID === 2) {
            args.cancel = true;
            message = 'Selection cancelled for TaskID 2';
            updateMessage();
        }
    },
    rowSelected: (args: { data: any; row: HTMLElement; }) => {
        let task: any = args.data;
        if (task.Progress && task.Progress > 40) {
            (args.row as HTMLElement).style.backgroundColor =
                'rgba(203, 246, 205, 1)';
        }
    },
    rowDeselected: (args: { data: any; row: HTMLElement; }) => {
        if (args.data && !Array.isArray(args.data)) {
            let task: any = args.data;
            if (task.Progress && task.Progress <= 40) {
                (args.row as HTMLElement).style.backgroundColor = '#e1838eff';
            }
        }
    },
    rowDeselecting: (args: { data: any; row: HTMLElement; }) => {
        if (args.data && !Array.isArray(args.data)) {
            let task: any = args.data;
            if (task.Progress && task.Progress > 80) {
                (args.row as HTMLElement).style.backgroundColor = '#f5f54bff';
            }
        }
    }
});

gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
	<link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <p id="message" style="color: red; text-align: center;"></p>
        <div id='Gantt'></div>        
    </div>
</body>

</html>

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Row Selection in EJ2 TypeScript Gantt Chart Control

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