GanttModel

16 Mar 202624 minutes to read

Interface for a class Gantt

Properties

addDialogFields AddDialogFieldSettingsModel[]

Defines the tabs and fields to be displayed in the add dialog.
If not specified, the fields will be derived from the taskSettings and columns values.

    <div id="Gantt"></div>

    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        addDialogFields: [
            { type: 'General', headerText: 'General', fields: ['TaskID', 'TaskName'] },
            { type: 'Resources' },
            { type: 'Dependency' },
            { type: 'Notes'}
        ],
    });
    gantt.appendTo('#Gantt');

allowExcelExport boolean

Enables exporting the Gantt chart to Excel (.xlsx) and CSV formats.
When set to true, users can export the chart data.

allowFiltering boolean

Enables or disables filtering functionality in the Gantt chart.

allowKeyboard boolean

Enables or disables keyboard interactions in the Gantt chart.

allowParentDependency boolean

Specifies whether dependency connections are supported for parent tasks.
Only allows dependencies between tasks belonging to different parents.
Dependencies within the same parent are not supported.

allowPdfExport boolean

If allowPdfExport set to true, then it will allow the user to export Gantt chart to PDF file.

allowReordering boolean

If allowReordering is set to true, Gantt chart columns can be reordered.
Reordering can be done by drag and drop of a particular column from one index to another index.

allowResizing boolean

Enables column resizing in the Gantt chart when allowResizing is set to true.
When enabled, users can adjust the width of columns by dragging the column borders.

allowRowDragAndDrop boolean

If allowRowDragAndDrop set to true, then it will allow the user to perform row drag and drop action in Gantt chart.

allowSelection boolean

Specifies whether to enable row selection in the Gantt chart. When enabled, selected rows are highlighted.

allowSorting boolean

If allowSorting is set to true, it enables sorting of Gantt chart tasks when the column header is clicked.

allowTaskbarDragAndDrop boolean

Specifies whether taskbar drag and drop is enabled in the Gantt chart.

allowTaskbarOverlap boolean

Specifies whether taskbars can overlap in the Gantt chart. To enable overlapping behavior, use this property along with enableMultiTaskbar.

allowUnscheduledTasks boolean

Enables or disables the rendering of unscheduled tasks in the Gantt chart.
When allowUnscheduledTasks set to true, unscheduled tasks will be displayed in the chart.

autoCalculateDateScheduling boolean

Specifies whether to auto calculate the start and end dates based on factors such as working time, holidays, weekends, and task dependencies.

autoFocusTasks boolean

Specifies whether to automatically scroll the corresponding taskbar into view when a task is selected.

autoUpdatePredecessorOffset boolean

Determines whether to automatically validate and update predecessor offsets in the IPredecessor collection and columns during initial load.
When true, ensures data consistency with rendering validations.

baselineColor string

Specifies the color of the baseline bar in the Gantt chart.

    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({       
    renderBaseline: true,
    baselineColor: 'red'
    });
    gantt.appendTo('#Gantt');

calendarSettings CalendarSettingsModel

Defines the calendar configuration for the project, including working times, holidays, and task-specific calendars.
This setting enables customization of scheduling behavior across the Gantt chart, including:

• Global working hours and non-working days
• Holiday definitions with localized labels
• Task-level calendar overrides via taskFields.calendarId

collapseAllParentTasks boolean

Defines whether all root tasks should be rendered in a collapsed state. When collapseAllParentTasks set to true, all parent tasks will be collapsed by default.

columnMenuItems []

columnMenuItems defines both built-in and custom menu items for the Gantt chart column menu.



The available built-in items are,

• ColumnChooser - To show/hide the TreeGrid columns.
• SortAscending - Sort the current column in ascending order.
• SortDescending - Sort the current column in descending order.
• AutoFitAll - Auto fit the size of all columns.
• AutoFit - Auto fit the size of the current column.
• Filter - Displays filter options based on the filterSettings property.

columns Column[]|string[]|ColumnModel[]

Defines the collection of columns displayed in the Gantt chart grid.
If the columns declaration is empty, the columns are automatically populated based on the taskSettings values.

    <div id="Gantt"></div>

    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        columns: [
            { field: 'TaskID', width: '150', headerText: 'Task ID', headerTextAlign: 'Left' allowFiltering: false },
            { field: 'TaskName', clipMode: 'EllipsisWithTooltip' allowEditing: true, hideAtMedia: '(min-width: 700px)' },
            { field: 'Duration', edittype: 'stringedit', allowReordering: true, maxWidth: '400' },
            { field: 'Progress', textAlign: 'Right', allowResizing: false , visible: true, format: 'C' },
            { field: 'StartDate', width: '250', allowSorting: false, minWidth: '200' }
        ]
    });
    gantt.appendTo('#Gantt');

connectorLineBackground string

