JavaScript
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

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 included in the add dialog. If the value was empty, then it will be calculated from taskSettings and columns value.

    <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 to Excel and CSV file.

Defaults to false

allowFiltering

boolean

Enables or disables filtering support in Gantt.

Defaults to false

allowKeyboard

boolean

Enables or disables the key board interaction of Gantt.

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 to PDF file.

Defaults to false

allowReordering

boolean

If allowReordering is set to true, Gantt 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

If allowResizing is set to true, Gantt columns can be resized.

Defaults to false

allowRowDragAndDrop

boolean

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

Defaults to false

allowSelection

boolean

If allowSelection is set to true, it allows selection of (highlight row) Gantt chart rows by clicking it.

Defaults to true

allowSorting

boolean

If allowSorting is set to true, it allows sorting of gantt chart tasks when column header is clicked.

Defaults to false

allowTaskbarDragAndDrop

boolean

Defines whether to enable or disable taskbar drag and drop.

Defaults to false

allowTaskbarOverlap

boolean

Defines whether taskbar to get overlapped or not.

Defaults to true

allowUnscheduledTasks

boolean

Enables or disables rendering of unscheduled tasks in Gantt.

Defaults to false

autoCalculateDateScheduling

boolean

Specifies whether to auto calculate start and end-date based on various factors such as working time, holidays, weekends, and predecessors.

Defaults to true

autoFocusTasks

boolean

Enables or disables the focusing the task bar on click action.

Defaults to true

baselineColor

string

Defines the baseline bar color.

Defaults to null

collapseAllParentTasks

boolean

If collapseAllParentTasks set to true, then root tasks are rendered with collapsed state.

Defaults to false

columnMenuItems

ColumnMenuItem[] | ColumnMenuItemModel[]

columnMenuItems defines both built-in and custom column menu items.

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.
  • Filter - Filter options will show based on filterSettings property.

Defaults to null

columnMenuModule

ColumnMenu

The columnMenuModule is used to manipulate column menu items in Gantt.

columns

Column[] | string[] | ColumnModel[]

Defines column collection displayed in grid If the columns declaration was empty then columns are automatically populated from taskSettings value.

    <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 background color of dependency lines.

Defaults to null

connectorLineWidth

number

Defines width of dependency lines.

Defaults to 1

contextMenuItems

ContextMenuItem[] | ContextMenuItemModel[]

contextMenuItems defines both built-in and custom context menu items.

    <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 used to invoke context menu in Gantt.

criticalPathModule

CriticalPath

The criticalPathModule is used to determine the critical path in Gantt.

currentZoomingLevel

ZoomTimelineSettings

Configures current zooming level of Gantt.

dataSource

Object[] | DataManager | Object

It is used to render Gantt chart rows and tasks. dataSource value was defined as array of JavaScript objects or instances of DataManager.

    <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 dateFormat for Gantt, given format is displayed in tooltip and Grid cells. By default, the format is based on the culture.

dayMarkersModule

DayMarkers

The dayMarkersModule is used to manipulate event markers operation in Gantt.

dayWorkingTime

DayWorkingTimeModel[]

Defines customized working time of project.

    <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, it encodes the HTML of the header and content cells.

Defaults to true

durationUnit

DurationUnit

durationUnit Specifies the duration unit for each tasks whether day or hour or minute.

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

Defaults to day

editDialogFields

EditDialogFieldSettingsModel[]

Defines the tabs and fields to be included in the edit dialog. If the value was empty, then it will be calculated from taskSettings and columns value.

    <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 is used to handle Gantt record manipulation.

editSettings

EditSettingsModel

Configures edit settings of Gantt.

    <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 will become adaptive to small screens, and be used for filtering and other features.

Defaults to false

enableContextMenu

boolean

If enableContextMenu is set to true, Enable context menu in Gantt.

Defaults to false

enableCriticalPath

boolean

It highlights the critical tasks in the Gantt Chart that affect the project’s end date.

Defaults to false

enableHtmlSanitizer

boolean

Specifies whether to display or remove the untrusted HTML values in the TreeGrid component. If enableHtmlSanitizer set to true, then it will sanitize any suspected untrusted strings and scripts before rendering them.

Defaults to true

enableImmutableMode

boolean

If enableImmutableMode is set to true, the Gantt Chart will reuse old rows if it exists in the new result instead of full refresh while performing the Gantt actions.

Defaults to false

enableMultiTaskbar

boolean

It enables to render the child taskbar on parent row for resource view Gantt.

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, it allows to validate the predecessor link.

Defaults to true

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableTimelineVirtualization

boolean

Loads project with large time span with better performance by initially rendering the timeline cells that are visible only within the current view and load subsequent timeline cells on horizontal scrolling.

Defaults to false

enableUndoRedo

boolean

Enables or disables undo or redo feature.

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 set to true, then the Gantt will render only the rows visible within the view-port. and load subsequent rows on vertical scrolling. This helps to load large dataset in Gantt.

