Rows in EJ2 JavaScript Gantt Chart Control

2 Feb 202624 minutes to read

Each row typically represents a single record or item from a data source. Rows in a Gantt Chart are used to present data in both tabular and timeline chart formats. Each row displays a set of values representing the fields of an individual data record. Rows allow you to interact with the data in the Gantt Chart. You can select rows, edit cell values, perform taskbar editing in the chart side of the Gantt Chart, perform sorting or filtering operations, and trigger events based on actions.

Customize row styles

Customizing row styles in the Syncfusion® EJ2 JavaScript Gantt Chart allows you to modify the appearance of rows to meet design requirements, such as highlighting specific rows or adjusting font styles, background colors, and other visual properties. This can be achieved using CSS, built-in properties, methods, or event support provided by the control, offering flexibility for both static and dynamic styling.

Using event

You can customize the row appearance in the EJ2 JavaScript Gantt Chart control by using the rowDataBound event. This event allows you to apply styles or perform other row-level modifications based on the data or specific logic requirements.

The following example demonstrates how to customize row styles based on the value of the Progress column.

var ganttChart = new ej.gantt.Gantt({
  dataSource: GanttData,
  height: '380px',
  taskFields: {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  },
  splitterSettings: {
    position: '75%'
  },
  rowDataBound: onRowDataBound,
});
ganttChart.appendTo('#Gantt');

function onRowDataBound(args) {
  const progress = (args.data).Progress;
  if (progress < 30) {
    args.row.classList.add('below-30');
  } else if (progress >= 30 && progress < 80) {
    args.row.classList.add('below-80');
  } else {
    args.row.classList.add('above-80');
  }
}
<!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/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="container">
            <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

  • The queryCellInfo event can also be used to customize grid cells and is triggered for every cell in the grid part of the gantt chart. It can be useful when you need to customize cells based on certain conditions or criteria.

Using CSS

The Syncfusion® EJ2 JavaScript Gantt Chart allows row-level customization through CSS. Each row is assigned specific class names, enabling precise styling to improve readability and visual presentation.

Customize selected row:

To highlight the currently selected row, you can override the default styles applied by the Gantt chart. The following CSS classes are used by default:

.e-gantt .e-selectionbackground, .e-gantt .e-gantt-chart .e-active, .e-gantt .e-active > .e-chart-row-border {
  background-color: #f9920b !important;
  border: 1px solid red !important;
}

Alternate row customization:

To create a visual separation between consecutive rows, you can style alternate rows using the .e-altrow class.

.e-gantt .e-altrow {
  background-color: #fafafa;
}
ej.gantt.Gantt.Inject(ej.gantt.Selection);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '380px',
    allowSelection: true,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    treeColumnIndex: 1,
    splitterSettings: {
      position: '75%'
    },
});
ganttChart.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/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="container">
            <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Using method

The Syncfusion® EJ2 JavaScript Gantt Chart control provides methods to customize the appearance of rows in both the grid and chart sections. These methods are accessible through the treeGrid object and the Gantt instance.

To customize rows in the grid section, you can use the following methods:

  • getRowByIndex: Returns the HTML element of a row at a specific index.
  • getRows: Returns all row elements in the grid.
  • getRowInfo: Provides the data and index for a row element.
  • getSelectedRowIndexes: Returns indexes of selected rows.
  • getSelectedRows: Returns HTML elements of selected rows.

To customize rows in the chart section, the following methods are available:

  • getRowByIndex: Returns the HTML element of a chart row at a specific index.
  • getChartRows: Returns all chart row elements.

The following example demonstrates how to use the getRowByIndex method of the treegrid object in the Gantt instance and the getRowByIndex method of the Gantt chart component to customize the appearance of a row within the rowDataBound event of the Gantt chart.

var ganttChart = new ej.gantt.Gantt({
   dataSource: GanttData,
    height: '380px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    splitterSettings: {
        position: '75%'
    },
    dataBound: dataBound,
});
ganttChart.appendTo('#Gantt');

function dataBound() {
  ganttChart.treeGrid.getRowByIndex(2).style.background = 'rgb(193, 228, 234)';
}
<!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/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="container">
            <div id="Gantt"></div>        
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Styling parent and child rows

