Gantt class

Gantt(client, oOptionsopt)

new Gantt(client, oOptionsopt)

The ExGantt/JS component is our approach to create timeline charts (also known as Gantt charts). Gantt chart is a time-phased graphic display of activity durations. Activities are listed with other tabular information on the left side with time intervals over the bars. Activity durations are shown in the form of horizontal bars. The ExGantt/JS is a HTML standalone-component, written in pure JavaScript, that uses no third-party libraries.
The ExGantt/JS component supports/inherits all objects, properties, members, methods and events of the ExTree/JS component.

Every option of the Gantt.Options and Tree.Options types has associated a property of the control. For instance, the option:

allowActions {string}, customizes the actions the user can perform once the user clicks or touches the control
is associated with the property:
AllowActions {string}, customizes the actions the user can perform once the user clicks or touches the control
which means that the following statements are equivalent:
oGantt.Options = {allowActions: "scroll"}
oGantt.SetOptions({allowActions: "scroll"})
oGantt.AllowActions = "scroll"
oGantt.SetAllowActions("scroll")
where oGantt is an object of Gantt type
Parameters:
Name Type Attributes Description
client any The client parameter indicates the control's client area as:
  • array of [x,y,width,height] type that specifies the control's client area
  • string, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
  • HTMLCanvasElement, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
oOptions object <optional>
 An object of Tree.Options type that defines different options to display the control. Additionally, it supports all fields of Gantt.Options class.
Requires:
  • module:exontrol.commmon.min.js
  • module:exontrol.menu.min.js
  • module:exontrol.tree.min.js
Gantt

Requires

  • module:exontrol.commmon.min.js
  • module:exontrol.menu.min.js
  • module:exontrol.tree.min.js

Classes

Options

Members

(static) DefCBCap :string

The DefCBCap field defines the bar's caption to show within the label of the combobox. The DefCBCap field is similar with the item-bar's caption option (exBarCaption). The DefCBCap supports exHTML format, including the <%=formula%> tag, where formula is an expression that supports predefined operators, functions and % keywords such as %0 (itembar's property), %C0 (cell's value), %CD0 (cell's extra-data) or %CS0 (cell' checkbox-state) The caption-expression supports the following keywords:
%0, %1, %2, ... specifies the value/option of the item-bar as name, start, end and so on (ItemBarPropertyEnum type)
%C0, %C1, %C2, ... specifies the caption of the cell, or the string the cell displays in the column with the index 0, 1 2, ...
%CD0, %CD1, %CD2, ... specifies the item-bar's user-date in the column with the index 0, 1 2, ...
%CS0, %CS1, %CS2, ... specifies the item-bar's state in the column with the index 0, 1 2, ...
.
Type:
  • string
Since:
  • 1.9
Example
"&lt;%=shortdate(%1)%> - &lt;%=shortdate(%2)%>" {string}, displays the start and end margins of the item-bar
 "&lt;b>&lt;%=(%CS0 ? %0 : ``)%>&lt;/b>&lt;%=(%CS0 ? `` : %0)%>" {string}, displays the item-bar's name in bold only if the first cell is checked )
DefCBCap

(static, readonly) GroupBarsOptionsEnum :number

The Gantt.GroupBarsOptionsEnum type specifies how two bars are grouped together. It can specify options to prevent changing the lengths of the bars or limit the interval between them when they are grouped.
Type:
  • number
Properties:
Name value Type Description
exGroupBarsNone -1 number Performs ungrouping the bars or specifies that the bars are not grouped. The exGroupBarsNone can't be used with any other options
exGroupBarsOptionNone 0 number Specifies no options when grouping bars (default option)
exPreserveBarLength 3 number Preserves the length of both bars when grouping. The length of both bars is not changed when another bar in the same group may change the length of bars A and B.
exPreserveBarLengthA 1 number Preserves the length of the bar A when grouping. The length of the bar A is not changed if another bar in the same group may change it by grouping. Use the exPreserveBarLength value to specify that both bars should preserve their lengths.
exPreserveBarLengthB 2 number Preserves the length of the bar B when grouping. The length of the bar B is not changed if another bar in the same group may change it by grouping. Use the exPreserveBarLength value to specify that both bars should preserve their lengths
exIgnoreOriginalInterval 4 number Ignores the original interval between bars when grouping. At the moment GroupBars method is called, the control keeps the original interval between bars, so this option will specify whether to handle or not. For instance, you can have the exIgnoreOriginalInterval, and you can specify a different interval between bars using the first parameter ( Fixed Interval ) in the Options parameter of the GroupBars method.
exLimitInterval 24 number Limits the interval between bars so it fits a specified range.
exLimitIntervalMin 8 number Limits the interval between bars so it can't be less than a specified value.
exLimitIntervalMax 16 number Limits the interval between bars so it can't be greater than a specified value.
exFlexibleInterval 32 number The interval between bars is not limited and the bar B can be moved anywhere to the right of the bar A.
Since:
  • 3.3

(static, readonly) HistogramCumulativeOriginalColorBarsEnum :number

The Gantt.HistogramCumulativeOriginalColorBarsEnum type indicates whether the color for the bars being represented in the histogram is changed.
Type:
  • number
Properties:
Name value Type Description
exShowCumulativeColor -1 number The color for bar is not changed, but its reflection in the histogram shows the corresponding cumulative color
exChangeColor 0 number The color for bar and its reflection in the histogram is showing the corresponding cumulative color
exKeepOriginalColor 1 number The color for bar and its reflection in the histogram is not changed

(static, readonly) HistogramTypeEnum :number

The Gantt.HistogramTypeEnum type specifies the types of the histogram that currently the control supports.
Type:
  • number
