GanttComponent

23 Sep 202524 minutes to read

ejs-gantt represents the Angular Gantt Component.

<ejs-gantt [dataSource]='data' allowSelection='true' allowSorting='true'></ejs-gantt>

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.

    <ejs-gantt [addDialogFields]="addDialogFields"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public addDialogFields: object[];
    public ngOnInit(): void {
        this.addDialogFields = [
            { type: 'General', headerText: 'General', fields: ['TaskID', 'TaskName'] },
            { type: 'Resources' },
            { type: 'Dependency' },
            { type: 'Notes'}
        ];
    }
}

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.

    <ejs-gantt [columns]="columns"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public columns: object[];
    public ngOnInit(): void {
        this.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' }
        ];
    }
}

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.

    <ejs-gantt [contextMenuItems]="contextMenuItems"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { ContextMenuItemModel } from '@syncfusion/ej2-grids';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public contextMenuItems: (string | ContextMenuItemModel)[];
    public ngOnInit(): void {
        this.contextMenuItems = ['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,
        ];
    }
}

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.

    <ejs-gantt [dataSource]="data"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public data: object[];
    public ngOnInit(): void {
        // Hierarchical data binding.
        this.data =  [
            {
                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).
        this.data =  [
            { 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
        this.data = new DataManager({
            url: 'https://ej2services.syncfusion.com/production/web-services/api/GanttData',
            adaptor: new WebApiAdaptor,
            crossDomain: true
        });
    }
}

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.

    <ejs-gantt [dayWorkingTime]="dayWorkingTime"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    piblic dayWokringTime: object[];
    public ngOnInit(): void {
        this.dayWorkingTime = [{ from: 9, to: 18}];
    }
}

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.

    <ejs-gantt [editDialogFields]="editDialogFields"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public editDialogFields: object[];
    public ngOnInit(): void {
        this.editDialogFields = [
            { type: 'General', headerText: 'General', fields: ['TaskID', 'TaskName'] },
            { type: 'Resources' },
            { type: 'Dependency' },
            { type: 'Notes'}
        ];
    }
}

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.

    <ejs-gantt [editSettings]="editSettings"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { EditSettingsModel } from '@syncfusion/ej2-angular-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public editSettings: EditSettingsModel;
    public ngOnInit(): void {
        this.editSettings = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            mode:'Auto',
            newRowPosition: 'Top',
            showDeleteConfirmDialog: true
        };
    }
}

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

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.

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

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.

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

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.

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.

    <ejs-gantt [eventMarkers]="eventMarkers"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public eventMarkers : object[];
    public ngOnInit(): void {
        this.eventMarkers = [
            {
                day: new Date('04/10/2019'),
                label: 'Project approval and kick-off',
                cssClass: 'e-custom-event-marker',
            }
        ];
    }
}

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.

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.

    <ejs-gantt [filterSettings]="filterSettings"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public filterSettings: object;
    public ngOnInit(): void {
        this.filterSettings = {
            columns: [{ field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' },{ field: 'TaskID', matchCase: false, operator: 'equal', predicate: 'and', value: 2 }],
            ignoreAccent: true
        };
    }
}

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.

    <ejs-gantt [holidays] = "holidays"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public holidays: object[];
    public ngOnInit(): void {
        this.holidays = [{
            from: "04/04/2019",
            to:"04/05/2019",
            label: " Public holidays",
            cssClass:"e-custom-holiday"
        }];
    }
}

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.

    <ejs-gantt [labelSettings]="labelSettings"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public labelSettings: object;
    public ngOnInit(): void {
        this.labelSettings = {
            leftLabel: 'Task ID: ${taskData.TaskID}',
            rightLabel:'Progress Value: ${taskData.Progress}',
            taskLabel: '${Progress}%'
        }
    }
}

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 any

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 any

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.

  <ejs-gantt id="ganttDefault">
    <ng-template #parentTaskbarTemplate let-data>
      <div
        class="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar"
        [style.width.px]="data.ganttProperties.width"
        style="height:22px;margin-top:-1px;"
        tabindex="-1"
      >
        <div
          class="e-gantt-parent-progressbar-inner-div e-gantt-parent-progressbar"
          style="border-style:solid;border-top-right-radius:0px;border-bottom-right-radius:0px;height:100%;"
          [style.width.px]="calculateProgressWidth(data)"
        >
          <span
            class="e-task-label"
            style="line-height:21px; text-align:left;display:inline-block;width:122px; height:22px;"
            >{{ data.TaskName }}</span
          >
        </div>
      </div>
    </ng-template>
  </ejs-gantt>