You can customize the styling of parent and child rows in the Syncfusion® EJ2 JavaScript Gantt Chart by handling the rowDataBound event, which is triggered as each row is rendered. Within this event, the hasChildRecords property can be used to identify parent rows, allowing you to apply distinct styles that visually separate them from child rows.

var ganttChart = new ej.gantt.Gantt({
  dataSource: GanttData,
  height: '380px',
  taskFields: {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  },
  splitterSettings: {
    position: '75%'
  },
  rowDataBound: rowDataBound,
});
ganttChart.appendTo('#Gantt');

function rowDataBound(args) {
   const rowElement = args.row;
   const rowData = args.data;
   if (rowData.hasChildRecords) {
    rowElement.classList.add('parent-row');
   } else {
    rowElement.classList.add('child-row');
   }
}
<!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/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="container">
            <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Auto focus taskbar on row click

You can enable automatic scrolling to the corresponding taskbar in the timeline when a row is clicked in the Syncfusion® EJ2 JavaScript Gantt Chart by using the autofocustasks property. This feature ensures that the selected task is brought into view within the timeline area, improving navigation and focus during interaction.

var ganttChart = new ej.gantt.Gantt({
  dataSource: GanttData,
  height: '380px',
  taskFields: {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  },
  splitterSettings: {
    position: '75%'
  },
  allowSelection: true,
  autoFocusTasks: true,
  treeColumnIndex:1
});
ganttChart.appendTo('#Gantt');

var checkbox = new ej.buttons.CheckBox({ 
  label: 'Enable / Disable Auto-focus Tasks', 
  checked: true,
  change:onCheckBoxChange 
});
checkbox.appendTo('#checkbox');

function onCheckBoxChange(args) {
  ganttChart.autoFocusTasks = args.checked;
}
<!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/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="container">
            <input type="checkbox" id="checkbox" />
            <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Row height

You can customize row height in the Syncfusion® Gantt Chart by setting the rowHeight property. This helps display additional content within a row or reduce its height to align with the content size.

var ganttChart = new ej.gantt.Gantt({ 
    dataSource: GanttData,
    height: '380px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    treeColumnIndex:1,
    splitterSettings: {
        position: '75%'
    },
    rowHeight: 42
});
ganttChart.appendTo('#Gantt');

var small = new ej.buttons.Button();
small.appendTo('#small');

document.getElementById('small').addEventListener('click', () => {
    ganttChart.rowHeight = 20;
});

var medium = new ej.buttons.Button();
medium.appendTo('#medium');

document.getElementById('medium').addEventListener('click', () => {
    ganttChart.rowHeight = 42;
});

var big = new ej.buttons.Button();
big.appendTo('#big');

document.getElementById('big').addEventListener('click', () => {
    ganttChart.rowHeight = 60;
});
<!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/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="container">
            <button id="small">Change height to 20px</button>
            <button id="medium">Default height 42px</button>
            <button id="big">Change height to 60px</button>
            <div id="Gantt"></div>        
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

  • The rowHeight property can only be used to set the height of the entire gantt row. It cannot be used to set the height of individual cells within a row.
  • The rowHeight property applies the height to all rows in the gantt chart, including the header rows.

Customize row height for particular row

You can customize the height of a specific row in the Syncfusion® Gantt Chart using the rowDataBound event. Within this event, conditionally apply a height value to the rowHeight property for rows based on their data.

In the example below, the row height is set to 90px for the row where TaskID is 2.

var ganttChart = new ej.gantt.Gantt({ 
    dataSource: GanttData,
    height: '430px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    columns: [
        { field: 'TaskID', headerText: 'ID', textAlign: "Right", width: 90 },
        { field: 'TaskName', headerText: 'Task Name', textAlign: "Left", width: 180 },
        { field: 'Progress', headerText: 'Progress', textAlign: "Right", width: 120 },
        { field: 'StartDate', headerText: 'Start Date', textAlign: "Right", width: 120 },
        { field: 'Duration', headerText: 'Duration', textAlign: "Right", width: 90 },
    ],
    treeColumnIndex:1,
    splitterSettings: {
        position: '75%'
    },
    rowHeight: 42,
    rowDataBound:rowDataBound
});
ganttChart.appendTo('#Gantt');