Defaults to false

eventMarkers

EventMarkerModel[]

Defines events and status of project throughout the timeline.

    <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 to exporting Gantt data in excel format.

filterModule

Filter

The filterModule is used to manipulate filtering operation in Gantt.

filterSettings

FilterSettingsModel

Configures the filter settings for Gantt.

    <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 in tree grid and gantt chart.

Defaults to ‘Horizontal’

height

number | string

Defines the height of the Gantt component container.

Defaults to ‘auto’

highlightWeekends

boolean

If highlightWeekends set to true, then all weekend days are highlighted in week - day timeline mode.

Defaults to false

holidays

HolidayModel[]

Defines holidays presented in project timeline.

    <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 weekend days are considered as working day or not.

Defaults to false

keyboardModule

KeyboardEvents

The keyboardModule is used to manipulate keyboard interactions in Gantt.

labelSettings

LabelSettingsModel

Defines the right, left and inner task labels in task bar.

    <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 record on demand in remote data binding. Initially parent records are rendered in collapsed state.

Defaults to false

loadingIndicator

LoadingIndicatorModel

Configures the loading indicator of the Gantt Chart. Specifies whether to display spinner or shimmer effect during the waiting time on any actions performed in 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

The milestone template that renders customized milestone task from the given template.

Defaults to null

parentTaskbarTemplate

string | Function

The parent task bar template that renders customized parent task bars from the given template.

<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 to exporting Gantt data in PDF format.

projectEndDate

Date | string

Defines end date of the project, if projectEndDate value not set then it will be calculated from data source.

Defaults to null

projectStartDate

Date | string

Defines start date of the project, if projectStartDate value not set then it will be calculated from data source.

Defaults to null

query

Query

Defines the external Query that will be executed along with data processing.

Defaults to null

readOnly

boolean

If readOnly is set to true, Gantt cannot be edited.

Defaults to false

renderBaseline

boolean

If renderBaseline is set to true, then baselines are rendered for tasks.

Defaults to false

resourceFields

ResourceFieldsModel

Defines mapping properties to find resource values such as id, name, unit and group from resource collection.

resourceIDMapping

string

Defines mapping property to get resource id value from resource collection.

Defaults to null

resourceNameMapping

string

Defines mapping property to get resource name value from resource collection.

Defaults to null

resources

object[]

Defines resource collection assigned for projects.

Defaults to []

rowDragAndDropModule

RowDD

The rowDragandDrop is used to manipulate Row Reordering in Gantt.

rowHeight

number

Defines height value for grid rows and chart rows in Gantt.

Defaults to 36

searchSettings

SearchSettingsModel

Configures the search settings for Gantt.

    <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 segment collection assigned for tasks.

Defaults to []

selectedRowIndex

number

The selectedRowIndex allows you to select a row at initial rendering. You can also get the currently selected row index.

Defaults to -1

selectionModule

Selection

The selectionModule is used to manipulate selection operation in Gantt.

selectionSettings

SelectionSettingsModel

Configures the selection settings.

    <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, then it will enable the column menu options in each columns.

Defaults to false

showInlineNotes

boolean

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

Defaults to false

showOverAllocation

boolean

It enables to render the overallocation container for resource view Gantt.

Defaults to false

sortModule

Sort

The sortModule is used to manipulate sorting operation in Gantt.

sortSettings

SortSettingsModel

Configures the sort settings of the Gantt.

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

    <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 mapping properties to find task values such as id, start date, end date, duration and progress values from data source.

    <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 taskbar element in Gantt.

Defaults to null

taskbarTemplate

string | Function

The task bar template that renders customized child task bars from the given template.

   <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 Gantt chart assigned with specific time zone, then schedule dates are calculated as 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’,‘Search’]

undoRedoModule

UndoRedo

The undoRedoModule is used to undo or redo the actions performed in Gantt.

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.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

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

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

cancelEdit

Cancels edited state.

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

dataBind

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

Returns void

deleteRecord

Method to delete record.

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

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

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

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

getLocalData

Returns the persistence data for component

Returns any

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

getRootElement

Returns the route element of the component

Returns HTMLElement

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

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

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hideColumn

Hides a column by column name.

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

To update timeline at start point with 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

refresh

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

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

removePredecessor

To remove dependency from task.

Parameter Type Description
id number | string Defines the ID of task to modify.

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 Dragged record index.
toIndex number Defines the Dropped record index.
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 task date of data.

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

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

showCriticalPath

To render the critical path tasks in Gantt.

Parameter Type Description
isCritical boolean To checks whether to render critical path or not .

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

Split the taskbar into segment by 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 set scroll left and top in chart side.

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 .

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

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

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>

This will be triggered taskbar was dragged and dropped on new position.

taskbarEditing

EmitType<ITaskbarEditedEventArgs>

This event will be triggered when taskbar was in dragging state.

toolbarClick

EmitType<ClickEventArgs>

Triggers when toolbar item was clicked.

Previous
Next
Contents
Contents