GanttChart Typescript API

Interface

GanttChart

Gantt charts are specialized bar charts that help clearly represent how tasks and resources are allocated over time in planning, project management, and scheduling applications.

Selector

smart-gantt-chart

Properties

autoScheduleboolean

Recalculates the tasks that are connected and re-schedules them according to their connections. If no connections are present, autoScheduling has no effect until a connection is created. Connection types determines the start/end date limits of the tasks.

Default valuefalse

autoScheduleStrictModeboolean

Affects the tasks only when autoSchedule is enabled. When set to true, the tasks are strictly scheduled ( according to their connections ) and dragging is not allowed.
Users can set lag to specific connections to determine a delay of overlap of between the two tasks ( interval of time in miliseconds ). Lag one of the attributes of a task connection and should be set in the dataSource where the task connections are defined.

Default valuefalse

autoScrollStepnumber

Determines the scroll speed when dragging when autoScroll property is set.

Default value5

dataExportGanttChartDataExport

Sets the GanttChart's Data Export options.

dataSourceGanttChartDataSource[]

Determines the tasks that will be loaded inside the Timeline. Each item represents an object that should contain the following properties:

• label - the label of the Task
• dateStart - the starting date of the Task. Should be a string representing a valid date.
• dateEnd - the ending date of the Task. Should be a string representing a valid date.
• type - determines the type of the task. Whether it's a simple task, a project or a milestone. Each type of task has specific behavior and additional attributes.

.
Additional properties:

• connections - an array of objects representing the connection between two tasks. Each connection (object) should have the following properties :
  • target - a number representing the index of the target task
  • type - a number representing the type of the connection. Four types of connections are available:
    • 0 - is a connection of type Start-to-Start
    • 1 - is a connection of type End-to-Start
    • 2 - is a connection of type End-to-End
    • 3 - is a connection of type Start-to-End
  • lag - a number that determines the delay between two connected auto scheduled tasks. Lag property can be a positive or a negative number. When negative it determines the overlap between two connected tasks. This property is used in conjuction with autoSchedule.
• duration - determines the duration of a Task in days, hours, minutes, seconds or miliseconds. Very usefull when the the dateEnd of a Task is unknown.
• minDuration - sets the minimum duration of a task.
• maxDuration - sets the maximum duration of a task.
• minDateStart - determines the mininum date that a task can start from. Must be if type string and should represent a valid date.
• maxDateStart - determines the maximum date that a task can start from. Must be if type string and should represent a valid date.
• minDateEnd - determines the mininum date that a task can end. Must be if type string and should represent a valid date.
• maxDateEnd - determines the maximum date that a task can end. Must be if type string and should represent a valid date.
• progress - a number that determines the progress of a task ( from 0 to 100 ).
• disableDrag - a boolean property that disables the dragging of a task when set to true.
• disableResize - a boolean property that disables the resizing of a task when set to true.
• dragProject - a boolean that determines whether or not the whole project (along with the tasks) can be dragged while dragging the project task. Applicalbe only to Projects.
• synchronized - a boolean that if set the project task's start/end dates are automatically calculated based on the tasks. By default a synchronized project task can't be dragged alone. Applicable only to Project tasks.
• expanded - a boolean that determines if a project is expanded or not. If not all of it's sub-tasks are not visible. Only the project task itself is visible. By default no projects are expanded. Applicable only to project tasks..

dayFormatDayFormat

Determines the format of the dates in the timeline header when they represent days.

Default valueshort

dateEndstring | Date

Determines a specific end date for the Timeline. Usefull when the user wants custom ending date for the Timeline. If no date is set the end date of the timeline is automatically determined from the tasks.

Default value

dateStartstring | Date

Determines a specific starting date for the Timeline. Usefull when the user wants custom starting date for the Timeline. If no date is set the start date of the timeline is automatically determined from the tasks.

Default value

disabledboolean

