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.
activeStateEnabled
The UI component switches to the active state when users press down the primary mouse button. When this property is set to true, the CSS rules for the active state apply. You can change these rules to customize the component.
Use this property when you display the component on a platform whose guidelines include the active state change for UI components.
columns[]
The columns property accepts an array of columns. To configure a column, use a dxGanttColumn 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.
filterRow
Users can enter a value into the filter row to filter Gantt data. Set the filterRow.visible property to true to display the filter row.
Each cell in the filter row contains a magnifier icon. Click a column's magnifier icon to select a filter operation available for the column. Use the selectedFilterOperation property to specify the default filter operation for a column's filter row.
To hide a filter row cell for an individual column, set the column’s allowFiltering property to false.
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.
headerFilter
The header filter allows users to filter values in an individual column. The header filter is a popup window that contains all unique values of a column. A click on the filter icon invokes the header filter.
Set the headerFilter.visible property to true to display filter icons for all columns. To hide the filter icon for an individual column, set the column’s allowHeaderFiltering property to false.
See Also
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"
,"20vh"
,"80%"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
onContentReady
A function that is executed when the UI component is rendered and each time the component is repainted.
Name | Type | Description |
---|---|---|
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. |
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 an EventObject 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 widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the deleted dependency. |
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. |
values | any |
The values of the deleted dependency. |
onDependencyInserted
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the inserted dependency. |
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. |
|
values | any |
The values of the inserted dependency. |
onDisposing
A function that is executed before the UI component is disposed of.
Name | Type | Description |
---|---|---|
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. |
onInitialized
Name | Type | Description |
---|---|---|
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. |
onOptionChanged
Name | Type | Description |
---|---|---|
value | any |
The modified property's new value. |
previousValue | any |
The UI component's previous value. |
name |
The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into. |
|
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. |
onResourceAssigned
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the inserted resource assignment. |
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. |
|
values | any |
The values of the processed resource and task. |
onResourceDeleted
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the deleted resource. |
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. |
values | any |
The values of the deleted resource. |
onResourceInserted
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the inserted resource. |
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. |
|
values | any |
The values of the inserted resource. |
onResourceManagerDialogShowing
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the Resource Manager 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. |
|
values | Array<any> |
The resources. |
onResourceUnassigned
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the deleted resource assignment. |
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. |
values | any |
The values of the processed resource and task. |
onScaleCellPrepared
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. |
|
scaleElement |
The scale cell. |
|
scaleIndex |
Specifies the scale's index. |
|
scaleType |
The scale type. |
|
separatorElement |
The separator after the scale cell. |
|
endDate |
The end date of the scale cell. |
|
startDate |
The start date of the scale cell. |
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. |
|
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 an EventObject or a jQuery.Event when you use jQuery. |
key | any |
The task key. |
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 an EventObject or a jQuery.Event when you use jQuery. |
key | any |
The task key. |
onTaskDeleted
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the deleted task. |
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. |
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. |
readOnlyFields |
An array of read-only fields. |
|
values | any |
The task values. |
The hiddenFields and readOnlyFields parameters affect only task fields. Disable the allowTaskResourceUpdating property to freeze the Resource Manager in the Task Details dialog.
See Also
onTaskInserted
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the inserted task. |
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. |
|
values | any |
The values of the inserted task. |
Note that you should not specify a task ID in the onTaskInserting
function.
See Also
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. |
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 widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The key of the updated task. |
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. |
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.
The 'color' field accepts the following values:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
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's scale type is calculated based on the time difference between the start of the first task and the end of the final task. For example, if this difference is more than a year, the scaleType property is set to 'years'.
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).
scaleTypeRange
Use the scaleTypeRange.min and scaleTypeRange.max properties to limit zoom in the Gantt chart.
See Also
sorting
Users can sort Gantt data by a single or multiple columns. Use the mode option to specify the sort mode.
Single Mode. Click a column header to sort data by this column. Subsequent clicks on the same header reverse the sort order.
Multiple Mode. Hold Shift and click column headers to sort data by multiple columns. Subsequent clicks on the same header with the Shift key pressed reverse the column's sort order. Set the showSortIndexes option to true to show the column sort index in the header.
To disable sorting for a particular column, set the column’s allowSorting option to false.
To clear sorting for a column, hold Ctrl and click the column header. You can also use the column header’s context menu to specify the column’s sort settings and clear sorting. Use the ascendingText, descendingText, and the clearText options to specify text for the corresponding context menu items.
tabIndex
The value of this property will be passed to the tabindex
attribute of the HTML element that underlies the UI component.
taskContentTemplate
Name | Type | Description |
---|---|---|
cellSize |
The size of the cell that contains the task. |
|
isMilestone |
Specifies whether the task is a milestone. |
|
taskData |
The processed task. |
|
taskHTML |
The default HTML element of the processed task. |
|
taskPosition |
The task's position. |
|
taskResources |
The task's resources. |
|
taskSize |
The task's size. |
- $(function() {
- $("#gantt").dxGantt({
- taskContentTemplate: getTaskContentTemplate,
- // ...
- });
- });
- function getTaskContentTemplate(item, container) {
- var $customContainer = $(document.createElement("div"))
- .addClass("custom-task")
- .text(item.taskData.title)
- .attr("style", "width:" + item.taskSize.width + "px");
- return $customContainer;
- }
taskProgressTooltipContentTemplate
Specifies custom content for the tooltip that displays the task's progress while the progress handler is resized in the UI.
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.
The 'color' field accepts the following values:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
See Also
taskTimeTooltipContentTemplate
Specifies custom content for the tooltip that displays the task's start and end time while the task is resized in the UI.
taskTooltipContentTemplate
The task tooltip's container. It is an HTML Element or a jQuery Element when you use jQuery.
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"
,"20vw"
,"80%"
,"auto"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.