Interface for a class Gantt
EmitType<``Object|PageEventArgs|FilterEventArgs|SortEventArgs|ITimeSpanEventArgs|IDependencyEventArgs|ITaskAddedEventArgs|ZoomEventArgs>
Triggers when Gantt actions such as sorting, filtering, searching etc., starts.
EmitType<``FilterEventArgs|SortEventArgs|ITaskAddedEventArgs|IKeyPressedEventArgs|ZoomEventArgs>
Triggers when Gantt actions such as sorting, filtering, searching etc. are completed.
EmitType<FailureEventArgs>
Triggers when actions are failed.
EmitType<Object>
Triggers before Gantt data is exported to Excel file.
EmitType<Object>
Triggers before Gantt data is exported to PDF document.
EmitType<BeforeTooltipRenderEventArgs>
Triggers before tooltip get rendered.
EmitType<CellDeselectEventArgs>
Triggers when a particular selected cell is deselected.
EmitType<CellDeselectEventArgs>
Triggers before the selected cell is deselecting.
This will be triggered a cell get begins to edit.
EmitType<CellSelectEventArgs>
Triggers after a cell is selected.
EmitType<CellSelectingEventArgs>
Triggers before any cell selection occurs.
EmitType<ICollapsingEventArgs>
This will be triggered after the row getting collapsed.
EmitType<ICollapsingEventArgs>
This will be triggered before the row getting collapsed.
EmitType<ColumnDragEventArgs>
Triggers when column header element is dragged (moved) continuously.
EmitType<ColumnDragEventArgs>
Triggers when column header element drag (move) starts.
EmitType<ColumnDragEventArgs>
Triggers when a column header element is dropped on the target column.
EmitType<ColumnMenuClickEventArgs>
Triggers when click on column menu.
EmitType<ColumnMenuOpenEventArgs>
Triggers before column menu opens.
EmitType<CMenuClickEventArgs>
Triggers when click on context menu.
EmitType<CMenuOpenEventArgs>
Triggers before context menu opens.
EmitType<Object>
Triggers when the component is created.
EmitType<Object>
Triggers when data source is populated in the Grid.
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.
EmitType<Object>
Triggers when the component is destroyed.
EmitType<ITaskbarEditedEventArgs>
This will be triggered when a task get saved by cell edit.
EmitType<ExcelExportCompleteArgs>
Triggers after Gantt data is exported to Excel file.
EmitType<ExcelHeaderQueryCellInfoEventArgs>
Triggers before exporting each header cell to Excel file. You can also customize the Excel cells.
EmitType<ExcelQueryCellInfoEventArgs>
Triggers before exporting each cell to Excel file. You can also customize the Excel cells.
EmitType<ICollapsingEventArgs>
This will be triggered after the row getting expanded.
EmitType<ICollapsingEventArgs>
This will be triggered before the row getting expanded.
EmitType<HeaderCellInfoEventArgs>
This will be triggered before the header cell element is appended to the Grid element.
EmitType<Object>
Triggered before the Gantt control gets rendered.
This event will be triggered when mouse move on Gantt.
EmitType<ITaskbarClickEventArgs>
This event will be triggered when click on taskbar element.
EmitType<PdfColumnHeaderQueryCellInfoEventArgs>
Triggers before exporting each header cell to PDF document. You can also customize the PDF cells.
EmitType<Object>
Triggers after TreeGrid data is exported to PDF document.
EmitType<PdfQueryCellInfoEventArgs>
Triggers before exporting each cell to PDF document. You can also customize the PDF cells.
EmitType<Object>
Triggers before exporting each taskbar to PDF document. You can also customize the taskbar.
EmitType<PdfQueryTimelineCellInfoEventArgs>
Triggers before exporting each cell to PDF document. You can also customize the PDF cells.
EmitType<QueryCellInfoEventArgs>
This will be triggered before the header cell element is appended to the Grid element.
EmitType<IQueryTaskbarInfoEventArgs>
This will be triggered after the taskbar element is appended to the Gantt element.
EmitType<RecordDoubleClickEventArgs>
This event will be triggered when double click on record.
EmitType<ResizeArgs>
Triggers when column resize starts.
EmitType<ResizeArgs>
Triggers when column resize ends.
EmitType<ResizeArgs>
Triggers on column resizing.
EmitType<RowDataBoundEventArgs>
This will be triggered before the row element is appended to the Grid element.
EmitType<RowDeselectEventArgs>
Triggers when a selected row is deselected.
EmitType<RowDeselectEventArgs>
Triggers before deselecting the selected row.
EmitType<RowDragEventArgs>
Triggers when row elements are dragged (moved) continuously.
EmitType<RowDragEventArgs>
Triggers when row element’s drag(move) starts.
EmitType<RowDragEventArgs>
Triggers when row element’s before drag(move).
EmitType<RowDragEventArgs>
Triggers when row elements are dropped on the target row.
Triggers after row selection occurs.
EmitType<RowSelectingEventArgs>
Triggers before row selection occurs.
EmitType<ResizeEventArgs>
Triggers when splitter resizing starts.
EmitType<ISplitterResizedEventArgs>
Triggers when splitter resizing action completed.
EmitType<ResizingEventArgs>
Triggers when splitter bar was dragging.
EmitType<ITaskbarEditedEventArgs>
This will be triggered taskbar was dragged and dropped on new position.
EmitType<ITaskbarEditedEventArgs>
This event will be triggered when taskbar was in dragging state.
EmitType<ClickEventArgs>
Triggers when toolbar item was clicked.
boolean
Specifies whether to update offset value on a task for all the predecessor edit actions.
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'); boolean
If allowExcelExport set to true, then it will allow the user to export Gantt to Excel and CSV file.
boolean
Enables or disables filtering support in Gantt.
boolean
Enables or disables the key board interaction of Gantt.
boolean
Specifies whether to allow dependency connection support for parent records.
boolean
If allowPdfExport set to true, then it will allow the user to export Gantt to PDF file.
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.
boolean
If allowResizing is set to true, Gantt columns can be resized.
boolean
If allowRowDragAndDrop set to true, then it will allow the user to perform drag and drop action in Gantt.
boolean
If allowSelection is set to true, it allows selection of (highlight row) Gantt chart rows by clicking it.
boolean
If allowSorting is set to true, it allows sorting of gantt chart tasks when column header is clicked.
boolean
Defines whether to enable or disable taskbar drag and drop.
boolean
Defines whether taskbar to get overlapped or not.
boolean
Enables or disables rendering of unscheduled tasks in Gantt.
boolean
Specifies whether to auto calculate start and end-date based on various factors such as working time, holidays, weekends, and predecessors.
boolean
Enables or disables the focusing the task bar on click action.
string
Defines the baseline bar color. @default null
boolean
If collapseAllParentTasks set to true, then root tasks are rendered with collapsed state.
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. 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'); string
Defines background color of dependency lines.
number
Defines width of dependency lines.
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'); 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'); string
Specifies the dateFormat for Gantt, given format is displayed in tooltip and Grid cells. By default, the format is based on the culture.
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'); boolean
If disableHtmlEncode is set to true, it encodes the HTML of the header and content cells.
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. 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');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'); boolean
If enableContextMenu is set to true, Enable context menu in Gantt.
boolean
It highlights the critical tasks in the Gantt Chart that affect the project’s end date.
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.
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.
boolean
It enables to render the child taskbar on parent row for resource view Gantt.
boolean
Enable or disable persisting component’s state between page reloads.
boolean
If enablePredecessorValidation is set to true, it allows to validate the predecessor link.
boolean
Enable or disable rendering component in right to left direction.
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.
boolean
Enables or disables undo or redo feature.
boolean
Specifies whether to display shimmer effect during scrolling action in virtual scrolling feature. If disabled, spinner is shown instead of shimmer effect.
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.
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');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');Configures the grid lines in tree grid and gantt chart. @default ‘Horizontal’
number | string
Defines the height of the Gantt component container.
boolean
If highlightWeekends set to true, then all weekend days are highlighted in week - day timeline mode.
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'); boolean
Defines weekend days are considered as working day or not.
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'); boolean
Gets or sets whether to load child record on demand in remote data binding. Initially parent records are rendered in collapsed state.
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.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
string | Function
The milestone template that renders customized milestone task from the given template.
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'); Date | string
Defines end date of the project, if projectEndDate value not set then it will be calculated from data source.
Date | string
Defines start date of the project, if projectStartDate value not set then it will be calculated from data source.
Query
Defines the external Query
that will be executed along with data processing.
boolean
If readOnly is set to true, Gantt cannot be edited.
boolean
If renderBaseline is set to true, then baselines are rendered for tasks.
Defines mapping properties to find resource values such as id, name, unit and group from resource collection.
string
Defines mapping property to get resource id value from resource collection.
string
Defines mapping property to get resource name value from resource collection.
any[]
Defines resource collection assigned for projects.
number
Defines height value for grid rows and chart rows in Gantt.
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'); any[]
Defines segment collection assigned for tasks.
number
The selectedRowIndex allows you to select a row at initial rendering.
You can also get the currently selected row index.
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'); boolean
If showColumnMenu set to true, then it will enable the column menu options in each columns.
boolean
To show notes column cell values inside the cell or in tooltip.
boolean
It enables to render the overallocation container for resource view Gantt.
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');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');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');Specifies task schedule mode for a project.
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. number
Defines height of taskbar element in Gantt.
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');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'); 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.
[]
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:
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'); number
To define expander column index in Grid.
undoRedoActions Defines action items that retain for undo and redo operation.
number
Defines number of undo/redo actions that should be stored.
boolean
If validateManualTasksOnLinking is set to true,
it enables date validation while connecting manually scheduled tasks with predecessor
Defines the view type of the Gantt. @default ‘ProjectView’
number | string
Defines the width of the Gantt component container.
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. string[]
Defines workweek of project.
Configure zooming levels of Gantt Timeline