Enables or disables the element.

Default valuefalse

disableAutoScrollboolean

Disables auto scrolling while dragging/resizing a task bar inside the Timeline.

Default valuefalse

durationUnitDuration

Determines in what unit is task duration property measured.

Default valuemilisecond

horizontalScrollBarVisibilityHorizontalScrollBarVisibility

Determines weather or not horizontal scrollbar is shown.

Default valueauto

invertedboolean

When set the Timeline is positioned on the left side while the Task Tree is positioned on the right. By default it's vice versa.

Default valuefalse

maxany

Detetmines the maximum possible date of the Timeline.

Default value2100-1-1

minany

Detetmines the minimum possible date of the Timeline.

Default value1900-1-1

messagesany

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value

monthFormatMonthFormat

Determines the format of the dates the timeline header when they represent months.

Default valueshort

nonworkingDaysnumber[]

Determines the nonworking days of the week from 0 to 6, where 0 is the first day of the week and 6 is the last day. Nonworking days will be displayed with colored cells inside the timeline and will be ignored during task range calculations.

nonworkingHoursnumber[]

Determines the nonworking hours of a day. Hours are represented as numbers inside an array. In the timline the cells that represent nonworking days are colored differently from the rest.

popupWindowCustomizationFunctionany

A function that can be used to completly customize the popup Window that is used to interact width tasks by changing their properties. The function as three arguments:

• target - the target popup Window that is about to be opened.
• type - the type of the window. The type determines the purpose of the window. Three possible values: 'task' (task editing), 'confirm' ( confirmation window), 'connection' (used when deleting a connection between tasks).
• taskIndex - the index of the task that is being edited. It will be undefined if the type of the window is not 'task'.

selectedIndexesnumber[]

Determines the selected task(s). If empty no tasks are selected.

snapToNearestboolean

If set the dateStart/dateEnd of the tasks will be coerced to the nearest timeline cell date ( according to the view ). Affects the dragging operation as well.

Default valuefalse

tasksGanttChartTask[]

A getter that returns a flat structure as an array of all tasks inside the element.

Default value

taskColumnsGanttChartTaskColumn[]

Deteremines the columns that will be visible in the Task Tree. Each entry in the value of this property must be of type Object.
It should contain the label and value keys. The value of label determines the column header label inside the Task Tree. The value of value determines the content of the cells in the column. It should reference a task attribute from the dataSource.
By default, one column with all task labels is visible.
Additional properties:

• formatFunction - a function that allows to customize the content of each record in the column. The function accepts one argument - the actual label as string that is going to be inserted and must return some content.
• min - controls the min size of the column
• max - controls the max size of the column
• size - controls the actual size of the column
• customEditor - a callback that can be used to set a custom editor for the column when editing via the window. It accepts two arguments
  • label - the label of the column
  • value - the value of the column.
  The callback must return the editor.
• setCustomEditorValue - a callback that is used to set the value of the custom editor.
• getCustomEditorValue - a callback that is used to get the value of the custom editor.

timelineMinany

Determines the min width of the timeline.

Default value200

treeMinany

Determines the min width of the task tree.

Default value100

treeSizeany

Determines the size(width) of the task tree.

Default value100

hourFormatHourFormat

Determines the format of the dates inside the timeline header when they represent hours.

Default valuenumeric

timelineHeaderFormatFunctionany

A format function for the Header of the Timeline.

verticalScrollBarVisibilityVerticalScrollBarVisibility

Determines weather or not vertical scrollbar is shown.

Default valueauto

viewGanttChartView

Determines the viewing date range of the timeline. Possible values:

• day - The timeline show the hours of the day.
• week - the timeline shows the days of the week.
• month - the timeline shows the days of the month.
• year - the timeline shows the months of the year.

The timeline has a header section that contains the labels of each cell according to the date inside them. The header is splitted in two sections in order to give a more detailed information of the dates.

