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.
allowSelection
- $(function() {
- $("#gantt").dxGantt({
- allowSelection: false,
- // ...
- });
- });
See Also
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.
- $(function() {
- $("#gantt").dxGantt({
- columns: [{
- dataField: "title",
- caption: "Subject",
- width: 300
- }, {
- dataField: "start",
- caption: "Start Date"
- }, {
- dataField: "end",
- caption: "End Date"
- }],
- // ...
- });
- });
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
- $(function() {
- $("#gantt").dxGantt({
- dependencies: {
- dataSource: dependencies,
- keyExpr: "dependencyId",
- typeExpr: "dependencyType",
- predecessorIdExpr: "taskPredecessorId",
- successorIdExpr: "taskSuccessorId"
- },
- //...
- });
- });
- var dependencies = [{
- 'dependencyId': 0,
- 'taskPredecessorId': 1,
- 'taskSuccessorId': 2,
- 'dependencyType': 0
- },
- // ...
- ];
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.
- $(function() {
- $("#gantt").dxGantt({
- editing: {
- enabled: true,
- allowDependencyAdding: false,
- allowDependencyDeleting: false,
- allowResourceAdding: false,
- allowResourceDeleting: false,
- allowTaskAdding: false,
- allowTaskDeleting: false,
- allowTaskResourceUpdating: false,
- allowTaskUpdating: false
- }
- });
- });
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.
- $(function() {
- $("#gantt").dxGantt({
- firstDayOfWeek: 1,
- // ...
- });
- });
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onContextMenuPreparing: function (e) {
- // your code
- e.cancel = true;
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onCustomCommand: function (e) {
- // your code
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onDependencyDeleted: function (e) {
- if (e.key != 1)
- // your code
- }
- })
- })
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onDependencyDeleting: function (e) {
- if (e.key != 1) {
- // your code
- e.cancel = true;
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onDependencyInserted: function (e) {
- if (e.values.type == 3) {
- // your code
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onDependencyInserting: function (e) {
- if (e.values.type == 3) {
- // your code
- e.cancel = true;
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onResourceAssigned: function (e) {
- if (e.values.taskID != 0) {
- // your code
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onResourceAssigning: function (e) {
- if (e.values.taskID != 0) {
- // your code
- e.cancel = true;
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onResourceDeleted: function (e) {
- if (e.key == 0) {
- // your code
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onResourceDeleting: function (e) {
- if (e.key == 0) {
- // your code
- e.cancel = true;
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onResourceInserted: function (e) {
- if (e.values.text == " "){
- // your code
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onResourceInserting: function (e) {
- if (e.values.text == " "){
- // your code
- e.cancel = true;
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onResourceUnassigned: function (e) {
- if (e.key != 0) {
- // your code
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onResourceUnassigning: function (e) {
- if (e.key != 0) {
- // your code
- e.cancel = true;
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onSelectionChanged: function (e) {
- if (e.selectedRowKey === 2) {
- // your code
- } else {
- // your code
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onTaskClick: function (e) {
- if (e.key != 0) {
- // your code
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onTaskDblClick: function (e) {
- if (e.key != 0) {
- // your code
- e.cancel = true;
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onTaskDeleted: function (e) {
- if (e.key != 0) {
- // your code
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onTaskDeleting: function (e) {
- if (e.key != 0) {
- // your code
- e.cancel = true;
- }
- }
- });
- });
See Also
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.
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onTaskEditDialogShowing: function (e) {
- if (e.key != 0) {
- // your code
- e.cancel = true;
- }
- }
- });
- });
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onTaskInserted: function (e) {
- if (e.values.text == " ") {
- // your code
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onTaskInserting: function (e) {
- if (e.values.text == " ") {
- // your code
- e.cancel = true;
- }
- }
- });
- });
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. |
model |
Model data. Available only if you use Knockout. |
|
newValues | any |
The task values after moving. |
values | any |
The task values before moving. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onTaskMoving: function (e) {
- if (e.key != 0) {
- // your code
- e.cancel = true;
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onTaskUpdated: function (e) {
- if (e.key != 0) {
- // your code
- }
- }
- });
- });
See Also
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onTaskUpdating: function (e) {
- if (e.key != 0) {
- // your code
- e.cancel = true;
- }
- }
- });
- });
See Also
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
- $(function() {
- $("#gantt").dxGantt({
- resourceAssignments: {
- dataSource: resourceAssignments,
- keyExpr: "key",
- resourceIdExpr: "resourceKey",
- taskIdExpr: "taskKey"
- },
- //...
- });
- });
- var resourceAssignments = [{
- 'key': 0,
- 'taskKey': 3,
- 'resourceKey': 1
- },
- // ...
- ];
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
- $(function() {
- $("#gantt").dxGantt({
- resources: {
- dataSource: resources,
- keyExpr: "resourceId",
- textExpr: "title",
- colorExpr: "resourceColor"
- },
- //...
- });
- });
- var resources = [{
- 'resourceId': 1,
- 'title': 'Management',
- 'resourceColor': 'red'
- },
- // ...
- ];
scaleType
The scaleType property specifies the zoom level for tasks when the Gantt UI component is initialized or when you call the option() method.
- $(function() {
- $("#gantt").dxGantt({
- scaleType: 'hours',
- // ...
- });
- });
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).
selectedRowKey
- $(function() {
- $("#gantt").dxGantt({
- selectedRowKey: 1,
- // ...
- });
- });
See Also
stripLines[]
Strip lines allows you to highlight certain time or time intervals in the chart. Use the start property to specify an individual line or combine it with the end property setting to specify a time interval.
- $(function() {
- $("#gantt").dxGantt({
- stripLines: [{
- title: "Start",
- start: tasks[0].start
- }, {
- title: "Final Phase",
- start: tasks[tasks.length - 3].start,
- end: tasks[tasks.length - 1].end,
- }, {
- title: "Current Time",
- start: new Date(),
- cssClass: "current-time"
- }],
- //...
- });
- });
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
- $(function() {
- $("#gantt").dxGantt({
- tasks: {
- dataSource: tasks,
- keyExpr: "taskId",
- parentIdExpr: "parentTaskId",
- titleExpr: "taskTitle",
- progressExpr: "taskProgress",
- startExpr: "startDate",
- endExpr: "endDate",
- colorExpr: "taskColor"
- },
- //...
- });
- });
- var tasks = [{
- 'taskId': 1,
- 'parentTaskId': 0,
- 'taskTitle': 'Software Development',
- 'startDate': new Date('2019-02-21T05:00:00.000Z'),
- 'endDate': new Date('2019-07-04T12:00:00.000Z'),
- 'taskProgress': 31
- 'taskColor': 'red'
- },
- // ...
- ];
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.
- $(function() {
- $("#gantt").dxGantt({
- taskTooltipContentTemplate: getTaskTooltipContentTemplate,
- // ...
- });
- });
- function getTaskTooltipContentTemplate(task, container) {
- container[0].innerHTML = "";
- return "<div class='custom-tooltip-title'>" + task.title + "</div>";
- }
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;
- }
If you have technical questions, please create a support ticket in the DevExpress Support Center.