function rowDataBound(args) {
    const task = args.data;
    if (task.TaskID === 2) {
      args.rowHeight = 90;
    }
}
<!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/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="container">
            <div id="Gantt"></div>        
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

  • In virtual scrolling mode, it is not applicable to set different row heights.
  • You can customize the row height of multiple rows by checking the relevant criteria in the dataBound event and setting the rowHeight property accordingly.

Row hover with custom action or items

You can execute custom actions or display items on row hover in the Gantt chart by using the dataBound event.

The following demonstrates how to implement a custom action using the dataBound event. In this event, when hovering over a row, a tooltip containing a button is displayed. Clicking the button reveals a custom message.

var ganttChart = new ej.gantt.Gantt({ 
    dataSource: GanttData,
    height: '430px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    columns: [
        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
        { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 290 },
        { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120 },
        { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 120 },
        { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90 }
    ],
    treeColumnIndex: 1,
    splitterSettings: {
        position: '50%'
    },
    dataBound: () => {
        const ganttElement = document.getElementById('Gantt');
        ganttElement.addEventListener('mouseover', (mouseargs) => {
            let target = null;
            if (
                mouseargs.target &&
                (mouseargs.target.classList.contains('e-rowcell') ||
                mouseargs.target.classList.contains('e-chart-row-cell'))
            ) {
                target = mouseargs.target;
            }
            if (target) {
                const buttonElement = document.createElement('button');
                buttonElement.textContent = 'Row details';
                const tooltip = new ej.popups.Tooltip({
                    content: buttonElement,
                    width: '100px',
                    height: '40px',
                    opensOn: 'Hover'
                }, target);
                buttonElement.addEventListener('click', () => {
                    const rowElement = target.closest('.e-row') || target.closest('.e-chart-row');
                    if (rowElement) {
                        const rowIndex = rowElement.getAttribute('aria-rowindex');
                        if (rowIndex !== null && ganttChart) {
                            const rowInfo = ganttChart.treeGrid.getRowInfo(target);
                            const rowData = rowInfo.rowData;
                            const messageElement = document.getElementById('message');
                            if (rowData) {
                                messageElement.textContent = `Button clicked for Task ID: ${rowInfo.rowData['TaskID']}`;
                            }
                        }
                    }
                });
            }
        });
    }
});
ganttChart.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/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="container">
            <p id="message"></p>
            <div id="Gantt"></div>        
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Adding a new row programmatically

The Syncfusion® Gantt Chart allows adding a new row programmatically using the addRecord method. This is useful when you want to insert a record without manually entering data. The method accepts three parameters:

  • A data object representing the new row
  • A newRowPosition, which controls where the row is inserted based on the newRowPosition property.
  • An index to specify the insertion position; if not provided, the new row will be added at the top of the Gantt Chart by default.

Supported newRowPosition values:

  • Top: Adds the row at the beginning of the chart.
  • Bottom: Adds the row at the end of the chart.
  • Above: Inserts the row above a specified target row.
  • Below: Inserts the row below a specified target row.
  • Child: Adds the row as a child under a specified parent row, enabling hierarchical structure.
ej.gantt.Gantt.Inject(ej.gantt.Edit, ej.gantt.Selection);

var ganttChart = new ej.gantt.Gantt({ 
  dataSource: ganttData,
  height: '430px',
  treeColumnIndex: 1,
  taskFields: {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  },
  columns: [
    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
    { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 290 },
    { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 120 },
    { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90 },
    { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120 }
  ],
  splitterSettings: { position: '75%' },
  editSettings: {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
  },
  selectionSettings: { mode: 'Row', type: 'Single' }
});

ganttChart.appendTo('#Gantt');

function generateTaskID() {
  return Math.floor(1000 + Math.random() * 90000);
}