Specifies the background color of dependency (connector) lines in the Gantt chart.
Accepts any valid CSS color value (for example: “red”, “#FF5733”, “rgb(255, 0, 0)”).

connectorLineWidth number

Defines the width of the dependency lines in the Gantt chart.
The value should be a positive integer, representing the thickness of the lines.

contextMenuItems ContextMenuItem[]|ContextMenuItemModel[]

Defines the built-in and custom items that appear in the context menu of the Gantt chart.
You can use this property to control the content and functionality of the right-click context menu.

    <div id="Gantt"></div>

    import { Gantt } from '@syncfusion/ej2-gantt';
    import { ContextMenuItemModel } from '@syncfusion/ej2-grids';
    Gantt.Inject(ContextMenu);
    let contextMenuItems: (string | ContextMenuItemModel)[] = ['AutoFitAll', 'AutoFit', 'TaskInformation', 'DeleteTask', 'Save', 'Cancel', 'SortAscending', 'SortDescending', 'Add', 'DeleteDependency', 'Convert',
        { text: 'Collapse the Row', target: '.e-content', id: 'collapserow' } as ContextMenuItemModel,
        { text: 'Expand the Row', target: '.e-content', id: 'expandrow' } as ContextMenuItemModel,
    ];
    let gantt: Gantt = new Gantt({
        contextMenuItems: contextMenuItems as ContextMenuItem[],
    });
    gantt.appendTo('#Gantt');

dataSource Object[]|DataManager|Object

Defines the data source for the Gantt chart, which is used to render rows and tasks.
The dataSource can be an array of JavaScript objects, an instance of DataManager, or a single object.
The array of objects should contain the task data with properties such as TaskID, TaskName, StartDate, EndDate, etc.
This allows dynamic binding of tasks and their relationships (e.g., dependencies, subtasks, progress) to the Gantt chart.

    <div id="Gantt"></div>

    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        // Hierarchical data binding.
        dataSource: [{
            TaskID: 1,
            TaskName: 'Project Initiation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
                { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
            ]
        },]
        // Self-referential data binding (Flat data).
        dataSource:  [
            { TaskID: 1,TaskName: 'Project Initiation',StartDate: new Date('04/02/2019'),EndDate: new Date('04/21/2019')},
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50,ParentId:1 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, ParentId:1   },
        ];
        // Remote Data    
        dataSource: dataSource,
    });
    // Remote Data
    let dataSource: DataManager = new DataManager({
        url: 'https://ej2services.syncfusion.com/production/web-services/api/GanttData',
        adaptor: new WebApiAdaptor,
        crossDomain: true
    });
    gantt.appendTo('#Gantt');

dateFormat string

Specifies the date format for displaying dates in the Gantt chart, including in tooltips and grid cells.
By default, the format is determined based on the current culture/locale settings.

dayWorkingTime DayWorkingTimeModel[]

Defines the customized working time for the project to ensure accurate task scheduling, and works only when the timeline is configured with topTier.unit as ‘Day’ and bottomTier.unit as ‘Hour’ or when timelineViewMode is set to ‘Hour’ or ‘Day’.

    <div id="Gantt"></div>

    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        dayWorkingTime: [from: 9 to: 18]
    });
    
    gantt.appendTo('#Gantt');

disableHtmlEncode boolean

If disableHtmlEncode is set to true, the Gantt component disables HTML entity encoding across the Gantt content, allowing custom HTML elements to be rendered.

durationUnit DurationUnit

durationUnit Specifies the duration unit for each task. The available options are:

• day: Sets the duration unit to day.
• hour: Sets the duration unit to hour.
• minute: Sets the duration unit to minute.

editDialogFields EditDialogFieldSettingsModel[]

Defines the tabs and fields to be displayed in the edit dialog.
If not specified, the fields will be derived from the taskSettings and columns values.

    <div id="Gantt"></div>

    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        editDialogFields: [
            { type: 'General', headerText: 'General', fields: ['TaskID', 'TaskName'] },
            { type: 'Resources' },
            { type: 'Dependency' },
            { type: 'Notes'}
        ],
    });
    gantt.appendTo('#Gantt');

editSettings EditSettingsModel

Configures the edit settings for the Gantt chart, such as enabling or disabling task modifications.

    <div id="Gantt"></div>

    import { Gantt, Edit  } from '@syncfusion/ej2-gantt';
    Gantt.Inject(Edit);
    let gantt: Gantt = new Gantt({
        editSettings: {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            mode:'Auto',
            newRowPosition: 'Top',
            showDeleteConfirmDialog: true
        }
    });
    gantt.appendTo('#Gantt');

emptyRecordTemplate string|Function

Defines a custom template to display when the Gantt chart has no records.
This template replaces the default empty record message and can include text, HTML elements, or images.
Accepts either a template string or an HTML element ID.

enableAdaptiveUI boolean

Specifies whether to enable an adaptive UI mode, which optimizes the layout of pop-ups for filtering, editing, and other features on smaller screens, such as mobile devices. *

enableAutoWbsUpdate boolean

Enables the automatic update of WBS codes when performing actions like sorting, filtering, row drag and drop, and other grid operations that change the task order or hierarchy.
When set to true, the Gantt component will refresh and regenerate the WBS codes dynamically after such actions to ensure the codes remain in sync with the current task structure.

