JavaScript/jQuery Gantt Options
accessKey
The value of this property will be passed to the accesskey
attribute of the HTML element that underlies the UI component.
columns
The columns property accepts an array of columns. To configure a column, use a dxTreeListColumn object or specify a data source field (as a string value) to which the column is bound.
dependencies
Dependencies specify the relationships between tasks. The following image illustrates how the Gantt displays dependencies in the chart:
The Gantt UI component supports the following dependency types:
Finish to Start (FS) - The predecessor task's endpoint specifies the successor task's start point.
Start to Start (SS) - The predecessor task's start point specifies the successor task's start point.
Finish to Finish (FF) - The predecessor task's end point specifies the successor task's end point.
Start to Finish (SF) - The predecessor task's start point specifies the successor task's end point.
In a database, you can use any of the following formats (digit or string) to store dependency types:
Dependency Type | Supported Values |
---|---|
Finish to Start (FS) | 0, "0", "FS", "fs" |
Start to Start (SS) | 1, "1", "SS", "ss" |
Finish to Finish (FF) | 2, "2", "FF", "ff" |
Start to Finish (SF) | 3, "3", "SF", "sf" |
Use the dataSource property to bind the UI component to a data source, which contains information about dependency types. If the field names in your data source differ from the 'id', 'type', 'predecessorId' and 'successorId' default names, use the keyExpr, typeExpr properties to map data fields.
See Also
editing
The UI component allows users to add, modify and delete tasks, resources and dependencies. Set the enabled property to true to enable edit functionality.
See Also
elementAttr
Specifies the global attributes to be attached to the UI component's container element.
firstDayOfWeek
The property's value can be from 0 to 6.
- 0 - Sunday
- 1 - Monday
- 2 - Tuesday
- 3 - Wednesday
- 4 - Thursday
- 5 - Friday
- 6 - Saturday
The culture settings specify the property's default value.
height
This property accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px"
,"80%"
,"inherit"
.Function
A function returning either of the above. For example:JavaScript- height: function() {
- return window.innerHeight / 1.5;
- }
onContentReady
A function that is executed when the UI component's content is ready and each time the content is changed.
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only when using Knockout. |
onContextMenuPreparing
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel showing the context menu. |
|
component |
The UI component's instance. |
|
data | any |
Data of the right-clicked task or dependency. |
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
items |
Items to be displayed in the context menu. |
|
targetKey | any |
The key of the right-clicked task or dependency. |
targetType |
The type of right-clicked task or dependency. |
onCustomCommand
A function that is executed after a custom command item was clicked. Allows you to implement a custom command's functionality.
Name | Type | Description |
---|---|---|
component |
The UI component instance's name. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
name |
The name of the clicked item. |
onDependencyDeleted
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the deleted dependency. |
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the deleted dependency. |
onDependencyDeleting
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the dependency's deletion. |
|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the deleted dependency. |
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the deleted dependency. |
onDependencyInserted
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the inserted dependency. |
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the inserted dependency. |
onDependencyInserting
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the dependency's insertion. |
|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the inserted dependency. |
onDisposing
A function that is executed before the UI component is disposed of.
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only if you use Knockout. |
onInitialized
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
onOptionChanged
Name | Type | Description |
---|---|---|
model |
Model data. Available only if you use Knockout. |
|
fullName |
The path to the modified property that includes all parent properties. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
|
name |
The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into. |
|
value | any |
The modified property's new value. |
onResourceAssigned
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the inserted resource assignment. |
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the processed resource and task. |
onResourceAssigning
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the resource assignment. |
|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the processed resource and task. |
onResourceDeleted
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the deleted resource. |
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the deleted resource. |
onResourceDeleting
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the resource deletion. |
|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the deleted resource. |
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the deleted resource. |
onResourceInserted
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the inserted resource. |
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the inserted resource. |
onResourceInserting
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the resource insertion. |
|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the inserted resource. |
onResourceUnassigned
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the deleted resource assignment. |
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the processed resource and task. |
onResourceUnassigning
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the resource unassignment. |
|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the resource. |
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the processed resource and task. |
onSelectionChanged
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only if you use Knockout. |
|
selectedRowKey | any |
The key of the row whose selection state was changed. |
onTaskClick
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
data | any |
The task data. |
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
key | any |
The task key. |
model |
Model data. Available only if you use Knockout. |
onTaskDblClick
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the resource unassignment. |
|
component |
The UI component's instance. |
|
data | any |
The task data. |
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
key | any |
The task key. |
model |
Model data. Available only if you use Knockout. |
onTaskDeleted
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the deleted task. |
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the deleted task. |
onTaskDeleting
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the task deletion. |
|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the deleted task. |
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the deleted task. |
onTaskEditDialogShowing
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the edit dialog showing. |
|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
hiddenFields |
An array of hidden fields. |
|
key | any |
The task key. |
model |
Model data. Available only if you use Knockout. |
|
readOnlyFields |
An array of read-only fields. |
|
values | any |
The task values. |
Note that the hiddenFields and readOnlyFields parameters affect only task fields. Use the allowTaskResourceUpdating property to hide the Resource Manager in the Task Details dialog.
See Also
onTaskInserted
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the inserted task. |
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the inserted task. |
onTaskInserting
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the task insertion. |
|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the inserted task. |
onTaskMoving
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the task's movement. |
|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The task key. |
model |
Model data. Available only if you use Knockout. |
|
newValues | any |
The task values after moving. |
values | any |
The task values before moving. |
onTaskUpdated
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the updated task. |
model |
Model data. Available only if you use Knockout. |
|
values | any |
The task values after update. |
onTaskUpdating
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the task update. |
|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The task key. |
model |
Model data. Available only if you use Knockout. |
|
newValues | any |
The task values after update. |
values | any |
The task values before update. |
resourceAssignments
Resource assignments define relationship between tasks and resources.
Use the dataSource property to bind the UI component to a data source, which contains resource assignments. If the field names in your data source differ from the 'id', 'resourceId' and 'taskId' default names, use the keyExpr, resourceIdExpr and/or taskIdExpr properties to map data fields.
See Also
resources
You can add resources to a project and assign them to tasks. Resources can be people responsible for tasks, equipment, materials, etc. The Gantt displays resources as labels on the right of the tasks.
Use the dataSource property to bind the UI component to a data source, which contains resources. If the field names in your data source differ from the 'id', 'text' and 'color' default names, use the keyExpr, textExpr and/or colorExpr properties to map data fields.
See Also
scaleType
The scaleType property specifies the zoom level for tasks when the Gantt UI component is initialized or when you call the option() method.
If the scaleType property is set to "auto", the UI component is scaled to fit all tasks in the Gantt chart's visible area.
To browse tasks across various levels of detail in real time, hold the CTRL key and scroll the mouse wheel to zoom (in or out).
tabIndex
The value of this property will be passed to the tabindex
attribute of the HTML element that underlies the UI component.
tasks
Use the dataSource property to bind the UI component to a data source, which contains tasks. If the field names in your data source differ from default names ('id', 'parentId', 'title', 'start', 'end', 'progress', 'color'), use appropriate properties (keyExpr, parentIdExpr, etc.) to map data fields.
See Also
taskTooltipContentComponent
An alias for the taskTooltipContentTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
taskTooltipContentRender
An alias for the taskTooltipContentTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
taskTooltipContentTemplate
The editor's container. It is an HTML Element or a jQuery Element when you use jQuery.
Note that the container parameter contains the content of the default tooltip. You should clear the container parameter to specify custom content for the task tooltip.
width
This property accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px"
,"80%"
,"auto"
,"inherit"
.Function
A function returning either of the above. For example:JavaScript- width: function() {
- return window.innerWidth / 1.5;
- }