import { Component, ViewEncapsulation, OnInit,IGanttData } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
   public calculateProgressWidth(data:IGanttData) {
    // Calculate the progress width based on the taskbar width and progress value
    return (data.ganttProperties.progress * data.ganttProperties.width) / 100;
   }
   public ngOnInit(): void {

   }
}

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.

    <ejs-gantt [searchSettings]="searchSettings"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { SearchSettingsModel } from '@syncfusion/ej2-angular-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public searchSettings: SearchSettingsModel;
    public ngOnInit(): void {
        this.searchSettings = { fields: ['TaskName'], operator: 'contains', key: 'product', ignoreCase: true hierarchyMode: 'Parent'}
    }
}

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.

    <ejs-gantt [selectionSettings]="selectionSettings"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public selectionSettings: SelectionSettingsModel;
    public ngOnInit(): void {
        this.selectionSettings = {
            mode: 'Row',
            type: 'Multiple'
        };
    }
}

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.

    <ejs-gantt [sortSettings]="sortSettings"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public sortSettings: object;
    public ngOnInit(): void {
        this.sortSettings = { columns: [{ field: 'TaskID', direction: 'Descending' }], allowUnsort: true };
    }
}

Defaults to {columns:[]}

splitterSettings SplitterSettingsModel

Configures the splitter settings for the Gantt chart.

    <ejs-gantt [splitterSettings]="splitterSettings"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public splitterSettings: object;
    public ngOnInit(): void {
        this.splitterSettings = {
            position: "50%",
            minimum: "200",
            separatorSize: 5,
            view: 'Default'
        }
    }
}

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.

    <ejs-gantt [taskFields]="taskSettings"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public taskSettings: object;
    public ngOnInit(): void {
         this.taskSettings = {
            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',
        };
    }
}

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 any

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.

  <ejs-gantt id="ganttDefault">
    <ng-template #taskbarTemplate let-data>
      <div
        class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar"
        style="height:22px; margin-top :-1px"
        tabindex="-1"
        [style.width.px]="data.ganttProperties.width"
      >
        <div
          class="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar"
          style="border-style:solid;height:100%;border-top-right-radius:0px;border-bottom-right-radius:0px;"
          [style.width.px]="calculateProgressWidth(data)"
        >
          <span
            class="e-task-label"
            style="line-height:21px; text-align:left;display:inline-block;width:122px; height:22px;"
            >{{ data.TaskName }}</span
          >
        </div>
      </div>
    </ng-template>
  </ejs-gantt>

import { Component, ViewEncapsulation, OnInit,IGanttData } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
   public calculateProgressWidth(data:IGanttData) {
    // Calculate the progress width based on the taskbar width and progress value
    return (data.ganttProperties.progress * data.ganttProperties.width) / 100;
   }
   public ngOnInit(): void {

   }
}

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.

    <ejs-gantt [timelineSettings]="timelineSettings"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public timelineSettings: object;
    public ngOnInit(): void {
        this.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,
            }
        };
    }
}

timelineTemplate any

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

    <ejs-gantt [tooltipSettings]="tooltipSettings"></ejs-gantt>

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';

@Component({
    selector: 'app-root',
    templateUrl: "app.component.html",
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public tooltipSettings: object;
    public ngOnInit(): void {
        this.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>'
        }
    }
}

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

addPredecessor

To add dependency for Task.

Parameter	Type	Description
id	`number` \| `string`	Defines the ID of data to modify.
predecessorString	`string`	Defines the predecessor string to add.

Returns void

addRecord

Method to add record.

Parameter	Type	Description
data (optional)	`Object[]` \| `IGanttData` \| `Object`	Defines record to add.
rowPosition (optional)	`RowPosition`	Defines the position of row.
rowIndex (optional)	`number`	Defines the row index.

Returns void

autoFitColumns

Adjusts the width of specified columns to fit their content, preventing wrapping or truncation.
Hidden columns are ignored. For initial rendering, call this method during the dataBound event.

Parameter	Type	Description
fieldNames (optional)	`string` \| `string[]`	The name(s) of the column(s) to auto-fit. Accepts a single column name or an array of column names.

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.

Parameter	Type	Description
data	`Object`	Use to change the TaskMode either manual, auto or custom.

Returns void

clearFiltering

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

Parameter	Type	Description
fields (optional)	`string[]`	Defines the specific column to remove filter.

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.