Properties:
Name value Type Description
exHistOverload 0 number Shows the overloads and subloads of your current planning situation. The histogram-graph shows the count of specified tasks day by day, or unit by unit
exHistOverAllocation 1 number Shows in percents, the over-allocations of your current planning situation using the effort of the task divided by the length of the task (effort/length). The exHistOverAllocation flag can be combined with exHistOverAllocationFixed or exHistOverAllocationMultiply. The work-load for a task is computed as exBarEffort / length of the bar. The work-load for the task is the work effort / task duration. (i.e. If item.exBarEffort = 1 and bar's length is 10 days, then the work-load = 0.1 or 10%). The histogram- graph shows the sum of the work-loads (the work-load of each task item is added, unit by unit)
exHistCumulative 256 number Bars in the histogram show cumulative colors. The exHistCumulative can be applied to exHistOverload and exHistOverAllocation values. For instance, the exHistOverAllocation + exHistCumulative defines a cumulative histogram for exHistOverAllocation type
exHistOverAllocationFixed 512 number Shows in percents, the over-allocations of your current planning situation using the effort of the task (effort). The exHistOverAllocationFixed can be combined with the exHistOverAllocation flag only
exHistOverAllocationMultiply 1024 number Shows in percents, the over-allocations of your current planning situation using the effort of the task multiplied by the length of the task (effort * length). The exHistOverAllocationFixed can be combined with the exHistOverAllocation flag only

(static, readonly) HistogramViewEnum :number

The Gantt.HistogramViewEnum type specifies the items to include in the histogram.
Type:
  • number
Properties:
Name value Type Description
exHistogramVisibleItems 1 number The histogram is shown for the visible items only
exHistogramSelectedItems 2 number The histogram is shown for the selected items only
exHistogramCheckedItems 4 number The histogram is shown for the checked items only
exHistogramSelectedBars 8 number The histogram is shown for the selected bars only
exHistogramUnlockedItems 16 number The histogram is shown only for unlocked items
exHistogramLockedTopItems 32 number The histogram is shown only for locked items in the top side of the control
exHistogramLockedBottomItems 64 number The histogram is shown only for locked items in the bottom side of the control
exHistogramAllItems 112 number The histogram is shown for all items
exHistogramFilteredItems 128 number The histogram is shown for the filtered items only
exHistogramLeafItems 256 number The histogram shows the bars for leaf items (a leaf item contains no child items)
exHistogramRecLeafItems 512 number The histogram shows all bars for all recursive leaf items (a leaf item contains no child items)
exHistogramNoGrouping 1024 number The histogram shows all bars without grouping based on the item's parent
exHistogramBackground 2048 number The histogram's chart goes on the background, while the non-working part is shown on front ( erases the non-working parts )
exHistogramNoGroupCaption 4096 number The histogram shows no caption for groups being shown
exHistogramGroupCumulative 8192 number The histogram shows cumulative groups

(static, readonly) ItemBarPropertyEnum :number

The Gantt.ItemBarPropertyEnum type holds the properties of the bar.
Type:
  • number
Properties:
Name value Type Description
exBarName 0 number Defines the bar's name (defines the bar's visual appearance) ("name" of exontrol.Gantt.BarOptions). The name of the bar does not indicate the bar's caption as exBarCaption property. The exBarName indicates a string such as "Task", "Progress", "Split", or any other predefined type.
exBarStart 1 number Specifies the date-time the bar starts from ("start" of exontrol.Gantt.BarOptions).
exBarEnd 2 number Specifies the date-time the bar ends to ("end" of exontrol.Gantt.BarOptions).
exBarCaption 3 number Specifies the caption to display within the bar ("caption" of exontrol.Gantt.BarOptions).
exBarHAlignCaption 4 number Specifies the horizontal-alignment / clipping of the item-bar's caption inside / outside the bar ("hAlignCaption" of exontrol.Gantt.BarOptions).
exBarVAlignCaption 5 number Specifies the vertical-alignment of the item-bar's caption inside / outside the bar ("vAlignCaption" of exontrol.Gantt.BarOptions).
exBarToolTip 6 number Specifies the tooltip to be shown once the cursor hovers the bar ("toolTip" of exontrol.Gantt.BarOptions).
exBarKey 9 number Indicates the bar's key (used only if item hosts multiple bars) ("key" of exontrol.Gantt.BarOptions).
exBarCanResize 10 number Specifies whether the user can resize the bar on both margins by drag (requires to be selectable too) ("canResize" of exontrol.Gantt.BarOptions).
exBarCanMove 11 number Specifies whether the user can move the bar within the same item by drag (requires to be selectable too) ("canMove" of exontrol.Gantt.BarOptions).
exBarPercent 12 number Specifies the bar's percent, as a value from 0 to 1 (for 100%) ("percent" of exontrol.Gantt.BarOptions).
exBarPercentCaptionFormat 13 number Specifies the HTML format to display the bar's percent ("percentCaptionFormat" of exontrol.Gantt.BarOptions).
exBarShowPercentCaption 14 number Shows or hides the bar's percent-caption ("showPercentCaption" of exontrol.Gantt.BarOptions).
exBarAlignPercentCaption 15 number Horizontally aligns the bar's percent-caption ("alignPercentCaption" of exontrol.Gantt.BarOptions).
exBarCanResizePercent 16 number Specifies whether the user can resize the percent at runtime ("canResizePercent" of exontrol.Gantt.BarOptions).
exBarCanResizePercent 18 number Indicates the vertical-offset relative to the default position, the bar is displayed ("offset" of exontrol.Gantt.BarOptions).
exBarEffort 21 number Indicates the bar's effort, or the effort to execute an unit within the bar (bar's histogram value) ("effort" of exontrol.Gantt.BarOptions).
exBarCanMoveToAnother 28 number Specifies whether the bar can be moved to another item by drag and drop (requires to be selectable too) ("canMoveToAnother" of exontrol.Gantt.BarOptions).
exBarSelectable 29 number Indicates whether the item-bar is selectable or unselectable ("selectable" of exontrol.Gantt.BarOptions).
exBarColor 33 number Defines the bar's individual-shape ("shape" of exontrol.Gantt.BarOptions).
exBarOverviewColor 41 number Defines the bar's individual overview-color ("overviewColor" of exontrol.Gantt.BarOptions).
exBarExtraCaption 44 number Specifies the extra caption to display within the bar ("extraCaption" of exontrol.Gantt.BarOptions).
exBarExtraCaptionHAlign 45 number Specifies the horizontal-alignment / clipping of the item-bar's extra caption inside / outside the bar ("extraCaptionHAlign" of exontrol.Gantt.BarOptions).
exBarExtraCaptionHAlign 46 number Specifies the vertical-alignment of the item-bar's extra caption inside / outside the bar ("extraCaptionVAlign" of exontrol.Gantt.BarOptions).
exBarResources 49 number Specifies the resources to be used by the current bar, separated by commas ("resources" of exontrol.Gantt.BarOptions).
exBarResourceFormat 50 number Specifies the format for displaying a bar's resource ("resourceFormat" of exontrol.Gantt.BarOptions).
exBarOverlaidKey 52 number Specifies the z-order of the bar when it overlaps other bars (exOverlaidBarsCascade type) ("overlaidKey" of exontrol.Gantt.BarOptions).
exBarShowCaption 56 number Shows or hides the bar's caption ("showCaption" of exontrol.Gantt.BarOptions).
exBarShowExtraCaption 57 number Shows or hides the bar's extra caption ("showExtraCaption" of exontrol.Gantt.BarOptions).
exBarHistLegend 60 number Specifies the bar's description in the histogram-legend ("histLegend" of exontrol.Gantt.BarOptions).
exBarResourcesFormat 266 number Gets the HTML caption to display the item-bar's resources (including the percentage of the resource) ("resourcesFormat" of exontrol.Gantt.BarOptions).
exBarCriticalPath 269 number Indicates whether the current bar is part of the critical path (currently, the exBarCriticalPath property specifies the position (1-based) of the bar in the critical path) ("criticalPath" of exontrol.Gantt.BarOptions).
exBarPredecessor 270 number Indicates the list of predecessor bars (INDEX1['SF'|'FS'|'FF'|'SS'][KEY][:['W']LAG|:LAG['W']] format), separated by comma
exBarSuccessor 271 number Indicates the list of successor bars (INDEX1['SF'|'FS'|'FF'|'SS'][KEY][:['W']LAG|:LAG['W']] format), separated by comma
exBarParent 512 number Gets the item that hosts the item bar ("parent" of exontrol.Gantt.BarOptions).
exBarDuration 513 number Gets the item-bar's duration or length in days ("duration" of exontrol.Gantt.BarOptions).