Default valueyear

yearFormatYearFormat

Determines the format of the dates inside the timeline header when they represent years.

Default valuenumeric

weekFormatWeekFormat

Determines the format of the dates inside the timeline header when they represent weeks.

Default valuelong

themestring

Sets or gets the element's visual theme.

Default value"

unfocusableboolean

Sets or gets if the element can be focused.

Default valuefalse

onchange((this: Window, ev: Event) => any) | null

This event is triggered when a Task is selected/unselected.

Arguments

onprogresschangestart((this: Window, ev: Event) => any) | null

This event is triggered when the progress of a task bar starts to change as a result of user interaction.

Arguments

onprogresschangeend((this: Window, ev: Event) => any) | null

This event is triggered when the progress of a task is changed.

Arguments

ondragstart((this: Window, ev: Event) => any) | null

This event is triggered when dragging of a task starts.

Arguments

ondragend((this: Window, ev: Event) => any) | null

This event is triggered when dragging of a task finishes.

Arguments

onresizestart((this: Window, ev: Event) => any) | null

This event is triggered when resizing of a task starts.

Arguments

onresizeend((this: Window, ev: Event) => any) | null

This event is triggered when the resizing of a task finishes.

Arguments

onconnectionstart((this: Window, ev: Event) => any) | null

This event is triggered when the user starts connecting one task to another.

Arguments

onconnectionend((this: Window, ev: Event) => any) | null

This event is triggered when the user completes a connection between two tasks.

Arguments

onscrollbottomreached((this: Window, ev: Event) => any) | null

This event is triggered when the Timeline has been scrolled to the bottom.

Arguments

onscrolltopreached((this: Window, ev: Event) => any) | null

This event is triggered when the Timeline has been scrolled to the top.

Arguments

onopening((this: Window, ev: Event) => any) | null

This event is triggered just before the window for task editing starts opening. The opening operation can be canceled by calling event.preventDefault() in the event handler function.

Arguments

onopen((this: Window, ev: Event) => any) | null

This event is triggered when the window for task editing is opened( visible ).

Arguments

onclosing((this: Window, ev: Event) => any) | null

This event is triggered just before the window for task editing starts closing. The closing operation can be canceled by calling event.preventDefault() in the event handler function.

Arguments

onclose((this: Window, ev: Event) => any) | null

This event is triggered when the window for task editing is closed( hidden )

Arguments

Methods

removeAllConnections(): void

Removes all connections between tasks.

removeConnection( startTaskIndex: number, taskEndIndex: number, connectionType: number): any

Removes a connection between tasks.

Arguments

startTaskIndexnumber

The index of the start task.

taskEndIndexnumber

The index of the end task.

connectionTypenumber

The type of the connection. A numeric value from 0 to 3.

Returnsany

removeConnection( Connectionbetweentasks: string): any

Removes a connection between tasks.

Arguments

Connectionbetweentasksstring

The connection string like '2-3-0.

Returnsany

removeTaskConnection( taskStartIndex: number, taskEndIndex?: number): string

Removes all connections of a task or between two tasks if the second argument is provided and valid.

Arguments

taskStartIndexnumber

The index of the start task.

taskEndIndex?number

The index of the end task.

Returnsstring

clearTasks(): void

Removes all tasks.

createConnection( startTaskIndex: number, taskEndIndex: number, connectionType: number): void

Creates a connection between two tasks.

Arguments

startTaskIndexnumber

The index of the start task.

taskEndIndexnumber

The index of the end task.

connectionTypenumber

The type of the connection. A numeric value from 0 to 3.

createConnection( Connectionbetweentasks: string): void

Creates a connection between two tasks.

Arguments

Connectionbetweentasksstring

The connection string like '2-3-0'.

collapse( index: string | number): void

Collapses an expanded project with tasks.

Arguments

indexstring | number

The index of a project task that should be collapsed.