enableContextMenu boolean

If enableContextMenu is set to true, enables the context menu in the Gantt chart.
The context menu provides additional actions that can be accessed by right-clicking on Gantt chart elements

enableCriticalPath boolean

Enables the highlighting of critical tasks in the Gantt Chart that directly affect the project’s end date.
When enabled, tasks that are critical to the project timeline will be visually distinguished by colours.

enableHover boolean

If enableHover is set to true, it enables hover in the Gantt chart and highlights the rows, chart rows, header cells and timeline cells.

enableHtmlSanitizer boolean

Specifies whether to display or remove the untrusted HTML values in the TreeGrid component.
If enableHtmlSanitizer set to true, any potentially harmful strings and scripts are sanitized before rendering.

enableImmutableMode boolean

If enableImmutableMode is set to true, the Gantt Chart will reuse existing rows from previous results instead of
performing a full refresh when Gantt actions are executed.

enableMultiTaskbar boolean

Enables the rendering of child taskbars on the parent row when it is in a collapsed state in the Gantt chart.

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

enablePredecessorValidation boolean

If enablePredecessorValidation is set to true, enables validation for predecessor links in the Gantt chart.

enableRtl boolean

Enable or disable rendering component in right to left direction.

enableTimelineVirtualization boolean

Enables better performance for projects with a large time span by initially rendering only the visible timeline cells when enableVirtualization is enabled.
Subsequent cells are loaded on horizontal scrolling.

enableUndoRedo boolean

enableUndoRedo enables or disables the undo/redo functionality in the Gantt chart.
Enables undo and redo in the Gantt chart. When set to true, users can
revert or reapply recent changes.

enableVirtualMaskRow boolean

Specifies whether to display a shimmer effect during scrolling in the virtual scrolling feature when enableVirtualization is enabled. If disabled, a spinner is shown instead of the shimmer effect.

enableVirtualization boolean

If enableVirtualization is set to true, the Gantt chart will render only the rows visible within the viewport.
and load subsequent rows as the user scrolls vertically. This improves performance when dealing with large datasets.

enableWBS boolean

Enables Work Breakdown Structure (WBS) functionality in the Gantt Chart.
When set to true, the Gantt Chart automatically generates WBS codes based on the task hierarchy.
A dedicated WBS Code column will be shown to represent the task structure.
Additionally, if task dependencies (predecessors) are mapped in the data source, a WBS Predecessor column will also be displayed to reflect dependency information using WBS codes.

eventMarkers EventMarkerModel[]

Defines the events and milestones along the project timeline.
These event markers indicate significant events or milestones throughout the project’s duration.

    <div id="Gantt"></div>

    import { Gantt, DayMarkers } from '@syncfusion/ej2-gantt';
    Gantt.Inject(DayMarkers);
    let gantt: Gantt = new Gantt({
        eventMarkers: [
        {
            day: '04/10/2019',
            cssClass: 'e-custom-event-marker',
            label: 'Project approval and kick-off'
        }
    ]
    });
    gantt.appendTo('#Gantt');

filterSettings FilterSettingsModel

Configures the filter settings for the Gantt chart, enabling users to filter tasks based on specific columns or criteria.
The filterSettings property allows customization of filter behavior, such as which columns to filter and the filter type.

    <div id="Gantt"></div>

    import { Gantt, Filter } from '@syncfusion/ej2-gantt';
    Gantt.Inject(Filter);
    let gantt: Gantt = new Gantt({
        filterSettings: {
            columns: [{ field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' },{ field: 'TaskID', matchCase: false, operator: 'equal', predicate: 'and', value: 2 }],
            ignoreAccent: true
        },
    ]
    });
    gantt.appendTo('#Gantt');

frozenColumns number

Specifies the number of columns that should remain visible and fixed on the left side of the Gantt during horizontal scrolling.
This feature ensures key columns, such as identifiers, stay visible while users scroll through data.

gridLines GridLine

Configures the grid lines displayed in the TreeGrid and Gantt chart.
The gridLines property allows customization of the type of grid lines to be shown, either horizontal, vertical, both or none.

• Both: Displays both horizontal and vertical grid lines.
• None: Hides both horizontal and vertical grid lines.
• Horizontal: Displays only horizontal grid lines.
• Vertical: Displays only vertical grid lines.
• Default: Adjusts line visibility based on the theme.

height number|string

Defines the height of the Gantt component container.
The height property can be set to a specific value (in pixels or percentage) or set to ‘auto’ for automatic height adjustment based on content.

highlightWeekends boolean

If highlightWeekends is set to true, it highlights all weekend days in the week-day timeline mode.
This makes weekends visually distinct in the timeline view.

holidays HolidayModel[]

Defines holidays within the project timeline, allowing you to mark specific dates as holidays.
This helps in accounting for non-working days in scheduling and task planning.

    <div id="Gantt"></div>

    import { Gantt, DayMarkers } from '@syncfusion/ej2-gantt';
    Gantt.Inject(DayMarkers);
    let gantt: Gantt = new Gantt({
        holidays: [{
            from: "04/04/2019",
            to: "04/05/2019",
            label: "Public holidays",
            cssClass: "e-custom-holiday"
        }]
    });
    gantt.appendTo('#Gantt');

includeWeekend boolean

Specifies whether weekend days are considered working days in the Gantt chart.
When includeWeekend is set to true, weekends (Saturday and Sunday) are treated as regular working days.

labelSettings LabelSettingsModel

Configures the labels displayed on the right, left, and inside the taskbars in the Gantt chart.

    <div id="Gantt"></div>

    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        labelSettings: {
            leftLabel: 'TaskID',
            rightLabel: 'Task Name: ${taskData.TaskName}',
            taskLabel: '${Progress}%'
        }
    });
    gantt.appendTo('#Gantt');