(static, readonly) LevelLineEnum :number

The Gantt.LevelLineEnum type specifies the style of lines to shown within the chart's levels.
Type:
  • number
Properties:
Name value Type Description
exLevelNoLine 0 number No line is shown
exLevelDefaultLine -1 number Indicates the default grid line style
exLevelDotLine 1 number Indicates a dotted line. For vertical/tick lines, it can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine. Can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine option.
exLevelSolidLine 2 number Indicates a solid line. For vertical/tick lines, it can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine. Can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine option.
exLevelLowerHalf 16 number Indicates that the line is shown in the lower half of the level. For vertical/tick lines, it can be combined with exLevelDotLine or exLevelSolidLine
exLevelUpperHalf 32 number Indicates that the line is shown in the upper half of the level. For vertical/tick lines, it can be combined with exLevelDotLine or exLevelSolidLine
exLevelMiddleLine 64 number Indicates that the line is shown in the middle. For vertical/tick lines, it can be combined with exLevelDotLine or exLevelSolidLine
exLevelQuarterHeight 256 number Indicates that the line is shown as a quarter of the full height. Specify the exLevelQuarterHeight option to show shorter tick lines in the chart's level. Can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine option

(static, readonly) OverlaidBarsTypeEnum :number

The Gantt.OverlaidBarsTypeEnum type defines the type of overlay-bar the control supports.
Type:
  • number
Properties:
Name value Type Description
exOverlaidBarsNone 0 number No overlaid bars are shown
exOverlaidBarsOffset 1 number The overlaid bars are shown using a different vertical offset. The Overlaid(exOverlaidBarsOffset) specifies the vertical offset, in pixels, to display the overlaid bars. This option does NOT change the height of the item.
exOverlaidBarsIntersect 2 number The overlaid portion is shown using a different type of bar. The Overlaid(exOverlaidBarsIntersect) specifies the name of the bar to be displayed on the portion that laid over bars. This option does NOT change the height of the item.
exOverlaidBarsStack 3 number The bars that covers each other are shown as a stack. The Overlaid(exOverlaidBarsStack) specifies the distance in pixels between two bars that covers each other. This option changes the height of the item so the bars that covers each other are displayed entirely.
exOverlaidBarsCascade 4 number The bars gets arranged as a cascade with the z-order being indicated by ItemBar(exBarOverlaidCascade) key. Arrange the bars on the same level for those with the same exBarOverlaidCascade key, and on a different level for bars with a different exBarOverlaidCascade key. This option changes the height of the item so the bars that covers each other are displayed entirely.
exOverlaidBarsTransparent 256 number The overlaid portion is shown using a semi-transparent color. The Overlaid(exOverlaidBarsTransparent) specifies the percent of transparency being applied to the covered bar.
exOverlaidBarsStackAutoArrange 512 number The overlaid stack is automatically arranged for best fit in the item. The exOverlaidBarsStackAutoArrange flag can be combined with exOverlaidBarsStack flag only.
exOverlaidBarsIncludeCaption 4096 number The overlaid mechanism includes the caption for bars
exOverlaidBarsStrict 8192 number The overlaid mechanism includes only bars in the same group ( OverlaidGroup property ) but of different types.

(static, readonly) OverviewVisibleEnum :number

The Gantt.OverviewVisibleEnum type specifies the way items are represented in the overview area.
Type:
  • number