function generateTaskName() {
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  let result = '';
  for (let i = 0; i < 5; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return result;
}

function generateStartDate() {
  return new Date();
}

function generateDuration(){
  return Math.floor(Math.random() * 10) + 1;
}

function generateNewTask(){
  return {
    TaskID: generateTaskID(),
    TaskName: generateTaskName(),
    StartDate: generateStartDate(),
    Duration: generateDuration(),
    Progress: 0,
  };
}

let above = new ej.buttons.Button();
above.appendTo('#above');

document.getElementById('above').addEventListener('click', () => {
  const newRecord = generateNewTask();
  ganttChart.addRecord(newRecord, 'Above', 0);
});

let below = new ej.buttons.Button();
below.appendTo('#below');

document.getElementById('below').addEventListener('click', () => {
  const newRecord = generateNewTask();
  ganttChart.addRecord(newRecord, 'Below', 1);
});

let child = new ej.buttons.Button();
child.appendTo('#child');

document.getElementById('child').addEventListener('click', () => {
  const newRecord = generateNewTask();
  ganttChart.clearSelection();
  ganttChart.addRecord(newRecord, 'Child', 2);
});
<!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/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="container">
            <div class="button-container">
                <button id="above">Add New Row as Above position</button>
                <button id="below">Add New Row as Below position</button>
                <button id="child">Add New Row as Child position</button>
            </div>
            <div id="Gantt"></div>        
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

  • If you want to add a new record to the beginning of the data source, you can pass 0 as the third parameter to the addRecord method.
  • If you do not specify an index, the new row will be added at the top of the gantt.

Show or hide a row using an external actions

You can show or hide specific rows in the Syncfusion® Gantt chart based on external actions like a checkbox click, which is useful for temporarily hiding rows without changing the data source. This can be achieved using getRowByIndex from the treeGrid object and Gantt chart component, and getRowsObject from the Gantt instance, along with the change event to manage row visibility dynamically.

In this example, the onCheckBoxChange method checks the checkbox state and uses getRowsObject to iterate through all grid rows. If the TaskName value is Perform Soil test, the row is hidden using getRowByIndex by setting its display style to none, and its index is stored in a hiddenRows array. When the checkbox is unchecked, the method loops through hiddenRows to show each row by resetting its display style and then clears the array.

ej.gantt.Gantt.Inject(ej.gantt.Edit, ej.gantt.Selection);

var ganttChart = new ej.gantt.Gantt({ 
  dataSource: ganttData,
  height: '380px',
  treeColumnIndex: 1,
  taskFields: {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  },
  columns: [
    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
    { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 290 },
    { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 120 },
    { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90 },
    { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120 }
  ],
  splitterSettings: { position: '75%' },
  editSettings: {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
  },
  selectionSettings: { mode: 'Row', type: 'Single' }
});
ganttChart.appendTo('#Gantt');

const messageElement = document.getElementById('message');

let hiddenRowIndexes = [];

let checkbox = new ej.buttons.CheckBox({ label: 'Small', cssClass: 'e-small', change: onCheckBoxChange });
checkbox.appendTo('#toggleRows');

function onCheckBoxChange(args) {
  if (!ganttChart || !ganttChart.treeGrid || !ganttChart.treeGrid.grid) return;

  const rowsObj = ganttChart.treeGrid.grid.getRowsObject();
  if (args.checked) {
    hiddenRowIndexes = [];
    rowsObj.forEach((rowObj, index) => {
      const task = rowObj.data;
      if (task && task.TaskName === 'Perform Soil test') {
        const treeRow = ganttChart.treeGrid.getRowByIndex(index);
        if (treeRow) treeRow.style.display = 'none';
        const ganttRow = ganttChart.getRowByIndex(index);
        if (ganttRow) ganttRow.style.display = 'none';
        hiddenRowIndexes.push(index);
      }
    });

    if (hiddenRowIndexes.length > 0) {
      messageElement.textContent = `Rows with task name 'Perform Soil test' have been hidden.`;
    } else {
      messageElement.textContent = `No rows matched 'Perform Soil test'.`;
    }
  } else {
    hiddenRowIndexes.forEach((index) => {
      const treeRow = ganttChart.treeGrid.getRowByIndex(index);
      if (treeRow) treeRow.style.display = '';
      const ganttRow = ganttChart.getRowByIndex(index);
      if (ganttRow) ganttRow.style.display = '';
    });
    hiddenRowIndexes = [];
    messageElement.textContent = 'All hidden rows are now visible.';
  }
}
<!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/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="container">
            <div id="checkbox">
                <input type="checkbox" id="toggleRows" />
                <label for="toggleRows">Show / Hide Row</label>
            </div>
            <p style="color: red;" id="message"></p>
            <div id="Gantt"></div>        
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>