Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
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>
Triggered when a taskbar is dragged and dropped into a new position on the Gantt chart.
EmitType<ITaskbarEditedEventArgs>
Triggered when a taskbar is in the dragging state on the Gantt chart.
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 displayed in the add dialog.
If not specified, the fields will be derived from the taskSettings and columns values.
<div id="Gantt"></div> import { Gantt } from '@syncfusion/ej2-gantt';
let gantt: Gantt = new Gantt({
addDialogFields: [
{ type: 'General', headerText: 'General', fields: ['TaskID', 'TaskName'] },
{ type: 'Resources' },
{ type: 'Dependency' },
{ type: 'Notes'}
],
});
gantt.appendTo('#Gantt'); boolean
If allowExcelExport set to true, then it will allow the user to export Gantt chart to Excel and CSV file.
boolean
Enables or disables filtering functionality in the Gantt chart.
boolean
Enables or disables keyboard interactions in the Gantt chart.
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 chart to PDF file.
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.
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.
boolean
If allowRowDragAndDrop set to true, then it will allow the user to perform row drag and drop action in Gantt chart.
boolean
If allowSelection is set to true, it enables row selection in the Gantt chart, and the selected rows are highlighted.
boolean
If allowSorting is set to true, it enables sorting of Gantt chart tasks when the column header is clicked.
boolean
Defines whether to enable or disable the taskbar drag and drop action in the Gantt chart.
boolean
Specifies whether taskbars can overlap in the Gantt chart.
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.
boolean
Specifies whether to auto calculate the start and end dates based on factors such as working time, holidays, weekends, and task dependencies.
boolean
Enables or disables automatic focusing on the taskbar when a task is clicked.
string
Specifies the color of the baseline bar in the Gantt chart.
boolean
Defines whether all root tasks should be rendered in a collapsed state. When collapseAllParentTasks set to true, all parent tasks will be collapsed by default.
[]
columnMenuItems 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. Column[] | string[] | ColumnModel[]
Defines the collection of columns displayed in the Gantt chart grid.
If the columns declaration is empty, the columns are automatically populated based on the taskSettings values.
<div id="Gantt"></div> import { Gantt } from '@syncfusion/ej2-gantt';
let gantt: Gantt = new Gantt({
columns: [
{ field: 'TaskID', width: '150', headerText: 'Task ID', headerTextAlign: 'Left' allowFiltering: false },
{ field: 'TaskName', clipMode: 'EllipsisWithTooltip' allowEditing: true, hideAtMedia: '(min-width: 700px)' },
{ field: 'Duration', edittype: 'stringedit', allowReordering: true, maxWidth: '400' },
{ field: 'Progress', textAlign: 'Right', allowResizing: false , visible: true, format: 'C' },
{ field: 'StartDate', width: '250', allowSorting: false, minWidth: '200' }
]
});
gantt.appendTo('#Gantt'); 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)”).
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.
ContextMenuItem[] | ContextMenuItemModel[]
Defines the built-in and custom items that appear in the context menu of the Gantt chart. You can use this property to control the content and functionality of the right-click context menu.
<div id="Gantt"></div> import { Gantt } from '@syncfusion/ej2-gantt';
import { ContextMenuItemModel } from '@syncfusion/ej2-grids';
Gantt.Inject(ContextMenu);
let contextMenuItems: (string | ContextMenuItemModel)[] = ['AutoFitAll', 'AutoFit', 'TaskInformation', 'DeleteTask', 'Save', 'Cancel', 'SortAscending', 'SortDescending', 'Add', 'DeleteDependency', 'Convert',
{ text: 'Collapse the Row', target: '.e-content', id: 'collapserow' } as ContextMenuItemModel,
{ text: 'Expand the Row', target: '.e-content', id: 'expandrow' } as ContextMenuItemModel,
];
let gantt: Gantt = new Gantt({
contextMenuItems: contextMenuItems as ContextMenuItem[],
});
gantt.appendTo('#Gantt'); Object[] | DataManager | Object
Defines the data source for the Gantt chart, which is used to render rows and tasks.
The dataSource can be an array of JavaScript objects, an instance of DataManager, or a single object.
The array of objects should contain the task data with properties such as TaskID, TaskName, StartDate, EndDate, etc.
This allows dynamic binding of tasks and their relationships (e.g., dependencies, subtasks, progress) to the Gantt chart.
<div id="Gantt"></div> import { Gantt } from '@syncfusion/ej2-gantt';
let gantt: Gantt = new Gantt({
// Hierarchical data binding.
dataSource: [{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},]
// Self-referential data binding (Flat data).
dataSource: [
{ TaskID: 1,TaskName: 'Project Initiation',StartDate: new Date('04/02/2019'),EndDate: new Date('04/21/2019')},
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50,ParentId:1 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, ParentId:1 },
];
// Remote Data
dataSource: dataSource,
});
// Remote Data
let dataSource: DataManager = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-services/api/GanttData',
adaptor: new WebApiAdaptor,
crossDomain: true
});
gantt.appendTo('#Gantt'); 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.
Defines the customized working time for the project. This helps in accurately planning tasks based on available working hours and ensures proper task scheduling.
<div id="Gantt"></div> import { Gantt } from '@syncfusion/ej2-gantt';
let gantt: Gantt = new Gantt({
dayWorkingTime: [from: 9 to: 18]
});
gantt.appendTo('#Gantt'); boolean
If disableHtmlEncode is set to true, the Gantt component disables HTML entity encoding across the Gantt content, allowing custom HTML elements to be rendered.
durationUnit 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. EditDialogFieldSettingsModel[]
Defines the tabs and fields to be displayed in the edit dialog.
If not specified, the fields will be derived from the taskSettings and columns values.
<div id="Gantt"></div> import { Gantt } from '@syncfusion/ej2-gantt';
let gantt: Gantt = new Gantt({
editDialogFields: [
{ type: 'General', headerText: 'General', fields: ['TaskID', 'TaskName'] },
{ type: 'Resources' },
{ type: 'Dependency' },
{ type: 'Notes'}
],
});
gantt.appendTo('#Gantt');Configures the edit settings for the Gantt chart, such as enabling or disabling task modifications.
<div id="Gantt"></div> import { Gantt, Edit } from '@syncfusion/ej2-gantt';
Gantt.Inject(Edit);
let gantt: Gantt = new Gantt({
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
mode:'Auto',
newRowPosition: 'Top',
showDeleteConfirmDialog: true
}
});
gantt.appendTo('#Gantt'); boolean
If enableAdaptiveUI is set to true, the pop-up UI becomes adaptive to smaller screens, enabling better usability for filtering and other features.
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
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.
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.
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.
boolean
Enables the rendering of child taskbars on the parent row when it is in a collapsed state in the Gantt chart.
boolean
Enable or disable persisting component’s state between page reloads.
boolean
If enablePredecessorValidation is set to true, enables validation for predecessor links in the Gantt chart.
boolean
Enable or disable rendering component in right to left direction.
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.
boolean
Enables or disables the undo and redo functionality in the Gantt chart.
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 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.
Defines the events and milestones along the project timeline. These event markers indicate significant events or milestones throughout the project’s duration.
<div id="Gantt"></div> import { Gantt, DayMarkers } from '@syncfusion/ej2-gantt';
Gantt.Inject(DayMarkers);
let gantt: Gantt = new Gantt({
eventMarkers: [
{
day: '04/10/2019',
cssClass: 'e-custom-event-marker',
label: 'Project approval and kick-off'
}
]
});
gantt.appendTo('#Gantt');Configures the filter settings for the Gantt chart, enabling users to filter tasks based on specific columns or criteria.
The filterSettings property allows customization of filter behavior, such as which columns to filter and the filter type.
<div id="Gantt"></div> import { Gantt, Filter } from '@syncfusion/ej2-gantt';
Gantt.Inject(Filter);
let gantt: Gantt = new Gantt({
filterSettings: {
columns: [{ field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' },{ field: 'TaskID', matchCase: false, operator: 'equal', predicate: 'and', value: 2 }],
ignoreAccent: true
},
]
});
gantt.appendTo('#Gantt');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.
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.
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.
Defines holidays within the project timeline, allowing you to mark specific dates as holidays. This helps in accounting for non-working days in scheduling and task planning.
<div id="Gantt"></div> import { Gantt, DayMarkers } from '@syncfusion/ej2-gantt';
Gantt.Inject(DayMarkers);
let gantt: Gantt = new Gantt({
holidays: [{
from: "04/04/2019",
to: "04/05/2019",
label: "Public holidays",
cssClass: "e-custom-holiday"
}]
});
gantt.appendTo('#Gantt'); 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.
Configures the labels displayed on the right, left, and inside the taskbars in the Gantt chart.
<div id="Gantt"></div> import { Gantt } from '@syncfusion/ej2-gantt';
let gantt: Gantt = new Gantt({
labelSettings: {
leftLabel: 'TaskID',
rightLabel: 'Task Name: ${taskData.TaskName}',
taskLabel: '${Progress}%'
}
});
gantt.appendTo('#Gantt'); 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.
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.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
string | Function
Defines a custom template for rendering milestone tasks in the Gantt chart. This template allows you to customize the appearance of milestone tasks.
string | Function
Defines a custom template for rendering parent task bars in the Gantt chart. This template allows you to customize the appearance of parent task bars.
<script type="text/x-jsrender" id="ParentTaskbarTemplate">
<div class="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar" style="height:100%">
<div class="e-gantt-parent-progressbar-inner-div e-gantt-parent-progressbar" style="width:${ganttProperties.progressWidth}px;height:100%">
<span class="e-task-label" style="position: absolute; z-index: 1; font-size: 12px; color: white; top: 5px; left: 10px; font-family: "Segoe UI"; overflow: hidden; text-overflow: ellipsis; width: 40%; cursor: move;">${taskData.TaskName}</span>
</div>
</div>
</script> import { Gantt } from '@syncfusion/ej2-gantt';
let gantt: Gantt = new Gantt({
parentTaskbarTemplate: '#ParentTaskbarTemplate',
});
gantt.appendTo('#Gantt'); 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.
Date | string
Defines the start date of the project. If the projectStartDate is not set, it will be automatically calculated based on the data source.
The date can be provided as a Date object or a string in a valid date format.
Query
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.
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.
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.
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.
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.
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.
object[]
Defines the collection of resources assigned to the project.
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.
Configures the search functionality within the Gantt chart.
<div id="Gantt"></div> import { Gantt, Filter } from '@syncfusion/ej2-gantt';
Gantt.Inject(Filter);
let gantt: Gantt = new Gantt({
searchSettings: { fields: ['TaskName'], operator: 'contains', key: 'List', ignoreCase: true, hierarchyMode: 'Parent' }
});
gantt.appendTo('#Gantt'); object[]
Defines the collection of segments assigned to tasks in the Gantt chart.
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.
Configures the settings for selection in the Gantt chart.
<div id="Gantt"></div> import { Gantt, Selection } from '@syncfusion/ej2-gantt';
Gantt.Inject(Selection);
let gantt: Gantt = new Gantt({
selectionSettings: {
mode: 'Row',
type: 'Multiple'
}
});
gantt.appendTo('#Gantt'); boolean
If showColumnMenu set to true, enables the column menu options for each column in the Gantt chart.
boolean
To show notes column cell values inside the cell or in tooltip.
boolean
If showOverAllocation set to true, enables the rendering of the overallocation container in the Gantt chart.
Configures the sort settings for the Gantt chart.
<div id="Gantt"></div> import { Gantt, Sort } from '@syncfusion/ej2-gantt';
Gantt.Inject(Sort);
let gantt: Gantt = new Gantt({
sortSettings: { columns: [{ field: 'TaskID', direction: 'Ascending' }], allowUnsort: true },
});
gantt.appendTo('#Gantt');Configures the splitter settings for the Gantt chart.
<div id="Gantt"></div> import { Gantt } from '@syncfusion/ej2-gantt';
let gantt: Gantt = new Gantt({
splitterSettings: {
position: "50%",
minimum: "200",
separatorSize: 5,
view: 'Default'
}
});
gantt.appendTo('#Gantt');Defines the mapping properties to extract task-related values, such as ID, start date, end date, duration, and progress, from the data source. This allows the Gantt chart to properly map the provided data to the corresponding task fields and render them accordingly.
<div id="Gantt"></div> import { Gantt } from '@syncfusion/ej2-gantt';
let gantt: Gantt = new Gantt({
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
dependency: 'Predecessor',
progress: 'Progress',
baselineStartDate: 'BaselineStartDate',
baselineEndDate: 'BaselineEndDate',
durationUnit: 'DurationUnit',
expandState: 'isExpand',
indicators: 'Indicators',
milestone: 'Milestone',
notes: 'info',
resourceInfo: 'resourceInfo',
child: 'subtasks',
},
});
gantt.appendTo('#Gantt');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 the taskbar element in the Gantt chart.
string | Function
The task bar template that renders customized child task bars from the given template. This property allows users to define a custom template for rendering child task bars in the Gantt chart.
<script type="text/x-jsrender" id="TaskbarTemplate">
<div class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style="height:100%">
<div class="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar" style="width:${ganttProperties.progressWidth}px;height:100%">
<span class="e-task-label" style="position: absolute; z-index: 1; font-size: 12px; color: white; top: 5px; left: 10px; font-family: "Segoe UI"; overflow: hidden; text-overflow: ellipsis; width: 40%; cursor: move;">${taskData.TaskName}</span>
</div>
</div>
</script> import { Gantt } from '@syncfusion/ej2-gantt';
let gantt: Gantt = new Gantt({
taskbarTemplate: '#TaskbarTemplate'
});
gantt.appendTo('#Gantt');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 | Function
Renders customized html elements for timeline cell from the given template.
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.
[]
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
Specifies whether to update offset value on a task for all the predecessor edit actions.
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.
Specifies unique working hours for each weekday in gantt chart to tailor schedules precisely.
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.