loadChildOnDemand boolean

Gets or sets whether to load child records on demand in remote data binding. When loadChildOnDemand set to true, child records are loaded only when expanded, and parent records are rendered in a collapsed state initially.

loadingIndicator LoadingIndicatorModel

Specifies the type of loading indicator to display during scrolling action in the virtual scrolling feature when enableVirtualization is enabled.

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

milestoneTemplate string|Function

Defines a custom template for rendering milestone tasks in the Gantt chart. This template allows you to customize the appearance of milestone tasks.

<script type="text/x-jsrender" id="MilestoneTemplate">
   <div class="e-gantt-milestone" style="position:absolute;">
      <div class="e-milestone-top" style="border-right-width:15px;border-left-width:15px;border-bottom-width:15px;"></div>
      <div class="e-milestone-bottom" style="top:15px;border-right-width:15px; border-left-width:15px; border-top-width:15px;">
	  </div>
   </div>
</script>

    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({       
    milestoneTemplate: '#MilestoneTemplate',
    });
    gantt.appendTo('#Gantt');

parentTaskbarTemplate string|Function

Defines a custom template for rendering parent task bars in the Gantt chart. This template allows you to customize the appearance of parent task bars.

<script type="text/x-jsrender" id="ParentTaskbarTemplate">
   <div class="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar" style="height:100%">
      <div class="e-gantt-parent-progressbar-inner-div e-gantt-parent-progressbar" style="width:${ganttProperties.progressWidth}px;height:100%">
      <span class="e-task-label" style="position: absolute; z-index: 1; font-size: 12px; color: white; top: 5px; left: 10px; font-family: "Segoe UI"; overflow: hidden; text-overflow: ellipsis; width: 40%; cursor: move;">${taskData.TaskName}</span>
   </div>
   </div>
</script>

    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({       
    parentTaskbarTemplate: '#ParentTaskbarTemplate',
    });
    gantt.appendTo('#Gantt');

projectEndDate Date|string

Defines the end date of the project. If the projectEndDate is not set, it will be automatically calculated based on the data source.
The date can be provided as a Date object or a string in a valid date format.

projectStartDate Date|string

Defines the start date of the project. If the projectStartDate is not set, it will be automatically calculated based on the data source.
The date can be provided as a Date object or a string in a valid date format.

query Query

Defines an external Query
that will be executed in conjunction with data processing to filter, sort the data.
This allows for advanced data manipulation before binding the data to the Gantt chart.

    <div id="Gantt"></div>

    import { Gantt } from '@syncfusion/ej2-gantt';
    // Create query with custom parameter (common pattern to signal "Gantt mode" to server)
    let customQuery: Query = new Query().addParams('ej2Gantt', 'test');
    // Remote Data
    let dataSource: DataManager = new DataManager({
        url: 'https://ej2services.syncfusion.com/production/web-services/api/GanttData',
        adaptor: new WebApiAdaptor,
        crossDomain: true
    });
    let gantt: Gantt = new Gantt({   
        dataSource: dataSource,
        query: customQuery,                        // This is the key line — binds the query

        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID: 'ParentID'
        },

        height: '450px',
        labelSettings: { leftLabel: 'TaskName' }
    });
    gantt.appendTo('#Gantt');

readOnly boolean

If readOnly is set to true, the Gantt chart becomes read-only, meaning tasks and other elements cannot be edited.
This setting disables all editing features, including task updates, dependency management, and any editing acions.

renderBaseline boolean

If renderBaseline is set to true, baselines will be rendered for tasks in the Gantt chart.
Baselines provide a visual reference to track the planned vs. actual progress of tasks.

resourceFields ResourceFieldsModel

Defines the mapping properties to extract resource values, such as id, name, unit, and group from the resource collection in the Gantt chart.
This helps to map data from a custom resource collection to the appropriate fields for resource allocation.

resourceIDMapping string

Defines the mapping property to retrieve the resource ID value from the resource collection.
This is used to map the resource ID from the resource data to the Gantt chart for resource allocation.

    <div id="Gantt"></div>

import { Gantt } from '@syncfusion/ej2-gantt';