Properties:
Name value Type Description
exOverviewHidden 0 number The control's overview is not visible
exOverviewShowOnlyVisible 1 number The control's overview shows the bars from the visible items using the range of bars in the visible items only
exOverviewShowAllVisible 2 number The control's overview shows the bars from the visible items using the range for all bars in the chart.
exOverviewAllowVerticalScroll 256 number Indicates whether the user can vertically scroll the chart while navigating up or down the overview part of the control. For instance, you can click the overview panel, the chart displays the selected area, and you can drag the cursor left or right to select a new date-time range to be displayed, or you can go up or down, to scroll items up or down.
exOverviewHideBars 512 number Prevents showing the bars in the overview part of the control. For instance, you can use this flag in combination of any other flag to show just the time-scale in the overview part of the control, to allow the user to quickly scroll the chart's content to a specific time-zone.
exOverviewShowDateTimeScale 4096 number Specifies whether the overview part of the control displays the date-time scale. This flag includes the time-scale on the overview. The time-scale intersects the bars in the overview. By default, the time-scale of the overview part is shown on the top of it, so you can combine the exOverviewShowDateTimeScale flag with exOverviewShowDateTimeScaleBottom flag, to display the time-scale on the bottom side of the overview part of the control.
exOverviewShowDateTimeScaleSplit 5120 number Specifies whether the overview's date-time scale is displayed into a separate portion of the overview. This flag includes the time-scale on the overview. The time-scale does not intersect the bars in the overview. By default, the time-scale of the overview part is shown on the top of it, so you can combine the exOverviewShowDateTimeScaleSplit flag with exOverviewShowDateTimeScaleBottom flag, to display the time-scale on the bottom side of the overview part of the control.
exOverviewShowDateTimeScaleBottom 6144 number Specifies whether the overview's date-time scale is displayed on the bottom side of the overview. By default, the time-scale of the overview part is shown on the top of it, so you can use the exOverviewShowDateTimeScaleBottom flag with exOverviewShowDateTimeScale or exOverviewShowDateTimeScaleSplit to display the time-scale on the bottom side of the overview part of the control.
exOverviewShowMargins 8192 number Displays the limits of the overview bars. You can include the exOverviewShowMargins flag to display the margins/limits of all (project) / visible bars. In other words, the exOverviewShowMargins flag displays the minimal ItemBar(exBarStart) value, and the maximal ItemBar(exBarEnd) value.
exOverviewShowSelMargins 16384 number Displays the selection limits (first/last visible date in the chart).
exOverviewSplitter 65536 number Specifies whether the overview's horizontal splitter is visible or hidden(makes the control's overview resizable or fixed)

(static, readonly) PutResEnum :number

The Gantt.PutResEnum type defines the operations for loading resources from source controls and saving them to target controls.
Type:
  • number
Properties:
Name value Type Description
exPutResLoad 1 number Loads the resources for all bars from another control (synchronizes the resources from the source control to the target control)
exPutResSave 2 number Saves the resources of all bars to another control (syncronizes the resources from the target control back to the source control)
Since:
  • 3.2

(static) type :string

The type field defines the full-name of the object (the constructor.name does not give the same name for minimized forms). The Gantt.type member always returns "Gantt"
Type:
  • string
Since:
  • 1.8

(static) version :string

The version field defines the version of the control. The current version is 3.2
Type:
  • string

Methods

AddGanttView(name, attributesopt) → {GV}

The AddGanttView() method creates a new view to display bars. The RemoveGanttView() method removes the chart-view already created by the AddGanttView() method.
Parameters:
Name Type Attributes Description
name string defines the name of the gantt-view to be created. It must be an unique name. The "tree" defines the control's default-tree view, and it is reserved. If missing, the "tree.split" is used instead
attributes exontrol.W.Options <optional>
 A exontrol.W.Options that defines the attributes of the window
Properties
Name Type Description
Visible boolean The Visible field indicates whether the window is visible or hidden.
VisibleExtends string The VisibleExtends field specifies the list of windows the current window depends to be visible or hidden. A string expression that specifies the list of windows the current window's visibility depends on as explained:
  • if the VisibleExtends property includes the window itself, the window is visible if any window in VisibleExtends is visible, else
  • if the VisibleExtends property does NOT includes the window itself, the window is hidden if any window in VisibleExtends is hidden (or the window is visible if all VisibleExtends windows are visible)
AllowKeys boolean The AllowKeys field specifies whether the window can receive the Keys events. By default, only the canvas window receives all the keys.
Enabled boolean The Enabled field specifies whether the window is enabled or disabled (the window is protected and shown in gray).
Resizable boolean The Resizable field indicates whether the window is resizable or fixed.
Locked boolean The Locked field specifies that the window is locked (the window is protected).
Dock exontrol.WDT The Dock field specifies how the control borders are docked to its parent control and determines how a control is resized with its parent. The exontrol.WDT type supports the following values:
  • N(0), the window is not docked (none)
  • T(1), the window's top edge is docked to the top of its containing window (top)
  • B(2), the window's bottom edge is docked to the bottom of its containing window (bottom)
  • L(3), the window's left edge is docked to the left edge of its containing window (left)
  • R(4), the window's right edge is docked to the right edge of its containing window (right)
  • F(5), all the window's edges are docked to all edges of its containing window and sized appropriately (fill)
Size number The Size field defines the width/height of the window when it is docked.
SizeExtends string The SizeExtends field specifies the list of windows that shares the same size. Once a window is resized, all its SizeExtends windows are sized the same as the current one.
Client Array.<number> The Client field specifies position of the window relative to the parent window, as an array of [x,y,width,heigh] type.
Background string The Background field defines the window's background color ( CSS Color ) or null/undefined if not provided.
Foreground string The Foreground field defines the window's foreground color ( CSS Color ) or null/undefined if not provided.
Opacity number The Opacity field indicates the window's opacity, as a number between 0 and 1 (1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent)
HoverBackground string The HoverBackground field, defines the window's background color while the cursor hovers it ( CSS Color ) or null/undefined if not provided
HoverForeground string The HoverForeground field defines the window's foreground color while the cursor hovers it( CSS Color ) or null/undefined if not provided
HoverOpacity number The HoverOpacity field indicates the window's opacity, as a number between 0 and 1 (1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent), when the cursor hovers it
DrawWindowFrame boolean The DrawWindowFrame field indicates whether the window draws its frame.
Extends string The Extends field indicates a list of windows separated by comma character to extend the current's client area to. The windows(child windows) must have the z-order greater than the z-order of the current window, else they will be ignored. The Extends field changes the z-order of the windows as well.
HoverExtends string The HoverExtends field specifies the list of windows separated by comma character that receives the hover-events once the cursor hovers the current window.
AllowXChg boolean The AllowXChg field specifies whether the window can exchange its UI position with another window. Only windows with AllowXChg field set can be exchanged.
XChgID string The XChgID field specifies the general expression, whose evaluated result defines the caption to be displayed on the window's anchor-exchange part. The expression supports keywords like index, name and shortname, that indicates the window's index, a value starting from 0, the window's name and short-name. The evaluated result can include exontrol's HTML tags that will be applied on the window's anchor-exchange element. If the expression is not valid, the XChgID value is used as it is.
Control object The Control field defines the control associated with the window (for internal use only).
HScroll string The HScroll field defines window's horizontal scroll bar. A string expression that indicates the name of the window that hosts an exontrol.SB control or an object of exontrol.SB type that defines the window's horizontal scroll bar (for internal use only).
VScroll string The VScroll field defines window's vertical scroll bar. A string expression that indicates the name of the window that hosts an exontrol.SB control or an object of exontrol.SB type that defines the window's vertical scroll bar (for internal use only).
Layout string The Layout field defines the properties (separated by comma) the GetLayout/SetLayout methods of CW saves/restores (for internal use only).
Returns:
Returns the newly created view as an object of GV type. Returns null, in case there is already a window with specified name.
Type
GV
AddGanttView