ensureVisible( item: string | number): void

Makes sure a Task is visible by scrolling to it.

Arguments

itemstring | number

The index of the target Task. Can be a string representing a Tree index ( similar to smartTree )

expand( index: string | number): void

Expands a collapsed project with tasks.

Arguments

indexstring | number

The index of a project task that should be expanded.

getState(): any[]

Returns a JSON representation of all tasks inside the element along with their connections and settings.

Returnsany[]

getTaskIndex( task: HTMLElement): number

Returns the index of a task.

Arguments

taskHTMLElement

A Smart.TreeItem from the Task Tree or a Timeline task HTML element.

Returnsnumber

clearState(): void

Removes a previously saved state of the element form LocalStorage according to it's id. Requires an id to be set to the element.

loadState( state?: any[]): void

Loads a previously saved state of the element or checks LocalStorage for any saved states if no argument is passed to the method.

Arguments

state?any[]

An Array containing a valid structure of Gantt Chart tasks.

saveState( state?: any[]): void

Saves the current settings of the element to LocalStorage. Requires an id to be set to the element.

Arguments

state?any[]

An Array containing a valid structure of Gantt Chart tasks.

insertTask( index: string | number, taskObject: any): void

Inserts a new task in the timeline.

Arguments

indexstring | number

A number that represents the index of a task or a string that matches the hierarchical position of the item, e.g. '0' ( following smartTree syntax).

taskObjectany

An object describing a Gantt Chart task.

updateTask( index: string | number, taskObject: any): void

Updates a task inside the timeline.

Arguments

indexstring | number

A number that represents the index of a task or a string that matches the hierarchical position of the item, e.g. '0' ( following smartTree syntax).

taskObjectany

An object describing a Gantt Chart task. The properties of this object will be applied to the desired task.

removeTask( index: string | number): void

Removes a task from the timeline.

Arguments

indexstring | number

A number that represents the index of a task or a string that matches the hierarchical position of the item, e.g. '0' ( following smartTree syntax).

openWindow( index: string | number): void

Opens the popup Window for specific task Editing.

Arguments

indexstring | number

A string or number that represents the index of a task that is going to be edited.

closeWindow(): void

Closes an opened popup Window. The method will close any opened popup window inside the element.

print(): void

Prepares the GanttChart for printing by opening the browser's Print Preview.

GanttChartDataExport

Properties

headerboolean

Sets whether the columns header will be exported.

Default valuetrue

styleany

Sets a custom style object of the dataExport.

fileNamestring

Sets the exported file's name.

Default value"smartGanttChart

pageOrientationstring

Sets the page orientation, when exporting to PDF.

Default value"portrait

expandCharstring

Sets the expand char displayed for the Project tasks when GanttChart exported.

Default value"+

collapseCharstring

Sets the collapse char displayed for the Project tasks when GanttChart is exported.

Default value"-

GanttChartDataSource

Properties

connectionsGanttChartDataSourceConnection[]

Tasks connection.

Default valueundefined

classstring

Project, Task or Milestone CSS class.

Default value"

dateStartstring | Date

Project, Task or Milestone start date.

Default value

dateEndstring | Date

Project, Task or Milestone end date.

Default value

disableResourcesboolean

Project, Task or Milestone with disabled resources.

Default valuefalse

disableDragboolean

Project, Task or Milestone dragging is disabled.

Default valuefalse

disableResizeboolean

Project, Task or Milestone resizing is disabled.

Default valuefalse

dragProjectboolean

Project, Task or Milestone drag enabled in the view.

Default valuetrue

expandedboolean

Project, Task or Milestone expanded state in the view.

Default valuefalse

idstring | null

Project, Task or Milestone id.

Default value

labelstring | null

Project, Task or Milestone label.

Default value

formatFunctionany

Project, Task or Milestone format function.

minDateStartstring | Date

Project, Task or Milestone min start date.

Default value