let resources = [
    { resourceId: 1, resourceName: 'Martin' },
    { resourceId: 2, resourceName: 'Rose' }
];

let gantt = new Gantt({
    dataSource: [
        { TaskID: 1, TaskName: 'Task 1', StartDate: new Date('2025-01-01'), Duration: 5, resources: [1] },
        { TaskID: 2, TaskName: 'Task 2', StartDate: new Date('2025-01-03'), Duration: 4, resources: [1, 2] }
    ],
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        resourceInfo: 'resources'           // field in task data that holds array of resource IDs
    },
    resourceFields: {
        id: 'resourceId',                   // Maps resource ID field → conceptually called resourceIDMapping
        name: 'resourceName'                // Maps resource name field → conceptually called resourceNameMapping
    },
    resources: resources,
    labelSettings: { rightLabel: 'resources' }
});

gantt.appendTo('#Gantt');

resourceNameMapping string

Defines the mapping property to retrieve the resource name value from the resource collection.
This is used to map the resource name from the resource data to the Gantt chart for task allocation.

    <div id="Gantt"></div>

import { Gantt } from '@syncfusion/ej2-gantt';

let resources = [
    { resourceId: 1, resourceName: 'Martin' },
    { resourceId: 2, resourceName: 'Rose' }
];

let gantt = new Gantt({
    dataSource: [
        { TaskID: 1, TaskName: 'Task 1', StartDate: new Date('2025-01-01'), Duration: 5, resources: [1] },
        { TaskID: 2, TaskName: 'Task 2', StartDate: new Date('2025-01-03'), Duration: 4, resources: [1, 2] }
    ],
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        resourceInfo: 'resources'           // field in task data that holds array of resource IDs
    },
    resourceFields: {
        id: 'resourceId',                   // Maps resource ID field → conceptually called resourceIDMapping
        name: 'resourceName'                // Maps resource name field → conceptually called resourceNameMapping
    },
    resources: resources,
    labelSettings: { rightLabel: 'resources' }
});

gantt.appendTo('#Gantt');

resources object[]

Specifies the collection of resources assigned to the project.

rowHeight number

Defines the height of grid and chart rows in the Gantt chart.
This property sets the vertical space allocated for each task or row, allowing customization of row sizes.

searchSettings SearchSettingsModel

Configures the search functionality within the Gantt chart.

    <div id="Gantt"></div>

    import { Gantt, Filter } from '@syncfusion/ej2-gantt';
    Gantt.Inject(Filter);
    let gantt: Gantt = new Gantt({
        searchSettings: { fields: ['TaskName'], operator: 'contains', key: 'List', ignoreCase: true, hierarchyMode: 'Parent' }
    });
    gantt.appendTo('#Gantt');

segmentData object[]

Specifies the array of segment objects assigned to tasks in the Gantt chart.
Each segment represents a portion of the taskbar, allowing for visual representation of different phases or sub-tasks within a single task.

selectedRowIndex number

The selectedRowIndex allows you to specify the index of the row to be selected at the time of initial rendering.
It can also be used to get the currently selected row index after selection.
A value of -1 indicates no row is selected.

selectionSettings SelectionSettingsModel

Configures the settings for selection in the Gantt chart.

    <div id="Gantt"></div>

    import { Gantt, Selection  } from '@syncfusion/ej2-gantt';
    Gantt.Inject(Selection);
    let gantt: Gantt = new Gantt({
        selectionSettings: {
            mode: 'Row',
            type: 'Multiple'
        }
    });
    gantt.appendTo('#Gantt');

showColumnMenu boolean

If showColumnMenu set to true, enables the column menu options for each column header in the Gantt chart.

showInlineNotes boolean

To show notes column cell values inside the cell or in tooltip.

showOverAllocation boolean

If showOverAllocation set to true, enables the rendering of the overallocation container in the Gantt chart.

sortSettings SortSettingsModel

Configures the sorting options for the Gantt chart.
When set, it defines how tasks are sorted based on the specified columns.

    <div id="Gantt"></div>

    import { Gantt, Sort } from '@syncfusion/ej2-gantt';
    Gantt.Inject(Sort);
    let gantt: Gantt = new Gantt({
        sortSettings: { columns: [{ field: 'TaskID', direction: 'Ascending' }], allowUnsort: true },
    });
    gantt.appendTo('#Gantt');

splitterSettings SplitterSettingsModel

Configures the splitter settings for the Gantt chart.

    <div id="Gantt"></div>

    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        splitterSettings: {
            position: "50%",
            minimum: "200",
            separatorSize: 5,
            view: 'Default'
        }
    });
    gantt.appendTo('#Gantt');

The position takes precedence over columnIndex when both defined.

taskFields TaskFieldsModel