Bar(name, includeShortcutopt) → {Bar}

The Bar() method gets the bar giving its index, name or reference. The Bar(name) method is equivalent with Chart.Bars.Item(name) method.
Parameters:
Name Type Attributes Description
name any The name parameter could be any of the following:
  • name {number}, indicates a numeric value that defines the index of the bar to request
  • name {string}, specifies a string expression that defines the name of the bar to request
  • name {Bar}, specifies the object reference to the bar to request for
includeShortcut boolean <optional>
 Specifies whether the bar is searched for its shortcut as well (defaults to false) (@since 3.2)
Since:
  • 1.6
Returns:
Returns null(the bar is not found), or an object of Bar type, if the bars collection contains the giving name.
Type
Bar
Example
The following statements are equivalents:

   oGantt.Bar("Task") {Bar}
   oGantt.Chart.Bar("Task") {Bar}
   oGantt.Chart.Bars.Item("Task") {Bar}

 and returns the "Task" bar

where oGantt is an object of Gantt type
Bar

Export(exportOptsopt) → {any}

The Export() method exports the control's data as an array or CSV format. The Export() method extends the extree's Export() method. The GetData() method is equivalent with Export() method.
Parameters:
Name Type Attributes Description
exportOpts object <optional>
 Indicates the options to export control's data. The exportOpts object can include any of the following fields:
  • items {string}, specifies the items to export as one of the following values:
    • "all", exports all items, including the hidden or collapsed items
    • "vis", exports only visible items ( child items of a collapsed item, or not-visible items ( item's height is 0 ) are not exported )
    • "sel", exports only selected items
    • "chk", exports only checked items (within the first column of columns field, else column with the index 0)
  • columns {any}, specifies a list of columns to export as explained bellow:
    • columns {null}, exports all columns of the control
    • columns {number}, indicates a numeric value that defines the index of the column to export
    • columns {string}, specifies a list of index/identifier/key/caption/plain-caption, separated by comma character
    • columns {Column}, specifies the object reference to the column to export
  • rtrim {boolean}, specifies whether undefined values on the right of each row/item are excluded from the export data (specifies whether the number of fields within the lines is constant or variable)
  • format {string}, determines the type of data the Export() method returns
  • eor {string}, specifies the characters the row/item/line ends (has effect only if format field is "CSV")
  • eof {string}, specifies the character to separate fields within the row/item/line (has effect only if format field is "CSV")
  • quote {string}, specifies the character to quote values (has effect only if format field is "CSV")
  • hdr {boolean}, specifies whether the method exports the header of the columns (first line)
  • data {string}, indicates the name of the method to export data of the cell (by default it is "v" which defines the cell's value). You can use "pc" to get the plain-caption of the cell, or any other method of the cell
Returns:
Returns an array of [[value]] type or the control's data as as string in CSV format (only if the exportOpts.format field is "CSV")
Type
any
Export

GetChart() → {Chart}

The GetChart() method gets the control's chart object
Returns:
Returns an object of Chart type that represents the control's chart object.
Type
Chart
Example
The following statements are equivalents:

 oGantt.GetChart(), returns the control's chart object
 oGantt.Chart, returns the control's chart object

where oGantt is an object of Gantt type
GetChart

GetData() → {any}

The GetData() method exports the control's data as an array or CSV format. The GetData() method extends the extree's GetData() method. The GetData() method is equivalent with Export() method. The ExportOptions type defines the default options to export data.
Returns:
Returns an array of [[value]] type or the control's data as as string in CSV format (only if the ExportOptions.format field is "CSV")
Type
any
GetData

Import(source, importOptsopt)

The Import() method imports data from CSV/XML format. The Import() method extends the extree's Import() method. The SetData(value) method is equivalent with Import(value) method.
Parameters:
Name Type Attributes Description
source any The source parameter may be one of the following:
  • A String expression that specifies the URL to a CSV or XML file (contains no eof, eor or str). For example, "datasource.xml" imports the content of the 'datasource.xml' file
  • A String expression in CSV or XML format. For example, "Item 1.1,SubItem 1.2\r\nItem 1.2,SubItem 2.2" creates two columns and two rows
  • An array of [value] or [[value]] type that defines the data to load. For instance, [["Item 1.1","Item 1.2"],["Item 2.1","Item 2.2"]] creates two columns and two rows
  • (@since 3.2) An object of {columns, items, links} type, where:
    • 'columns' is an array of [(string|ColumnOptions)] type. For instance {columns: "Name,Start,End"}, adds three columns, or {columns: ["Name", {caption: "Filter", displayFilterButton: true}]} adds two columns
    • 'items' is an array of [(string|ItemOptions)] type.
      The ItemOptions type supports a recursive 'items' property to specify child items. For instance, {columns: "Def", items: {value: "Root", expanded: false, items:["Child 1", "Child 2", "Child 3"]}} defines a single-column control with a collapsed root item labeled 'Root' and three child items named 'Child 1', 'Child 2', and 'Child 3', or {columns: [{caption: "C1", displayFilterButton: true}, "C2"], items: [{value: ["R1.1", "R1.2"], items: [["C1.1", "C1.2"], ["C2.1", "C2.2"], ["C3.1", "C3.2"]]}, ["R2.1", "R2.2"]]} defines a dataset with two columns labeled as C1 (with a filter button for user value filtering) and C2. It includes two root items and three child items under the first root, each specifying values for their respective cells in the table.
      The 'bars' field (of [ItemBarOptions] type) within the 'items' field (of [ItemOptions] type) specifies the bars, to add to the item when using the Data/SetData(value) method. For example, {items: {value: "Machine", bars: { name: "Task", start: "#01/12/2024#", end: "#01/22/2024#" }}} adds a single item named 'Machine' with a 'Task' bar that starts on 01/12/2024 and ends on 01/22/2024, or {items: {value: "Machine", bars: [{ name: "Task", start: "#01/01/2024#", end: "#01/11/2024#", key: "A"}, { name: "Task", start: "#01/12/2024#", end: "#01/22/2024#", key: "B"}]}} adds a single item named 'Machine' with two 'Task' bars
    • 'links' is an array of [(string|LinkOptions)] type. The 'links' field of type [LinkOptions] specifies the connections between item-bars when using the Data/SetData(value) method, where the value parameter can be an object of {columns, items, links} type. For instance, {links: {from: 0, to: 1}, items: [{value: "Machine 1", bars: {name: "Task", start: "#01/10/2024#", end: "#01/15/2024#"}}, {value: "Machine 2", bars: {name: "Task", start: "#01/16/2024#", end: "#01/21/2024#"}}]} adds a link between the first and second item-bars
  • An object that includes the "files" member of FileList type (representing a local file dropped into the control)
importOpts object <optional>
 The importOpts parameter specifies options to import data into the control as object of ImportOptions type.
Properties
Name Type Description
columnCaption string defines an expression that generates captions for new columns.
clear boolean specifies whether previously data of the control is cleared
parent any defines the parent item to insert data to
limit number specifies the maximum number of rows/items/lines to import
format string determines the format of source to import data from
eor string specifies the characters the row/item/line ends (has effect only if format field is "CSV")
eof string specifies the character to separate fields within the row/item/line (has effect only if format field is "CSV")
str string specifies the character to quote values (has effect only if format field is "CSV")
hdr boolean indicates whether the first line in data represents the control's header (has effect only if format field is "CSV")
ignoreXML boolean specifies whether the file is loaded as CSV even for .xml files (files of XML type)
Example
"xml/datasource.xml" {string}, imports data from datasource.xml file
"Item 1.1,SubItem 1.2\r\nItem 1.2,SubItem 2.2" {string}, creates two columns and two rows
{items: {value: "Machine", bars: {name: "Task", start: "#01/10/2024#", end: "#01/15/2024#"}}} {object}, inserts a 'Task' bar for a new item labeled 'Machine' (@since 3.2)
{items: [{value: "Machine 1", bars: {name: "Task", start: "#01/10/2024#", end: "#01/15/2024#"}}, {value: "Machine 2", bars: {name: "Task", start: "#01/16/2024#", end: "#01/21/2024#"}}], links: {from: 0, to: 1}} {object}, Creates two items, each with its own task bar, and establishes a link between them (@since 3.2)
Import

ItemBar(item, key) → {ItemBar}

The ItemBar() method returns the item-bar based on the item and its key, as an object of Gantt.ItemBar type (equivalent of Item.ItemBar method)
Parameters:
Name Type Description
item any The item parameter could be any of the following: item {number}, indicates a numeric value that defines the index of the item to request item {string}, specifies a string expression that defines the identifier/key of the item to request item {exontrol.Tree.Item}, specifies the object reference to the item to request for
key any Specifies the key of the item-bar to request
Returns:
Returns null (no item-bar) or the item-bar as an object of Gantt.ItemBar type
Type
ItemBar
ItemBar
The Link() method gets the link giving its index, identifier/key or reference.
Parameters:
Name Type Description
id number | string | Link The id parameter could be any of the following:
  • id {number}, indicates a numeric value that defines the index of the link to request
  • id {string}, specifies a string expression that defines the identifier/key/plain-caption of the link to request
  • id {Link}, specifies the object reference to the link to request for
Since:
  • 1.1
Returns:
Returns null if the link is not found, or an object of Link type, if the links collection contains the giving id.
Type
Link
Link

PutRes(target, typeopt)

The PutRes() method synchronizes the resources of the source control with the target control based on the Resources/GetResources()/SetResources(value) method of the ItemBar object. In order to use the PutRes method the Source control must:
  • specify the activity/bar's resources using the Resources/GetResources()/SetResources(value) method of the ItemBar object
The PutRes(exPutResLoad) method updates the Target as follows:
  • adds the "Resources" column (nothing happens if the PutRes method was already called, or the Target control already contains a column with the Key "Resources")
  • adds a new item with the name of the resource for each resource found ('resources' of ItemBar) in the Source control ( R1, R2, ... )
  • adds a new bar for each activity/bar in the Source control, that uses the specified resource, where the 'percent' and 'effort' properties of ItemBar indicate the usage of the resource (numeric expression between 0 and 1 ). During the BarResizing event, if a histogram view is implemented for the Target control, the 'effort' property should be adjusted to reflect the 'percent' value.
The PutRes(exPutResSave) method updates the Source control as follows:
  • updates the 'start' and 'end' margins of the activity/bar in the Source control based on its associated bar in the Target control
  • updates the 'resources' property in the Source control with the new resource usage indicated by the 'percent' property in the Target control
Parameters:
Name Type Attributes Description
target Gantt Indicates the target to update
type PutResEnum <optional>
 Specifies the type of updating, as a value of {PutResEnum} type, exPutResLoad is missing, null or undefined
Since:
  • 3.2
Example
oSource.PutRes(oTarget), updates and lists the resources of the Source control to the Target control (Source => Target)
 oSource.PutRes(oTarget, "save"), updates the resources of the Source control from the Target control (Target => Source)
PutRes

RemoveGanttView(name)

The RemoveGanttView() method removes the chart-view already created by the AddGanttView() method.
Parameters:
Name Type Description
name string defines the name of the gantt-view to be removed. The "gantt" defines the control's default-chart view, and it can not be removed.
RemoveGanttView

SetData(value)

Imports data from CSV or XML files. The SetData(value) method extends the extree's SetData(value) method. The SetData(value) method is equivalent with Import(value) method. The ImportOptions type defines default options to import data.
Parameters:
Name Type Description
value any Indicates the source of the data, as one of the following:
  • A String expression that specifies the URL to a CSV or XML file (contains no eof, eor or str). For example, "datasource.xml" imports the content of the 'datasource.xml' file
  • A String expression in CSV or XML format. For example, "Item 1.1,SubItem 1.2\r\nItem 1.2,SubItem 2.2" creates two columns and two rows
  • An array of [value] or [[value]] type that defines the data to load. For instance, [["Item 1.1","Item 1.2"],["Item 2.1","Item 2.2"]] creates two columns and two rows
  • (@since 3.2) An object of {columns, items, links} type, where:
    • 'columns' is an array of [(string|ColumnOptions)] type. For instance {columns: "Name,Start,End"}, adds three columns, or {columns: ["Name", {caption: "Filter", displayFilterButton: true}]} adds two columns
    • 'items' is an array of [(string|ItemOptions)] type.
      The ItemOptions type supports a recursive 'items' property to specify child items. For instance, {columns: "Def", items: {value: "Root", expanded: false, items:["Child 1", "Child 2", "Child 3"]}} defines a single-column control with a collapsed root item labeled 'Root' and three child items named 'Child 1', 'Child 2', and 'Child 3', or {columns: [{caption: "C1", displayFilterButton: true}, "C2"], items: [{value: ["R1.1", "R1.2"], items: [["C1.1", "C1.2"], ["C2.1", "C2.2"], ["C3.1", "C3.2"]]}, ["R2.1", "R2.2"]]} defines a dataset with two columns labeled as C1 (with a filter button for user value filtering) and C2. It includes two root items and three child items under the first root, each specifying values for their respective cells in the table.
      The 'bars' field (of [ItemBarOptions] type) within the 'items' field (of [ItemOptions] type) specifies the bars, to add to the item when using the Data/SetData(value) method. For example, {items: {value: "Machine", bars: { name: "Task", start: "#01/12/2024#", end: "#01/22/2024#" }}} adds a single item named 'Machine' with a 'Task' bar that starts on 01/12/2024 and ends on 01/22/2024, or {items: {value: "Machine", bars: [{ name: "Task", start: "#01/01/2024#", end: "#01/11/2024#", key: "A"}, { name: "Task", start: "#01/12/2024#", end: "#01/22/2024#", key: "B"}]}} adds a single item named 'Machine' with two 'Task' bars
    • 'links' is an array of [(string|LinkOptions)] type. The 'links' field of type [LinkOptions] specifies the connections between item-bars when using the Data/SetData(value) method, where the value parameter can be an object of {columns, items, links} type. For instance, {links: {from: 0, to: 1}, items: [{value: "Machine 1", bars: {name: "Task", start: "#01/10/2024#", end: "#01/15/2024#"}}, {value: "Machine 2", bars: {name: "Task", start: "#01/16/2024#", end: "#01/21/2024#"}}]} adds a link between the first and second item-bars
  • An object that includes the "files" member of FileList type (representing a local file dropped into the control)
Example
"xml/datasource.xml" {string}, imports data from datasource.xml file
"Item 1.1,SubItem 1.2\r\nItem 1.2,SubItem 2.2" {string}, creates two columns and two rows
{items: {value: "Machine", bars: {name: "Task", start: "#01/10/2024#", end: "#01/15/2024#"}}} {object}, inserts a 'Task' bar for a new item labeled 'Machine' (@since 3.2)
{items: [{value: "Machine 1", bars: {name: "Task", start: "#01/10/2024#", end: "#01/15/2024#"}}, {value: "Machine 2", bars: {name: "Task", start: "#01/16/2024#", end: "#01/21/2024#"}}], links: {from: 0, to: 1}} {object}, Creates two items, each with its own task bar, and establishes a link between them (@since 3.2)
SetData

feIB(callback, thisArg)

The feIB/forEachItemBar() method invokes the callback for each item-bar of the control (unscrolled(top,bottom items) and scrolled items as well)
Parameters:
Name Type Description
callback callback A function of callback(oItemBar) type that's called for every item-bar, where oItemBar is oItemBar {ItemBar}, specifies an item-bar of ItemBar type
thisArg any Indicates the value of "this" keyword during the callback
feIB

feIBU(callback, thisArg) → {any}

The feIBU/forEachItemBarUntil() method invokes the callback for each item-bar of the control (unscrolled(top,bottom items) and scrolled items as well), until the callback returns a not-empty value
Parameters:
Name Type Description
callback callback A function of callback(oItemBar) {any} type that's called for every item-bar, where oItemBar is oItemBar {ItemBar}, specifies an item-bar of ItemBar type
thisArg any Indicates the value of "this" keyword during the callback
Returns:
Retuns the result of the last-callback
Type
any
feIBU

feL(callback, thisArg)

The feL/forEachLink() method invokes the callback for each link of the control
Parameters:
Name Type Description
callback callback A function of callback(oLink) type that's called for every link, where oLink is oLink {Link}, specifies a link of Link type
thisArg any Indicates the value of "this" keyword during the callback
Since:
  • 1.1
feL

feLU(callback, thisArg) → {any}

The feLU/forEachLinkUntil() method invokes the callback for each link of the control, until the callback returns a not-empty value
Parameters:
Name Type Description
callback callback A function of callback(oLink) type that's called for every link, where oLink is oLink {Link}, specifies a link of Link type
thisArg any Indicates the value of "this" keyword during the callback
Since:
  • 1.1
Returns:
Retuns the result of the last-callback
Type
any
feLU

Events

The onallowlink() method occurs to querry if a link between two bars is possible. The Add(oLinkOpts) method creates and adds a link between two bars.
Parameters:
Name Type Description
oEvent object holds information about the link to create, as an object of {start, end, cancel} type.
Properties
Name Type Description
start ItemBar defines the bar the link starts from, as an object of ItemBar type
end ItemBar defines the bar the link ends to, as an object of ItemBar type
cancel boolean specifies whether the link can be created. By default, the cancel is false, so the link is created. Set on True, to prevent creating the link between bars
Example
The following samples cancels adding any links:

oGantt.onallowlink = function (oEvent)
{
 oEvent.cancel = true;
}

or

oGantt.Listeners.Add("onallowlink", function (oEvent)
{
 oEvent.cancel = true;
})

where oGantt is an object of Gantt type
onallowlink

onbarparentchange

The onbarparentchange() method occurs once the item-bar is about to be moved to a new item, by drag. The Parent / GetParent() method gets the item that hosts the item bar.
Parameters:
Name Type Description
oEvent object holds information about the item-bar being moved, as an object of {newItem, item, key, bar, cancel} type.
Properties
Name Type Description
newItem Item indicates the new parent-item of the item-bar, as an object of Item type
item Item specifies the item that hosts the bar being moved, as an object of Item type
key any indicates the key of the item-bar being moved
bar ItemBar indicates the item-bar being moved, as an object of ItemBar type
cancel boolean indicates whether the item-bar bar can be moved from item to newItem. By default, the cancel is false, so the bar can be moved to newItem. Set the cancel field on true, to prevent moving the bar to newItem.
Example
The following samples display the bar's new item once it is moved to another item:

oGantt.onbarparentchange = function (oEvent)
{
 console.log(oEvent.newItem);
}

or

oGantt.Listeners.Add("onbarparentchange", function (oEvent)
{
 console.log(oEvent.newItem);
})

where oGantt is an object of Gantt type

The following samples cancels moving the bar from an ite to another:

oGantt.onbarparentchange = function (oEvent)
{
 oEvent.cancel = true;
}

or

oGantt.Listeners.Add("onbarparentchange", function (oEvent)
{
 oEvent.cancel = true;
})

where oGantt is an object of Gantt type
onbarparentchange

onbarresize

The onbarresize() method occurs once the user resizes or moves an item-bar by drag. The Start / GetStart() method gets the date-time the bar starts from. The End / GetEnd() method gets the date-time the bar ends to.
Parameters:
Name Type Description
oEvent object holds information about the item-bar being resize/moved, as an object of {item, key, bar} type.
Properties
Name Type Description
item Item specifies the item that hosts the bar being resized or moved, as an object of Item type
key any indicates the key of the item-bar being resized or moved
bar ItemBar indicates the item-bar being resized or moved, as an object of ItemBar type
Example
The following samples display information about the bar being moved or resized, by drag and drop:

oGantt.onbarresize = function (oEvent)
{
 console.log(oEvent);
}

or

oGantt.Listeners.Add("onbarresize", function (oEvent)
{
 console.log(oEvent);
})

where oGantt is an object of Gantt type
onbarresize

onchartselchange

The onchartselchange() method notifies that the chart's selection has been changed. The Selection / GetSelection() method gets the chart's selection (bars). The onselchange()(extree) method notifies that the control's selection has been changed (items).
Parameters:
Name Type Description
oEvent object holds the control's selection, as explained:
  • oEvent {null}, indicates that the chart has no selected objects(bars)
  • oEvent {ItemBar}, indicates an object of ItemBar type that defines the control's single item-bar selected
  • oEvent {array}, specifies an array of [ItemBar] type that holds all selected objects within the control
Example
The following samples display the chart's selection once it changes:

oGantt.onchartselchange = function (oEvent)
{
 console.log(oEvent);
}

or

oGantt.Listeners.Add("onchartselchange", function (oEvent)
{
 console.log(oEvent);
})

where oGantt is an object of Gantt type
onchartselchange

oncreatebar

The oncreatebar() method occurs once the user creates a new item-bar by drag. The AddBar(name, start, end, key, text) method adds a bar for the current item, and returns an object of ItemBar type.
Parameters:
Name Type Description
oEvent object holds information about the created item-bar, as an object of {item, start, end, bar} type.
Properties
Name Type Description
item any holds specifies the item that hosts the newly created item-bar as an object of Item type, or a negative value, that indicates the number of items to add to cover the clicked area.
start Date specifies the date-time the item-bar being created starts from
end Date specifies the date-time the item-bar being created ends to
bar ItemBar indicates the newly item-bar being created, as an object of ItemBar type
Example
The following samples display information about the created-bar, once the user creates it by drag and drop:

oGantt.oncreatebar = function (oEvent)
{
 console.log(oEvent);
}

or

oGantt.Listeners.Add("oncreatebar", function (oEvent)
{
 console.log(oEvent);
})

where oGantt is an object of Gantt type
oncreatebar
The oncreatelink() method notifies your application once the user creates a link between two bars. The Add(oLinkOpts) method creates and adds a link between two bars.
Parameters:
Name Type Description
oEvent Link indicates the link between two bars, as an object of Link type
Example
The following samples display the link being created:

oGantt.oncreatelink = function (oEvent)
{
 console.log(oEvent);
}

or

oGantt.Listeners.Add("oncreatelink", function (oEvent)
{
 console.log(oEvent);
})

where oGantt is an object of Gantt type
oncreatelink

ondatechange

The ondatechange() method occurs once the chart's first visible date is changed. The FirstVisibleDate / GetFirstVisibleDate() method gets the chart's first visible date. The GetLastVisibleDate() method gets the chart's last visible date.
Parameters:
Name Type Description
oEvent GV Specifies the gantt-view where the first visible date is changed, as an object of GV type.
Example
The following samples display the chart's first visible date once it changes:

oGantt.ondatechange = function (oEvent)
{
 console.log(oGantt.Chart.FirstVisibleDate);
}

or

oGantt.Listeners.Add("ondatechange", function (oEvent)
{
 console.log(oGantt.Chart.FirstVisibleDate);
})

where oGantt is an object of Gantt type

In case your control displays multiple gantt-view, the following sample displays the view's first visible date as soon as it changes:

oGantt.ondatechange = function (oEvent)
{
 console.log(oEvent.FirstVisibleDate);
}

or

oGantt.Listeners.Add("ondatechange", function (oEvent)
{
 console.log(oEvent.FirstVisibleDate);
})

where oGantt is an object of Gantt type
ondatechange

ondateselchange

The ondateselchange() method notifies your application once the user selects zero, one or more dates within the control. The SelectDates / GetSelectDates() method gets the current selected-dates as an array of [{start,end}] type.
Parameters:
Name Type Description
oEvent object holds the selected-dates, as explained:
  • oEvent {null}, indicates no selected dates, within the chart
  • oEvent {object}, indicates an object of {start,end} type that defines the control's single date selected
  • oEvent {array}, specifies an array of [{start,end}] type that holds all selected dates within the control
where:
  • start {Date}, specifies the date the selected-zone starts from
  • end {Date}, specifies the date the selected-zone ends to
Example
The following samples display the chart's date(s) being selected:

oGantt.ondateselchange = function (oEvent)
{
 console.log(oEvent);
}

or

oGantt.Listeners.Add("ondateselchange", function (oEvent)
{
 console.log(oEvent);
})

where oGantt is an object of Gantt type
ondateselchange