Parameter	Type	Description
id	`number` \| `string`	Defines the id of task.

Returns void

collapseByIndex

Collapse the record by index value.

Parameter	Type	Description
index	`number`	Defines the index of row.

Returns void

convertToMilestone

Method to convert task data to milestone data.

Parameter	Type	Description
id	`string`	Defines id of record.

Returns void

csvExport

Export Gantt data to CSV file.

Parameter	Type	Description
excelExportProperties (optional)	`ExcelExportProperties`	Defines the export properties of the Gantt.
isMultipleExport (optional)	`boolean`	Define to enable multiple export.
workbook (optional)	`any`	Defines the Workbook if multiple export is enabled.
isBlob (optional)	`boolean`	If ‘isBlob’ set to true, then it will be returned as blob data.

Returns Promise

deleteRecord

Method to delete record.

Parameter	Type	Description
taskDetail	`number` \| `string` \| `number[]` \| `string[]` \| `IGanttData` \| `IGanttData[]`	Defines the details of data to delete.

Returns void

enableItems

Enables or disables ToolBar items.

Parameter	Type	Description
items	`string[]`	Defines the collection of itemID of ToolBar items.
isEnable	`boolean`	Defines the items to be enabled or disabled.

Returns void

excelExport

Export Gantt data to Excel file(.xlsx).

Parameter	Type	Description
excelExportProperties (optional)	`ExcelExportProperties`	Defines the export properties of the Gantt.
isMultipleExport (optional)	`boolean`	Define to enable multiple export.
workbook (optional)	`any`	Defines the Workbook if multiple export is enabled.
isBlob (optional)	`boolean`	If ‘isBlob’ set to true, then it will be returned as blob data.

Returns Promise

expandAll

Method to expand all the rows of Gantt.

Returns void

expandByID

Expand the record by task id.

Parameter	Type	Description
id	`number` \| `string`	Defines the id of task.

Returns void

expandByIndex

Expand the records by index value.

Parameter	Type	Description
index	`number[]` \| `number`	Defines the index of rows to be expand.

Returns void

filterByColumn

Filters TreeGrid row by column name with the given options.

Parameter	Type	Description
fieldName	`string`	Defines the field name of the column.
filterOperator	`string`	Defines the operator to filter records.
filterValue	`string` \| `number` \| `Date` \| `boolean` \| `number[]` \| `string[]` \| `Date[]` \| `boolean[]`	Defines the value used to filter records.
predicate (optional)	`string`	Defines the relationship between one filter query and another by using AND or OR predicate.
matchCase (optional)	`boolean`	If match case is set to true, TreeGrid filters the records with exact match.if false, it filters case insensitive records (uppercase and lowercase letters treated the same).
ignoreAccent (optional)	`boolean`	If ignoreAccent set to true, then filter ignores the diacritic characters or accents while filtering.

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

getCurrentViewData

Retrieves the current view data, reflecting the latest state after filtering, sorting, and CRUD operations.

Returns Object[]

getDurationString

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

Parameter	Type	Description
duration	`number`	Defines the duration.
durationUnit	`string`	Defines the duration unit.

Returns string

getExpandedRecords

Get expanded records from given record collection.

Parameter	Type	Description
records	`IGanttData[]`	Defines record collection.

Returns IGanttData[]

getGanttColumns

Gets the Gantt columns.

Returns ColumnModel[]

getGridColumns

Gets the columns from the TreeGrid.

Returns Column[]

getRecordByID

Method to get record by id value.

Parameter	Type	Description
id	`string`	Defines the id of record.

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

getRowByID

Method to get the row element by task id.

Parameter	Type	Description
id	`string` \| `number`	Defines the id of task.

Returns HTMLElement

getRowByIndex

Method to get chart row value by index.

Parameter	Type	Description
index	`number`	Defines the index of row.

Returns HTMLElement

getTaskByUniqueID

Method to get task by uniqueId value.

Parameter	Type	Description
id	`string`	Defines the task id.

Returns IGanttData

getTaskInfo

Retrieves the internal Gantt properties for a task using its Task ID.
This method provides access to task data such as taskbar width, left position, segments collection etc.,.

Parameter	Type	Description
taskId	`string`	The unique identifier of the task.

Returns IGanttTaskInfo

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.

Parameter	Type	Description
work	`number`	Defines the work value.
workUnit	`string`	Defines the work unit.

Returns string

hideColumn

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

