Column Rendering in EJ2 TypeScript Gantt Chart Control

27 May 202624 minutes to read

The Syncfusion® EJ2 TypeScript Gantt Chart control supports column rendering to control data presentation. Column definitions act as the data schema and support operations such as sorting and filtering. The field property is required to map data source values to columns and must be defined for features like complex binding and template-based actions.

  • If the field is not defined in the dataSource, the column will display empty values.
  • A field with a dot operator is treated as complex binding.
  • To enable CRUD, filtering, or searching, the field must be defined for template columns.

Define columns manually

To manually define columns in the Gantt Chart control, use e-columns and set properties like field, headerText and width. This enables customization of column behavior and appearance based on specific requirements.

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

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    splitterSettings: {
        position: '75%'
    },
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    columns: [
        { field: 'TaskID' },
        { field: 'TaskName', headerText: 'Task Name', width: 180 },
        { field: 'StartDate', headerText: 'Start Date', width: 180 },
        { field: 'Duration', headerText: 'Duration', width: 100 },
        { field: 'Progress', headerText: 'Progress', width: 120 }
    ]
});

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>

Auto generated columns

The Syncfusion® Gantt Chart control automatically generates columns when the columns property is either empty or undefined during initialization, binding all fields from the dataSource as individual Gantt columns.

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

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    splitterSettings: {
        position: '75%'
    },
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    treeColumnIndex: 1,
});

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>

Dynamic column generation

You can dynamically generate columns in the Syncfusion® Gantt Chart control at runtime based on the provided data. This is useful when the column structure needs to adapt to user requirements or dynamic data sources.

Using valueAccessor property

The valueAccessor property is used to format column data in the Gantt Chart control. It accepts a function that returns a custom display value using the following two arguments:

  • field: The column’s data field.
  • data: The data record for the row.

In the following example, percentageFormatter returns the progress value with a % sign, while concatenateFields returns a combined string of TaskName and TaskID.

import { Gantt } from '@syncfusion/ej2-gantt';
import { getValue } from '@syncfusion/ej2-base';
import { GanttData } from './datasource.ts';

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    splitterSettings: {
        position: '75%'
    },
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    columns: [
        { field: 'TaskID' },
        {
            field: 'TaskName',
            headerText: 'Task Name',
            width: 180,
            valueAccessor: (field: string, data: Object) => {
                return (data as any)[field] + '-' + getValue('TaskID', data);
            }
        },
        {
            field: 'StartDate',
            headerText: 'Start Date',
            width: 180
        },
        {
            field: 'Duration',
            headerText: 'Duration',
            width: 100
        },
        {
            field: 'Progress',
            headerText: 'Progress',
            width: 120,
            valueAccessor: (field: string, data: Object) => {
                return (data as any)[field] + '%';
            }
        }
    ]
});

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>

The valueAccessor function may impact performance when used with large datasets or complex logic. To improve rendering speed, enable the virtualization feature so that only visible rows are processed and displayed.

Display array type columns

The Gantt Chart control supports binding an array of objects to a column using the valueAccessor property. It accepts a function that returns a custom display value, which is then displayed in the column.

In the following example, the Name column shows the combined value of FirstName and LastName by using a custom function defined in valueAccessor.

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

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '430px',
    treeColumnIndex: 1,
    splitterSettings: {
        position: '75%'
    },
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    columns: [
        {
            field: 'TaskID',
            headerText: 'Task ID',
            width: 100
        },
        {
            field: 'TaskName',
            headerText: 'Task Name',
            width: 290
        },
        {
            field: 'Name',
            headerText: 'Full Name',
            width: 250,
            textAlign: 'Right',
            valueAccessor: (field: string, data: any): string => {
                return data.Name.map((person: any) =>
                    person.lastName || person.firstName
                ).join(' ');
            }
        },
        {
            field: 'Duration',
            headerText: 'Duration',
            width: 90
        },
        {
            field: 'Progress',
            headerText: 'Progress',
            width: 120
        }
    ]
});

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>

Since customized values are displayed in the Name column, data operations, such as sorting and filtering, cannot be performed for this column.

Expression column

You can achieve an expression column in the Gantt Chart control using the valueAccessor property. It accepts a function that returns a calculated value, which is displayed in the column based on other column values.

In the following example, the chart includes columns like TaskID, TaskName, Duration, Progress, units, and unit price. A Total Price column is added to display the result of multiplying units and unit price for each row.

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

let totalPrice = (field: string, data: any, column: object): number => {
    return Number(data.Units) * Number(data.UnitPrice);
};

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    splitterSettings: {
        position: '75%'
    },
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'parentID',
        units: 'Units',
        unitPrice: 'UnitPrice'
    },
    columns: [
        { field: 'TaskID', headerText: 'Task ID', width: 100 },
        { field: 'TaskName', headerText: 'Task Name', width: 290 },
        { field: 'Units', headerText: 'Units', width: 120, textAlign: 'Right' },
        { field: 'UnitPrice', headerText: 'Unit Price', width: 120, textAlign: 'Right' },
        {
            field: 'TotalPrice',
            headerText: 'Total Price',
            width: 120,
            format: 'c2',
            type: 'number',
            textAlign: 'Right',
            valueAccessor: totalPrice
        },
        { field: 'Duration', headerText: 'Duration', width: 90 },
        { field: 'Progress', headerText: 'Progress', width: 120 }
    ]
});

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>

Since custom values are displayed in the Total Price column, operations like sorting and filtering are not supported for this column.

Display serial number

You can display serial numbers for each row in the Gantt Chart control using the rowDataBound event. This event triggers when data is bound to each row, allowing you to assign and display a serial number directly in the column.

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

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    splitterSettings: {
        position: '75%'
    },
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    treeColumnIndex: 1,
    rowDataBound: (args: any) => {
        let row: HTMLElement = args.row;
        if (row) {
            let rowIndex: number = parseInt(row.getAttribute('aria-rowindex') || '0', 10);
            let cells: NodeListOf<Element> = row.querySelectorAll('.e-rowcell');
            if (cells.length > 0) {
                cells[0].textContent = rowIndex.toString();
            }
        }
    },
    columns: [
        { field: 'SNo', headerText: 'S.No', width: 100 },
        { field: 'TaskID', headerText: 'Task ID', width: 100 },
        { field: 'TaskName', headerText: 'Task Name', width: 290 },
        { field: 'StartDate', headerText: 'StartDate', width: 120, textAlign: 'Right' },
        { field: 'Duration', headerText: 'Duration', width: 90 },
        { field: 'Progress', headerText: 'Progress', width: 120 }
    ]
});

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>

Since custom values are displayed in the S.No column, data operations such as sorting and filtering are not supported for this column.