Gantt

Represents the Gantt chart component.

<div id='gantt'></div>
<script>
 var ganttObject = new Gantt({
     taskFields: { id: 'taskId', name: 'taskName', startDate: 'startDate', duration: 'duration' }
 });
 ganttObject.appendTo('#gantt');
</script>

Properties

UpdateOffsetOnTaskbarEdit

boolean

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

Defaults to true

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');

Defaults to []

allowExcelExport

boolean

If allowExcelExport set to true, then it will allow the user to export Gantt chart to Excel and CSV file.

Defaults to false

allowFiltering

boolean

Enables or disables filtering functionality in the Gantt chart.

Defaults to false

allowKeyboard

boolean

Enables or disables keyboard interactions in the Gantt chart.

Defaults to true

allowParentDependency

boolean

Specifies whether to allow dependency connection support for parent records.

Defaults to true

allowPdfExport

boolean

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

Defaults to false

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.

Defaults to false

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.

Defaults to false

allowRowDragAndDrop

boolean

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

Defaults to false

allowSelection

boolean

If allowSelection is set to true, it enables row selection in the Gantt chart, and the selected rows are highlighted.

Defaults to true

allowSorting

boolean

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

Defaults to false

allowTaskbarDragAndDrop

boolean

Defines whether to enable or disable the taskbar drag and drop action in the Gantt chart.

Defaults to false

allowTaskbarOverlap

boolean

Specifies whether taskbars can overlap in the Gantt chart.

Defaults to true

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.

Defaults to false

autoCalculateDateScheduling

boolean

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

Defaults to true

autoFocusTasks

boolean

Enables or disables automatic focusing on the taskbar when a task is clicked.

Defaults to true

baselineColor

string

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

Defaults to null

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.

Defaults to false

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.

Defaults to null

columnMenuModule

ColumnMenu

The columnMenuModule is used to manage and customize the column menu in the Gantt chart.

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');

Defaults to []

connectorLineBackground

string