Defines the mapping properties used to extract task-related values—such as ID, start date, end date, duration, and progress—from the data source.
This ensures that the Gantt chart correctly maps the provided data to the corresponding task fields and renders them accurately.

    <div id="Gantt"></div>

    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
         taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            dependency: 'Predecessor',
            progress: 'Progress',
            baselineStartDate: 'BaselineStartDate',
            baselineEndDate: 'BaselineEndDate',
            durationUnit: 'DurationUnit',
            expandState: 'isExpand',
            indicators: 'Indicators',
            milestone: 'Milestone',
            notes: 'info',
            resourceInfo: 'resourceInfo',
            child: 'subtasks',
        },
    });
    gantt.appendTo('#Gantt');

taskMode ScheduleMode

Specifies task schedule mode for a project.

taskType TaskType

taskType Specifies the task type for task whether fixedUnit or fixedWork or fixedDuration.

• fixedUnit: Sets the task type as fixedUnit.
• fixedWork: Sets the task type as fixedWork.
• fixedDuration: Sets the task type as fixedDuration.

taskbarHeight number

Defines height of the taskbar element in the Gantt chart.

taskbarTemplate string|Function

The task bar template that renders customized child task bars from the given template.
This property allows users to define a custom template for rendering child task bars in the Gantt chart.

   <script type="text/x-jsrender" id="TaskbarTemplate">
    <div class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar"  style="height:100%">
       <div class="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar" style="width:${ganttProperties.progressWidth}px;height:100%">
          <span class="e-task-label" style="position: absolute; z-index: 1; font-size: 12px; color: white; top: 5px; left: 10px; font-family: "Segoe UI"; overflow: hidden; text-overflow: ellipsis; width: 40%; cursor: move;">${taskData.TaskName}</span>
       </div>
    </div>
</script>

    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({   
    taskbarTemplate: '#TaskbarTemplate'
    });
    gantt.appendTo('#Gantt');

timelineSettings TimelineSettingsModel

Configures timeline settings of Gantt.
Defines default timeline modes or customized top tier mode and bottom tier mode or single tier only.

    <div id="Gantt"></div>

    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        timelineSettings: {
            showTooltip: true,
            timelineUnitSize: 80,
            timelineViewMode: 'Week',
            updateTimescaleView: true,
            weekStartDay: 0,
            weekendBackground: 'red',
            topTier: {
                format: 'MMM dd, yyyy',
                unit: 'Week',
            },
            bottomTier: {
                unit: 'Day',
                format: 'EEE, dd',
                count: 1,
            }
        }
    });
    gantt.appendTo('#Gantt');

timelineTemplate string|Function

Specifies the template used to render custom HTML content in timeline cells.

import { Gantt } from '@syncfusion/ej2-gantt';

let gantt = new Gantt({
    timelineTemplate: function(props) {
        return `<div style="text-align:center; padding:5px;">${props.value}</div>`;
    },
});

gantt.appendTo('#Gantt');

timezone string

Specifies the time zone used for task date and scheduling calculations in the Gantt chart.
By default, the system or browser time zone is applied.
The time zone always affects internal date calculations (e.g., task start/end times, durations, and dependencies),
even in non-hour views. However, visible changes in timeline and task positions only appear when the timeline
includes an hour-level mode.

To see the time zone reflected in the UI, configure one of these:

• timelineViewMode: 'Hour'
• or topTier.unit: 'Day' + bottomTier.unit: 'Hour'

Without an hour view (e.g., only Day/Week/Month views), the chart looks unchanged, but Gantt chart uses the new time zone.

Use standard IANA time zone names (e.g., ‘Asia/Kolkata’, ‘UTC’, ‘America/New_York’).

toolbar []

toolbar defines the toolbar items of the Gantt.
It contains built-in and custom toolbar items.
If an array value is assigned, it is considered as the list of built-in and custom toolbar items in the Gantt’s toolbar.


The available built-in toolbar items are:

• Add: Adds a new record.
• Edit: Edits the selected task.
• Update: Updates the edited task.
• Delete: Deletes the selected task.
• Cancel: Cancels the edit state.
• Search: Searches tasks by the given key.
• ExpandAll: Expands all the task of Gantt.
• CollapseAll: Collapses all the task of Gantt.
• PrevTimeSpan: Extends timeline with one unit before the timeline start date.
• NextTimeSpan: Extends timeline with one unit after the timeline finish date.
• ZoomIn: ZoomIn the Gantt control.
• ZoomOut: ZoomOut the Gantt control.
• ZoomToFit: Display the all tasks within the viewable Gantt chart.
• ExcelExport: To export in Excel format.
• CsvExport : To export in CSV format.
• Indent: To indent a task to one level.
• Outdent: To outdent a task from one level.

tooltipSettings TooltipSettingsModel

Enables or disables default tooltip of Gantt element and defines customized tooltip for Gantt elements.

    <div id="Gantt"></div>

    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        tooltipSettings: {
            showTooltip: true,
            taskbar: '<div>TaskID: ${TaskID}</div>',
            connectorLine: '<div>Offset : ${offsetString}</div>',
            editing: '<div>Duration : ${duration}</div>',
            baseline: '<div>Baseline StartDate : ${this.getFormatedDate(BaselineStartDate)}</div>'
        }
    });
    gantt.appendTo('#Gantt');