maxDateEndstring | Date

Project, Task or Milestone max end date.

Default value

progressnumber

Project, Task or Milestone progress.

Default value0

resourcesGanttChartDataSourceResource[]

Project, Task or Milestone resources.

Default valuefalse

synchronizedboolean

Project, Task or Milestone synchronized in the view.

Default valuefalse

tasksGanttChartTask[]

Project's tasks.

typeGanttChartTaskType

Project, Task or Milestone type. Possible values are 'project' and 'task'

Default value

valueany

Project, Task or Milestone value.

Default value

visibleboolean

Project, Task or Milestone value.

Default valuetrue

GanttChartDataSourceConnection

Properties

targetstring | number

Task's connection target.

Default value0

typenumber

Task's connection type.

Default value0

GanttChartDataSourceResource

Properties

capacitynumber

Resource capacity.

Default value0

formatFunctionany

Resource format function.

idstring

Resource id.

Default value"

labelnumber

Resource label.

Default value0

maxCapacitynumber

Resource max capacity.

Default value0

minCapacitynumber

Resource min capacity.

Default value0

progressnumber

Resource progress.

Default value0

valueany

Resource value.

Default value

visibleboolean

Resource visibility.

Default valuetrue

workloadstring | number

Resource workload.

Default value0

GanttChartTask

Properties

connectionsGanttChartTaskConnection[]

Tasks connection.

Default valueundefined

classstring

Project, Task or Milestone CSS class.

Default value"

dateStartstring | Date

Project, Task or Milestone start date.

Default value

dateEndstring | Date

Project, Task or Milestone end date.

Default value

disableResourcesboolean

Project, Task or Milestone with disabled resources.

Default valuefalse

disableDragboolean

Project, Task or Milestone dragging is disabled.

Default valuefalse

disableResizeboolean

Project, Task or Milestone resizing is disabled.

Default valuefalse

dragProjectboolean

Project, Task or Milestone drag enabled in the view.

Default valuetrue

expandedboolean

Project, Task or Milestone expanded state in the view.

Default valuefalse

idstring | null

Project, Task or Milestone id.

Default value

labelstring | null

Project, Task or Milestone label.

Default value

formatFunctionany

Project, Task or Milestone format function.

minDateStartstring | Date

Project, Task or Milestone min start date.

Default value

maxDateEndstring | Date

Project, Task or Milestone max end date.

Default value

progressnumber

Project, Task or Milestone progress.

Default value0

resourcesGanttChartTaskResource[]

Project, Task or Milestone resources.

Default valuefalse

synchronizedboolean

Project, Task or Milestone synchronized in the view.

Default valuefalse

tasksGanttChartTask[]

Project's tasks.

typeGanttChartTaskType

Project, Task or Milestone type. Possible values are 'project' and 'task'

Default value

valueany

Project, Task or Milestone value.

Default value

visibleboolean

Project, Task or Milestone value.

Default valuetrue

GanttChartTaskConnection

Properties

targetstring | number

Task's connection target.

Default value0

typenumber

Task's connection type.

Default value0

GanttChartTaskResource

Properties

capacitynumber

Resource capacity.

Default value0

formatFunctionany

Resource format function.

idstring

Resource id.

Default value"

labelnumber

Resource label.

Default value0

maxCapacitynumber

Resource max capacity.

Default value0

minCapacitynumber

Resource min capacity.

Default value0

progressnumber

Resource progress.

Default value0

valueany

Resource value.

Default value

visibleboolean

Resource visibility.

Default valuetrue

workloadstring | number

Resource workload.

Default value0

GanttChartTaskColumn

Properties

labelstring | null

Column's label.

Default value

valuestring | null

Column's value.

Default value

minstring | number | null

Column's min size.

Default value0

sizestring | number | null

Column's size.

Default value0

formatFunctionany

Column's format function. You can use it to customize the column label's rendering.

Enums