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.
allowSelection
- $(function() {
- $("#gantt").dxGantt({
- allowSelection: false,
- // ...
- });
- });
See Also
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.
- $(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.
endDateRange
- $(function() {
- $("#gantt").dxGantt({
- startDateRange: new Date(2018, 01, 1),
- endDateRange: new Date(2020, 01, 1)
- // ...
- });
- });
See Also
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.
- $(function() {
- $("#gantt").dxGantt({
- firstDayOfWeek: 1,
- // ...
- });
- });
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.
- $(function() {
- $("#gantt").dxGantt({
- headerFilter: {
- visible: true,
- width: 280,
- height: 350,
- searchTimeout: 800
- },
- // ...
- });
- });
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. |
- $(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 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. |
- $(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. |
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 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. |
- $(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. |
|
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 |
---|---|---|
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. |
- $(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. |
|
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 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. |
- $(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. |
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 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. |
- $(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. |
|
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
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. |
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onResourceManagerDialogShowing: function (e) {
- if (e.values[0].key != 1) {
- // your code
- e.cancel = true;
- }
- }
- });
- });
See Also
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. |
- $(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. |
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
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. |
The example below illustrates how to customize the scale.
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onScaleCellPrepared: function(e) {
- var scaleElement = e.scaleElement[0];
- if(e.scaleIndex === 0) {
- scaleElement.style.backgroundColor = "silver";
- scaleElement.innerText = "bottom";
- } else {
- scaleElement.style.backgroundColor = "LightSteelBlue";
- scaleElement.innerText = "top";
- }
- var border = e.separatorElement[0];
- border.style.borderColor = "steelBlue";
- }
- });
- });
The code below colors the scale cells depending on the season:
- $(function() {
- $("#gantt").dxGantt({
- // ...
- onScaleCellPrepared: function(e) {
- var scaleElement = e.scaleElement;
- var color = "";
- var month = e.end.getMonth();
- if (month > 1 && month < 5) {
- color = "lightGreen";
- } else if (month > 4 && month < 8) {
- color = "green";
- } else if (month > 7 && month < 11) {
- color = "yellow";
- } else
- color = "white";
- scaleElement.style.backgroundColor = color;
- }
- });
- });
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. |
- $(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 an EventObject or a jQuery.Event when you use jQuery. |
key | any |
The task key. |
- $(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 an EventObject or a jQuery.Event when you use jQuery. |
key | any |
The task key. |
- $(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 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. |
- $(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. |
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. |
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.
- $(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 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. |
- $(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. |
|
values | any |
The values of the inserted task. |
Note that you should not specify a task ID in the onTaskInserting
function.
- $(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. |
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 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. |
- $(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. |
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.
The 'color' field accepts the following values:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
- $(function() {
- $("#gantt").dxGantt({
- resources: {
- dataSource: resources,
- keyExpr: "resourceId",
- textExpr: "title",
- colorExpr: "resourceColor"
- },
- //...
- });
- });
- var resources = [{
- 'resourceId': 1,
- 'title': 'Management',
- 'resourceColor': 'red'
- },
- // ...
- ];
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.
- $(function() {
- $("#gantt").dxGantt({
- scaleType: 'hours',
- // ...
- });
- });
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.
- $(function() {
- $("#gantt").dxGantt({
- scaleTypeRange: {
- min: 'days',
- max: 'years'
- },
- // ...
- });
- });
See Also
selectedRowKey
- $(function() {
- $("#gantt").dxGantt({
- selectedRowKey: 1,
- // ...
- });
- });
See Also
showDependencies
Specifies whether to display dependencies between tasks.
- $(function() {
- $("#gantt").dxGantt({
- showResources: false,
- // ...
- });
- });
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.
- $(function() {
- $("#gantt").dxGantt({
- sorting: {
- mode: 'multiple',
- showSortIndexes: true,
- ascendingText: "Ascending Order",
- descendingText: "Descending Order",
- clearText: "Clear Sort"
- }
- });
- });
startDateRange
- $(function() {
- $("#gantt").dxGantt({
- startDateRange: new Date(2018, 01, 1),
- endDateRange: new Date(2020, 01, 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.
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.
- $(function() {
- $("#gantt").dxGantt({
- taskProgressTooltipContentTemplate: getTaskProgressTooltipContentTemplate,
- // ...
- });
- });
- function getTaskProgressTooltipContentTemplate(item, container) {
- var $customTooltipProgress = $(document.createElement("div"))
- .addClass("custom-tooltip");
- $(document.createElement("div"))
- .addClass("custom-tooltip-progress")
- .text("Progress: " + item.progress + "%")
- .appendTo($customTooltipProgress);
- // ...
- return $customTooltipProgress;
- }
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
- $(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'
- },
- // ...
- ];
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.
- $(function() {
- $("#gantt").dxGantt({
- taskTimeTooltipContentTemplate: getTaskTimeTooltipContentTemplate,
- // ...
- });
- });
- function getTaskTimeTooltipContentTemplate(item, container) {
- var $customTooltipTime = $(document.createElement("div"))
- .addClass("custom-tooltip");
- $(document.createElement("div"))
- .addClass("custom-tooltip-time")
- .text("End Date: " + item.end)
- .appendTo($customTooltipTime);
- // ...
- return $customTooltipTime;
- }
taskTooltipContentTemplate
The task tooltip'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) {
- var $customTooltip = $(document.createElement("div"))
- .addClass("custom-task-edit-tooltip");
- $(document.createElement("div"))
- .addClass("custom-tooltip-title")
- .text(task.title)
- .appendTo($customTooltip);
- // ...
- return $customTooltip;
- }
validation
- $(function() {
- $("#gantt").dxGantt({
- validation: {
- autoUpdateParentTasks: true,
- validateDependencies: true
- },
- // ...
- });
- });
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.
If you have technical questions, please create a support ticket in the DevExpress Support Center.