treeColumnIndex number

To define expander column index in Grid.

undoRedoActions GanttAction[]

undoRedoActions Defines action items that retain for undo and redo operation.

undoRedoStepsCount number

Specifies the number of undo and redo actions to retain in history.

updateOffsetOnTaskbarEdit boolean

Specifies whether to update offset value on a task for all the predecessor edit actions.

validateManualTasksOnLinking boolean

If validateManualTasksOnLinking is set to true,
it enables date validation while connecting manually scheduled tasks with predecessor.

viewType ViewType

Specifies the view type of the Gantt chart.

weekWorkingTime WeekWorkingTimeModel[]

Specifies the working days in a week for accurate planning, and works only when the timeline is configured with topTier.unit as ‘Day’ and bottomTier.unit as ‘Hour’ or when timelineViewMode is set to ‘Hour’ or ‘Day’.

width number|string

Defines the width of the Gantt component container.

workUnit WorkUnit

workUnit Specifies the work unit for each tasks whether day or hour or minute.

• day: Sets the work unit as day.
• hour: Sets the work unit as hour.
• minute: Sets the work unit as minute.

workWeek string[]

Specifies the project’s workweek (working days).
workWeek specifies the days of the week that are considered working days for the project.

zoomingLevels ZoomTimelineSettings[]

Defines the available zoom levels for the Gantt timeline.
Provide an array of ZoomTimelineSettings to control the scale and intervals used when zooming.

Events

actionBegin EmitType<Object|FilterEventArgs|SortEventArgs|ITimeSpanEventArgs|IDependencyEventArgs|ITaskAddedEventArgs|ZoomEventArgs>

Event triggered when a Gantt action (sorting, filtering, searching, etc.) begins.
Allows cancellation or modification of the action.

actionComplete EmitType<FilterEventArgs|SortEventArgs|ITaskAddedEventArgs|IKeyPressedEventArgs|ZoomEventArgs>

Event triggered after a Gantt action (sorting, filtering, etc.) has completed.
Provides updated state after the action.

actionFailure EmitType<FailureEventArgs>

Event triggered when a Gantt action fails during execution.
Provides error details.

beforeDataBound EmitType<BeforeDataBoundArgs>

Event triggered before data is bound to the TreeGrid.
Allows modification of data before rendering begins.

beforeExcelExport EmitType<Object>

Event triggered before Gantt data is exported to Excel.
Allows modification or cancellation of the export process.

beforePdfExport EmitType<Object>

Event triggered before Gantt data is exported to PDF.
Allows modification or cancellation of PDF export.

beforeTooltipRender EmitType<BeforeTooltipRenderEventArgs>

Event triggered before a tooltip is rendered.
Allows customization of tooltip content or cancellation.

cellDeselected EmitType<CellDeselectEventArgs>

Event triggered after a cell has been deselected.

cellDeselecting EmitType<CellDeselectEventArgs>

Event triggered before a selected cell is deselected.
Allows cancellation of cell deselection.

cellEdit EmitType<CellEditArgs>

Event triggered when a cell enters edit mode in the Gantt chart.
Allows customization or cancellation of editing.

cellSave EmitType<CellSaveArgs>

Event triggered before a cell value is saved during editing.
Allows cancellation or modification of the save operation.

cellSelected EmitType<CellSelectEventArgs>

Event triggered after a cell has been selected.

cellSelecting EmitType<CellSelectingEventArgs>

Event triggered before a cell is selected.
Allows cancellation of cell selection.

collapsed EmitType<ICollapsingEventArgs>

Event triggered after a row has been collapsed.
Indicates the collapse action has completed.

collapsing EmitType<ICollapsingEventArgs>

Event triggered before a row is collapsed.
Allows cancellation of the collapse action.

columnDrag EmitType<ColumnDragEventArgs>

Event triggered continuously while a column header is being dragged.

columnDragStart EmitType<ColumnDragEventArgs>

Event triggered when column header drag starts.

columnDrop EmitType<ColumnDragEventArgs>

Event triggered when a dragged column header is dropped.

columnMenuClick EmitType<ColumnMenuClickEventArgs>

Event triggered when an item in the column menu is clicked.

columnMenuOpen EmitType<ColumnMenuOpenEventArgs>

Event triggered before the column menu is opened.
Allows customization or cancellation of menu display.

contextMenuClick EmitType<CMenuClickEventArgs>

Event triggered when an item in the context menu is clicked.

contextMenuOpen EmitType<CMenuOpenEventArgs>

Event triggered before the context menu is opened.
Allows customization or cancellation.

created EmitType<Object>

Event triggered after the Gantt component is fully created and initialized.

dataBound EmitType<Object>

Event triggered after the data source is bound to the TreeGrid part of Gantt.
Indicates data binding is complete.

dataStateChange EmitType<DataStateChangeEventArgs>

Event triggered after actions like sorting, filtering complete.
Used to update the dataSource with current view data and record count.

destroyed EmitType<Object>