Parameter	Type	Description
keys	`string` \| `string[]`	Defines a single or collection of column names.
hideBy (optional)	`string`	Defines the column key either as field name or header text.

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.

Parameter	Type	Description
taskId	`number` \| `string`	Defines the id of a task to be split.
segmentIndexes	`Object[]`	Defines the object array of indexes which must be merged.

Returns void

nextTimeSpan

To update timeline at end point with one unit.

Parameter	Type	Description
mode (optional)	`string`	Render next span of Timeline.

Returns void

openAddDialog

Method to open Add dialog.

Returns void

openEditDialog

Method to open Edit dialog.

Parameter	Type	Description
taskId (optional)	`number` \| `string`	Defines the id of task.

Returns void

outdent

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

Returns void

pdfExport

Export Gantt data to PDF document.

Parameter	Type	Description
pdfExportProperties (optional)	`PdfExportProperties`	Defines the export properties of the Gantt.
isMultipleExport (optional)	`boolean`	Define to enable multiple export.
pdfDoc (optional)	`Object`	Defined the Pdf Document if multiple export is enabled.
isBlob (optional)	`boolean`	If the ‘isBlob’ parameter is set to true, the method returns PDF data as a blob instead of exporting it as a down-loadable PDF file. The default value is false.

Returns Promise

previousTimeSpan

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

Parameter	Type	Description
mode (optional)	`string`	Render previous span of Timeline.

Returns void

redo

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

Returns void

removePredecessor

To remove dependency from task.

Parameter	Type	Description
id	`number` \| `string`	Defines the ID of the task from which the dependency will be removed.

Returns void

removeSortColumn

To remove sorted records of particular column.

Parameter	Type	Description
columnName	`string`	Defines the sorted column name.

Returns void

reorderColumns

Changes the TreeGrid column positions by field names.

Parameter	Type	Description
fromFName	`string` \| `string[]`	Defines origin field name.
toFName	`string`	Defines destination field name.

Returns void

reorderRows

Reorder the rows based on given indexes and position.

Parameter	Type	Description
fromIndexes	`number[]`	Defines the indexes of the dragged records.
toIndex	`number`	Defines the index where the dragged rows will be dropped.
position	`string`	Defines the position of the dropped row.

Returns void

scrollToDate

To move horizontal scroll bar of Gantt to specific date.

Parameter	Type	Description
date	`string`	Defines the date to which the Gantt chart should scroll.

Returns void

scrollToTask

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

Parameter	Type	Description
taskId	`string`	Defines the task id of data.

Returns void

search

Method to perform search action in Gantt.

Parameter	Type	Description
keyVal	`string`	Defines key value to search.

Returns void

selectCell

Selects a cell by the given index.

Parameter	Type	Description
cellIndex	`IIndex`	Defines the row and column indexes.
isToggle (optional)	`boolean`	If set to true, then it toggles the selection.

Returns void

selectCells

Selects a collection of cells by row and column indexes.

Parameter	Type	Description
rowCellIndexes	`ISelectedCell[]`	Specifies the row and column indexes.

Returns void

selectRow

Selects a row by given index.

Parameter	Type	Description
index	`number`	Defines the row index.
isToggle (optional)	`boolean`	If set to true, then it toggles the selection.

Returns void

selectRows

Selects a collection of rows by indexes.

Parameter	Type	Description
records	`number[]`	Defines the collection of row indexes.

Returns void

setScrollTop

To set scroll top for chart scroll container.

Parameter	Type	Description
scrollTop	`number`	Defines scroll top value for scroll container.

Returns void

setSplitterPosition

Method to set splitter position.

Parameter	Type	Description
value	`string` \| `number`	Define value to splitter settings property.
type	`string`	Defines name of internal splitter settings property.

Returns void

showColumn

Shows a column by its column name.

Parameter	Type	Description
keys	`string` \| `string[]`	Defines a single or collection of column names.
showBy (optional)	`string`	Defines the column key either as field name or header text.

Returns void

showSpinner

Method used to show spinner.

Returns void

sortColumn

Sorts a column with the given options.

Parameter	Type	Description
columnName	`string`	Defines the column name to be sorted.
direction	`SortDirection`	Defines the direction of sorting field.
isMultiSort (optional)	`boolean`	Specifies whether the previous sorted columns are to be maintained.

Returns void

splitTask

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

Parameter	Type	Description
taskId	`number` \| `string`	Defines the id of a task to be split.
splitDate	`Date` \| `Date[]`	Defines in which date the taskbar must be split up.

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.