Defines the background color of the dependency lines (connector lines) in the Gantt chart. You can set the color as a valid CSS color string (e.g., “red”, “#FF5733”, “rgb(255,0,0)”).

Defaults to null

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.

Defaults to 1

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');

Defaults to null

contextMenuModule

ContextMenu

The contextMenuModule is responsible for managing and invoking the context menu in the Gantt chart. It provides the functionality to display and interact with the context menu, which can be customized using the contextMenuItems property.

criticalPathModule

CriticalPath

The criticalPathModule is used to determine the critical path in the Gantt chart. It identifies the sequence of tasks that directly affect the project’s duration and highlights them.

currentZoomingLevel

ZoomTimelineSettings

Specifies the current zooming level of the Gantt chart.

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');

Defaults to []

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.

dayMarkersModule

DayMarkers

The dayMarkersModule is used to manage and manipulate event markers in the Gantt chart. It allows customization of how markers are displayed on specific days, helping to highlight important dates or milestones.

dayWorkingTime

DayWorkingTimeModel[]

Defines the customized working time for the project. This helps in accurately planning tasks based on available working hours and ensures proper task scheduling.

    <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.

Defaults to true

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.

Defaults to day

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');

Defaults to []

editModule

Edit

The editModule handles the manipulation of Gantt chart records, including editing, updating, and deleting tasks.

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');

Defaults to { allowAdding: false, allowEditing: false, allowDeleting: false, mode:‘Auto’,showDeleteConfirmDialog: false }

enableAdaptiveUI

boolean

If enableAdaptiveUI is set to true, the pop-up UI becomes adaptive to smaller screens, enabling better usability for filtering and other features.

Defaults to false

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

Defaults to false

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.

Defaults to false

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.

Defaults to true

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.

Defaults to false

enableMultiTaskbar

boolean

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

Defaults to false

enablePersistence

boolean

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

Defaults to false

enablePredecessorValidation

boolean

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

Defaults to true

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableTimelineVirtualization

boolean

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

Defaults to false

enableUndoRedo

boolean

Enables or disables the undo and redo functionality in the Gantt chart.

Defaults to false

enableVirtualMaskRow

boolean

Specifies whether to display shimmer effect during scrolling action in virtual scrolling feature. If disabled, spinner is shown instead of shimmer effect.

Defaults to true

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.

Defaults to false

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');

Defaults to []

excelExportModule

ExcelExport

The excelExportModule is used for exporting Gantt data to an Excel file. This module provides the functionality to export task data, dependencies, and other Gantt-related information in Excel format.

filterModule

Filter

The filterModule is used to manage and apply filtering operations in the Gantt chart.

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');

Defaults to {columns: [], type: ‘Menu’ }

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, or both.

Defaults to ‘Horizontal’

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.

Defaults to ‘auto’

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.

Defaults to false

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');

Defaults to []

includeWeekend

boolean

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

Defaults to false

keyboardModule

KeyboardEvents

The keyboardModule is responsible for managing keyboard interactions in the Gantt chart. It handles events such as navigating, selecting, and performing actions using the keyboard.

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.

Defaults to true

loadingIndicator

LoadingIndicatorModel

Configures the loading indicator for the Gantt Chart. Specifies the type of indicator to display (spinner or shimmer effect) during waiting periods when actions are performed in the Gantt Chart.

Defaults to {indicatorType: ‘Spinner’}

locale

string

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

Defaults to ”

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.

Defaults to null

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');

Defaults to null

pdfExportModule

PdfExport

The pdfExportModule is used for exporting the Gantt chart data to a PDF format. This module provides functionality for exporting the entire chart or specific data to a PDF document.

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.

Defaults to null

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.

Defaults to null

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.

Defaults to null

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.

Defaults to false

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.

Defaults to false

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.

Defaults to null

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.

Defaults to null

resources

object[]

Defines the collection of resources assigned to the project.

Defaults to []

rowDragAndDropModule

RowDD

The rowDragAndDropModule manages the row reordering functionality in the Gantt chart. It allows users to drag and drop rows to reorder tasks within the Gantt chart view.

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.

Defaults to 36

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[]

Defines the collection of segments assigned to tasks in the Gantt chart.

Defaults to []

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.

Defaults to -1

selectionModule

Selection

The selectionModule is used to manipulate selection operation in the Gantt chart.

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');

Defaults to {mode: ‘Row’, type: ‘Single’}

showColumnMenu

boolean

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

Defaults to false

showInlineNotes

boolean

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

Defaults to false

showOverAllocation

boolean

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

Defaults to false

sortModule

Sort

The sortModule is used to manipulate sorting operation in Gantt.

sortSettings

SortSettingsModel

Configures the sort settings for the Gantt chart.

    <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');

Defaults to {columns:[]}

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');

taskFields

TaskFieldsModel

Defines the mapping properties to extract task-related values, such as ID, start date, end date, duration, and progress, from the data source. This allows the Gantt chart to properly map the provided data to the corresponding task fields and render them accordingly.

    <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.

Defaults to ‘Auto’

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.

Defaults to fixedUnit

taskbarHeight

number

Defines height of the taskbar element in the Gantt chart.

Defaults to null

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');

Defaults to null

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

Renders customized html elements for timeline cell from the given template.

Defaults to null

timezone

string

By default, task schedule dates are calculated with system time zone. If the Gantt chart is assigned with a specific time zone, then schedule dates are calculated based on the given time zone date value.

Defaults to null

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.

Defaults to null

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');

Defaults to { showTooltip: true }

treeColumnIndex

number

To define expander column index in Grid.

Defaults to 0

undoRedoActions

GanttAction[]

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

Defaults to [‘Sorting’, ‘Add’, ‘ColumnReorder’, ‘ColumnResize’, ‘ColumnState’, ‘Delete’, ‘Edit’, ‘Filtering’, ‘Indent’, ‘Outdent’, ‘NextTimeSpan’, ‘PreviousTimeSpan’, ‘RowDragAndDrop’, ‘TaskbarDragAndDrop’, ‘Search’, ‘ZoomIn’, ‘ZoomOut’, ‘ZoomToFit’]

undoRedoModule

UndoRedo

The undoRedoModule manages the undo and redo functionality in the Gantt chart.

undoRedoStepsCount

number

Defines number of undo/redo actions that should be stored.

Defaults to 10

updateOffsetOnTaskbarEdit

boolean

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

Defaults to true

validateManualTasksOnLinking

boolean

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

Defaults to false

viewType

ViewType

Defines the view type of the Gantt.

Defaults to ‘ProjectView’

virtualScrollModule

VirtualScroll

The virtualScrollModule is used to handle virtual scroll in Gantt.

weekWorkingTime

WeekWorkingTimeModel[]

Specifies unique working hours for each weekday in gantt chart to tailor schedules precisely.

width

number | string

Defines the width of the Gantt component container.

Defaults to ‘auto’

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.

Defaults to hour

workWeek

string[]

Defines workweek of project.

Defaults to [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’]

zoomingLevels

ZoomTimelineSettings[]

Configure zooming levels of Gantt Timeline.

Defaults to []

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

addPredecessor

To add dependency for Task.

Returns void

addRecord

Method to add record.

Returns void

appendTo

Appends the control within the given HTML element

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

cancelEdit

Cancels the current edit operation and reverts the changes made during editing.

Returns void

changeTaskMode

To change the mode of a record.

Returns void

clearFiltering

Clears the filtered columns in Gantt. Can also be used to clear filtering of a specific column in Gantt.

Returns void

clearRedoCollection

Clears the stack collection for redo action.

Returns void

clearSelection

Deselects the current selected rows and cells.

Returns void

clearSorting

Clears all the sorted columns of the Gantt.

Returns void

clearUndoCollection

Clears the stack collection for undo action.

Returns void

collapseAll

Method to collapse all the rows of Gantt.

Returns void

collapseByID

Collapse the record by id value.

Returns void

collapseByIndex

Collapse the record by index value.

Returns void

convertToMilestone

Method to convert task data to milestone data.

Returns void

csvExport

Export Gantt data to CSV file.

Returns Promise

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

deleteRecord

Method to delete record.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

enableItems

Enables or disables ToolBar items.

Returns void

excelExport

Export Gantt data to Excel file(.xlsx).

Returns Promise

expandAll

Method to expand all the rows of Gantt.

Returns void

expandByID

Expand the record by task id.

Returns void

expandByIndex

Expand the records by index value.

Returns void

filterByColumn

Filters TreeGrid row by column name with the given options.

Returns void

fitToProject

To show all project task in available chart width.

Returns void

getCriticalTasks

To get all the critical tasks in Gantt.

Returns IGanttData[]

getDurationString

Get duration value as string combined with duration and unit values.

Returns string

getExpandedRecords

Get expanded records from given record collection.

Returns IGanttData[]

getGanttColumns

Gets the Gantt columns.

Returns ColumnModel[]

getGridColumns

Gets the columns from the TreeGrid.

Returns Column[]

getLocalData

Returns the persistence data for component

Returns any

getRecordByID

Method to get record by id value.

Returns IGanttData

getRedoActions

To retrieve the collection of actions to reapply. modifiedRecords - retrieves the modified records. action - shows the current performed action such as ‘sorting’,‘columnReorder’,‘columnResize’,‘progressResizing’,‘rightResizing’,‘leftResizing’,‘add’,‘delete’,‘search’,‘filtering’,‘zoomIn’,‘zoomOut’,‘zoomToFit’,‘columnState’,‘previousTimeSpan’,‘nextTimeSpan’,‘indent’,‘outdent’,‘rowDragAndDrop’,‘taskbarDragAndDrop’,‘dialogEdit’

Returns Object[]

getRootElement

Returns the route element of the component

Returns HTMLElement

getRowByID

Method to get the row element by task id.

Returns HTMLElement

getRowByIndex

Method to get chart row value by index.

Returns HTMLElement

getTaskByUniqueID

Method to get task by uniqueId value.

Returns IGanttData

getTaskbarHeight

Method to get taskbarHeight.

Returns number

getUndoActions

To retrieve the collection of previously recorded actions. This method returns an object as a collection that holds the following details. modifiedRecords - retrieves the modified records. action - shows the current performed action such as ‘sorting’,‘columnReorder’,‘columnResize’,‘progressResizing’,‘rightResizing’,‘leftResizing’,‘add’,‘delete’,‘search’,‘filtering’,‘zoomIn’,‘zoomOut’,‘zoomToFit’,‘columnState’,‘previousTimeSpan’,‘nextTimeSpan’,‘indent’,‘outdent’,‘rowDragAndDrop’,‘taskbarDragAndDrop’,‘dialogEdit’

Returns Object[]

getWorkString

Get work value as string combined with work and unit values.

Returns string

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hideColumn

Hides one or more columns in the Gantt chart based on the specified column names or header texts.

Returns void

hideSpinner

Method used to hide spinner.

Returns void

indent

To indent the level of selected task to the hierarchical Gantt task.

Returns void

mergeTask

Merge the split taskbar with the given segment indexes.

Returns void

nextTimeSpan

To update timeline at end point with one unit.

Returns void

openAddDialog

Method to open Add dialog.

Returns void

openEditDialog

Method to open Edit dialog.

Returns void

outdent

To outdent the level of selected task from the hierarchical Gantt task.

Returns void

pdfExport

Export Gantt data to PDF document.

Returns Promise

previousTimeSpan

Updates the Gantt timeline to the previous time span by one unit.

Returns void

redo

Initiates a redo action to reapply the most recent undone change performed.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

removePredecessor

To remove dependency from task.

Returns void

removeSortColumn

To remove sorted records of particular column.

Returns void

reorderColumns

Changes the TreeGrid column positions by field names.

Returns void

reorderRows

Reorder the rows based on given indexes and position.

Returns void

scrollToDate

To move horizontal scroll bar of Gantt to specific date.

Returns void

scrollToTask

To move horizontal scroll bar of Gantt to specific task id.

Returns void

search

Method to perform search action in Gantt.

Returns void

selectCell

Selects a cell by the given index.

Returns void

selectCells

Selects a collection of cells by row and column indexes.

Returns void

selectRow

Selects a row by given index.

Returns void

selectRows

Selects a collection of rows by indexes.

Returns void

setScrollTop

To set scroll top for chart scroll container.

Returns void

setSplitterPosition

Method to set splitter position.

Returns void

showColumn

Shows a column by its column name.

Returns void

showCriticalPath

To render the critical path tasks in Gantt.

Returns void

showSpinner

Method used to show spinner.

Returns void

sortColumn

Sorts a column with the given options.

Returns void

splitTask

Splits the taskbar of a specified task into segments based on the given date.

Returns void

undo

Initiates an undo action to revert the most recent change performed.

Returns void

updateChartScrollOffset

To update the horizontal (left) and vertical (top) scroll positions of the Gantt chart.

Returns void

updateDataSource

Method to update data source.

Returns void

updatePredecessor

To modify current dependency values of Task by task id.

Returns void

updateProjectDates

To validate project start date and end date.

Returns void

updateRecordByID

Method to update record by ID.

Returns void

updateRecordByIndex

Method to update record by Index.

Returns void

updateTaskId

To update existing taskId with new unique Id.

Returns void

zoomIn

To perform Zoom in action on Gantt timeline.

Returns void

zoomOut

To perform zoom out action on Gantt timeline.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

actionBegin

EmitType<``Object|PageEventArgs|FilterEventArgs|SortEventArgs|ITimeSpanEventArgs|IDependencyEventArgs|ITaskAddedEventArgs|ZoomEventArgs>

Triggers when Gantt actions such as sorting, filtering, searching etc., starts.

actionComplete

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

Triggers when Gantt actions such as sorting, filtering, searching etc. are completed.

actionFailure

EmitType<FailureEventArgs>

Triggers when actions are failed.

beforeExcelExport

EmitType<Object>

Triggers before Gantt data is exported to Excel file.

beforePdfExport

EmitType<Object>

Triggers before Gantt data is exported to PDF document.

beforeTooltipRender

EmitType<BeforeTooltipRenderEventArgs>

Triggers before tooltip get rendered.

cellDeselected

EmitType<CellDeselectEventArgs>

Triggers when a particular selected cell is deselected.

cellDeselecting

EmitType<CellDeselectEventArgs>

Triggers before the selected cell is deselecting.

cellEdit

EmitType<CellEditArgs>

This will be triggered a cell get begins to edit.

cellSelected

EmitType<CellSelectEventArgs>

Triggers after a cell is selected.

cellSelecting

EmitType<CellSelectingEventArgs>

Triggers before any cell selection occurs.

collapsed

EmitType<ICollapsingEventArgs>

This will be triggered after the row getting collapsed.

collapsing

EmitType<ICollapsingEventArgs>

This will be triggered before the row getting collapsed.

columnDrag

EmitType<ColumnDragEventArgs>

Triggers when column header element is dragged (moved) continuously.

columnDragStart

EmitType<ColumnDragEventArgs>

Triggers when column header element drag (move) starts.

columnDrop

EmitType<ColumnDragEventArgs>

Triggers when a column header element is dropped on the target column.

columnMenuClick

EmitType<ColumnMenuClickEventArgs>

Triggers when click on column menu.

columnMenuOpen

EmitType<ColumnMenuOpenEventArgs>

Triggers before column menu opens.

contextMenuClick

EmitType<CMenuClickEventArgs>

Triggers when click on context menu.

contextMenuOpen

EmitType<CMenuOpenEventArgs>

Triggers before context menu opens.

created

EmitType<Object>

Triggers when the component is created.

dataBound

EmitType<Object>

Triggers when data source is populated in the Grid.

dataStateChange

EmitType<DataStateChangeEventArgs>

Triggers when the Gantt actions such as Sorting, Editing etc., are done. In this event,the current view data and total record count should be assigned to the dataSource based on the action performed.

destroyed

EmitType<Object>

Triggers when the component is destroyed.

endEdit

EmitType<ITaskbarEditedEventArgs>

This will be triggered when a task get saved by cell edit.

excelExportComplete

EmitType<ExcelExportCompleteArgs>

Triggers after Gantt data is exported to Excel file.

excelHeaderQueryCellInfo

EmitType<ExcelHeaderQueryCellInfoEventArgs>

Triggers before exporting each header cell to Excel file. You can also customize the Excel cells.

excelQueryCellInfo

EmitType<ExcelQueryCellInfoEventArgs>

Triggers before exporting each cell to Excel file. You can also customize the Excel cells.

expanded

EmitType<ICollapsingEventArgs>

This will be triggered after the row getting expanded.

expanding

EmitType<ICollapsingEventArgs>

This will be triggered before the row getting expanded.

headerCellInfo

EmitType<HeaderCellInfoEventArgs>

This will be triggered before the header cell element is appended to the Grid element.

load

EmitType<Object>

Triggered before the Gantt control gets rendered.

onMouseMove

EmitType<IMouseMoveEventArgs>

This event will be triggered when mouse move on Gantt.

onTaskbarClick

EmitType<ITaskbarClickEventArgs>

This event will be triggered when click on taskbar element.

pdfColumnHeaderQueryCellInfo

EmitType<PdfColumnHeaderQueryCellInfoEventArgs>

Triggers before exporting each header cell to PDF document. You can also customize the PDF cells.

pdfExportComplete

EmitType<Object>

Triggers after TreeGrid data is exported to PDF document.

pdfQueryCellInfo

EmitType<PdfQueryCellInfoEventArgs>

Triggers before exporting each cell to PDF document. You can also customize the PDF cells.

pdfQueryTaskbarInfo

EmitType<Object>

Triggers before exporting each taskbar to PDF document. You can also customize the taskbar.

pdfQueryTimelineCellInfo

EmitType<PdfQueryTimelineCellInfoEventArgs>

Triggers before exporting each cell to PDF document. You can also customize the PDF cells.

queryCellInfo

EmitType<QueryCellInfoEventArgs>

This will be triggered before the header cell element is appended to the Grid element.

queryTaskbarInfo

EmitType<IQueryTaskbarInfoEventArgs>

This will be triggered after the taskbar element is appended to the Gantt element.

recordDoubleClick

EmitType<RecordDoubleClickEventArgs>

This event will be triggered when double click on record.

resizeStart

EmitType<ResizeArgs>

Triggers when column resize starts.

resizeStop

EmitType<ResizeArgs>

Triggers when column resize ends.

resizing

EmitType<ResizeArgs>

Triggers on column resizing.

rowDataBound

EmitType<RowDataBoundEventArgs>

This will be triggered before the row element is appended to the Grid element.

rowDeselected

EmitType<RowDeselectEventArgs>

Triggers when a selected row is deselected.

rowDeselecting

EmitType<RowDeselectEventArgs>

Triggers before deselecting the selected row.

rowDrag

EmitType<RowDragEventArgs>

Triggers when row elements are dragged (moved) continuously.

rowDragStart

EmitType<RowDragEventArgs>

Triggers when row element’s drag(move) starts.

rowDragStartHelper

EmitType<RowDragEventArgs>

Triggers when row element’s before drag(move).

rowDrop

EmitType<RowDragEventArgs>

Triggers when row elements are dropped on the target row.

rowSelected

EmitType<RowSelectEventArgs>

Triggers after row selection occurs.

rowSelecting

EmitType<RowSelectingEventArgs>

Triggers before row selection occurs.

splitterResizeStart

EmitType<ResizeEventArgs>

Triggers when splitter resizing starts.

splitterResized

EmitType<ISplitterResizedEventArgs>

Triggers when splitter resizing action completed.

splitterResizing

EmitType<ResizingEventArgs>

Triggers when splitter bar was dragging.

taskbarEdited

EmitType<ITaskbarEditedEventArgs>

Triggered when a taskbar is dragged and dropped into a new position on the Gantt chart.

taskbarEditing

EmitType<ITaskbarEditedEventArgs>

Triggered when a taskbar is in the dragging state on the Gantt chart.

toolbarClick

EmitType<ClickEventArgs>

Triggers when toolbar item was clicked.