Event triggered when the Gantt component is being destroyed.
Allows cleanup operations.

endEdit EmitType<ITaskbarEditedEventArgs>

Event triggered when a task is saved through cell editing.
Provides updated task data after save.

excelExportComplete EmitType<ExcelExportCompleteArgs>

Event triggered after Gantt data has been successfully exported to Excel.
Provides access to the generated workbook.

excelHeaderQueryCellInfo EmitType<ExcelHeaderQueryCellInfoEventArgs>

Event triggered before each header cell is exported to Excel.
Allows customization of header cell content or styling.

excelQueryCellInfo EmitType<ExcelQueryCellInfoEventArgs>

Event triggered before each cell (header or data) is exported to Excel.
Allows customization of cell content, style, or value.

expanded EmitType<ICollapsingEventArgs>

Event triggered after a row has been expanded.
Indicates the expand action has completed.

expanding EmitType<ICollapsingEventArgs>

Event triggered before a row is expanded.
Allows cancellation of the expand action.

headerCellInfo EmitType<HeaderCellInfoEventArgs>

Event triggered before each header cell element is rendered.
Allows customization of header cell content or style.

load EmitType<Object>

Event triggered when the Gantt component begins loading data.
Occurs before any rendering starts.

onMouseMove EmitType<IMouseMoveEventArgs>

Event triggered on mouse move over the Gantt component.
Provides mouse position and target information.

onTaskbarClick EmitType<ITaskbarClickEventArgs>

Event triggered when a taskbar element is clicked.
Provides task and click details.

pdfColumnHeaderQueryCellInfo EmitType<PdfColumnHeaderQueryCellInfoEventArgs>

Event triggered before each column header cell is exported to PDF.
Allows customization of header cell content or style.

pdfExportComplete EmitType<Object>

Event triggered after Gantt data has been exported to PDF.
Provides access to the generated document.

pdfQueryCellInfo EmitType<PdfQueryCellInfoEventArgs>

Event triggered before each cell is exported to PDF.
Allows customization of cell content or style.

pdfQueryTaskbarInfo EmitType<Object>

Event triggered before each taskbar is exported to PDF.
Allows customization of taskbar appearance in PDF.

pdfQueryTimelineCellInfo EmitType<PdfQueryTimelineCellInfoEventArgs>

Event triggered before each timeline cell is exported to PDF.
Allows customization of timeline cell content or style.

queryCellInfo EmitType<QueryCellInfoEventArgs>

Event triggered before each cell element is rendered.
Allows customization of cell content or style.

queryTaskbarInfo EmitType<IQueryTaskbarInfoEventArgs>

Event triggered per taskbar before rendering in the Gantt chart.
Used to customize taskbar styles and properties dynamically.

recordDoubleClick EmitType<RecordDoubleClickEventArgs>

Event triggered when a record is double-clicked.

resizeStart EmitType<ResizeArgs>

Event triggered when column resizing starts in the Grid.

resizeStop EmitType<ResizeArgs>

Event triggered when column resizing completes.

resizing EmitType<ResizeArgs>

Event triggered continuously while a column is being resized.

rowDataBound EmitType<RowDataBoundEventArgs>

Event triggered before each row element is rendered.
Allows customization of row appearance.

rowDeselected EmitType<RowDeselectEventArgs>

Event triggered after a row has been deselected.

rowDeselecting EmitType<RowDeselectEventArgs>

Event triggered before a selected row is deselected.
Allows cancellation of deselection.

rowDrag EmitType<RowDragEventArgs>

Event triggered continuously while row elements are being dragged.
Provides current drag position and target information.

rowDragStart EmitType<RowDragEventArgs>

Event triggered when a row drag operation starts.
Provides initial drag source details.

rowDragStartHelper EmitType<RowDragEventArgs>

Event triggered before the row drag operation officially begins.
Allows preparation or cancellation of the drag action.

rowDrop EmitType<RowDragEventArgs>

Event triggered when dragged row elements are dropped onto a target row.
Provides source and target row information for reordering/indent/outdent.

rowSelected EmitType<RowSelectEventArgs>

Event triggered after a row has been selected.

rowSelecting EmitType<RowSelectingEventArgs>

Event triggered before a row is selected.
Allows cancellation of selection.

splitterResizeStart EmitType<ResizeEventArgs>

Event triggered when splitter resizing begins in the Gantt component.

splitterResized EmitType<ISplitterResizedEventArgs>

Event triggered when splitter resizing action completes.

splitterResizing EmitType<ResizingEventArgs>

Event triggered continuously while the splitter bar is being dragged.

taskbarEdited EmitType<ITaskbarEditedEventArgs>

Event triggered after a taskbar has been dragged and dropped to a new position.
Indicates editing via taskbar has completed.

taskbarEditing EmitType<ITaskbarEditedEventArgs>

Event triggered while a taskbar is being dragged.
Provides current drag progress and position.

toolbarClick EmitType<ClickEventArgs>

Event triggered when a toolbar item is clicked.