Parameter	Type	Description
left	`number`	Defines the scroll left value of chart side.
top	`number`	Defines the scroll top value of chart side.

Returns void

updateDataSource

Method to update data source.

Parameter	Type	Description
dataSource	`Object[]`	Defines a collection of data.
args	`object`	Defines the projectStartDate and projectEndDate values.

Returns void

updatePredecessor

To modify current dependency values of Task by task id.

Parameter	Type	Description
id	`number` \| `string`	Defines the ID of data to modify.
predecessorString	`string`	Defines the predecessor string to update.

Returns void

updateProjectDates

To validate project start date and end date.

Parameter	Type	Description
startDate	`Date`	Defines start date of project.
endDate	`Date`	Defines end date of project.
isTimelineRoundOff	`boolean`	Defines project start date and end date need to be round off or not.
isFrom (optional)	`string`	Defines whether the call originates from a public method action or a taskbar editing action.

Returns void

updateRecordByID

Method to update record by ID.

Parameter	Type	Description
data	`Object`	Defines the data to modify.

Returns void

updateRecordByIndex

Method to update record by Index.

Parameter	Type	Description
index	`number`	Defines the index of data to modify.
data	`Object`	Defines the data to modify.

Returns void

updateTaskId

To update existing taskId with new unique Id.

Parameter	Type	Description
currentId	`number` \| `string`	Defines the current Id of the record.
newId	`number` \| `string`	Defines the new Id of the record.

Returns void

zoomIn

To perform Zoom in action on Gantt timeline.

Returns void

zoomOut

To perform zoom out action on Gantt timeline.

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.

beforeDataBound EmitType<Object>

Triggers before the data is bound to the TreeGrid in the Gantt component.
This event is triggered before any visual elements (taskbars, rows, timelines) are rendered in the DOM.

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.

cellSave EmitType<CellSaveArgs>

Triggers before a cell’s value is saved in the Gantt chart.
This event allows cancellation of the save action.

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.

GanttComponent

Properties

UpdateOffsetOnTaskbarEdit boolean

addDialogFields AddDialogFieldSettingsModel[]

allowExcelExport boolean

allowFiltering boolean

allowKeyboard boolean

allowParentDependency boolean

allowPdfExport boolean

allowReordering boolean

allowResizing boolean

allowRowDragAndDrop boolean

allowSelection boolean

allowSorting boolean

allowTaskbarDragAndDrop boolean

allowTaskbarOverlap boolean

allowUnscheduledTasks boolean

autoCalculateDateScheduling boolean

autoFocusTasks boolean

baselineColor string

collapseAllParentTasks boolean

columnMenuItems []

columnMenuModule ColumnMenu

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

connectorLineBackground string

connectorLineWidth number

contextMenuItems ContextMenuItem[]|ContextMenuItemModel[]

contextMenuModule ContextMenu

criticalPathModule CriticalPath

currentZoomingLevel ZoomTimelineSettings

dataSource Object[]|DataManager|Object

dateFormat string

dayMarkersModule DayMarkers

dayWorkingTime DayWorkingTimeModel[]

disableHtmlEncode boolean

durationUnit DurationUnit

editDialogFields EditDialogFieldSettingsModel[]

editModule Edit

editSettings EditSettingsModel

enableAdaptiveUI boolean

enableAutoWbsUpdate boolean

enableContextMenu boolean

enableCriticalPath boolean

enableHover boolean

enableHtmlSanitizer boolean

enableImmutableMode boolean

enableMultiTaskbar boolean

enablePersistence boolean

enablePredecessorValidation boolean

enableRtl boolean

enableTimelineVirtualization boolean

enableUndoRedo boolean

enableVirtualMaskRow boolean

enableVirtualization boolean

enableWBS boolean

eventMarkers EventMarkerModel[]

excelExportModule ExcelExport

filterModule Filter

filterSettings FilterSettingsModel

gridLines GridLine

height number|string

highlightWeekends boolean

holidays HolidayModel[]

includeWeekend boolean

keyboardModule KeyboardEvents

labelSettings LabelSettingsModel

loadChildOnDemand boolean

loadingIndicator LoadingIndicatorModel

locale string

milestoneTemplate any

parentTaskbarTemplate any

pdfExportModule PdfExport

projectEndDate Date|string

projectStartDate Date|string

query Query

readOnly boolean

renderBaseline boolean

resourceFields ResourceFieldsModel

resourceIDMapping string

resourceNameMapping string