Class: Gantt

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

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 )

(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 Type Description
exShowCumulativeColor number The color for bar is not changed, but its reflection in the histogram shows the corresponding cumulative color
exChangeColor number The color for bar and its reflection in the histogram is showing the corresponding cumulative color
exKeepOriginalColor 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 Type Description
exHistOverload 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 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 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 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 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 Type Description
exHistogramVisibleItems number The histogram is shown for the visible items only
exHistogramSelectedItems number The histogram is shown for the selected items only
exHistogramCheckedItems number The histogram is shown for the checked items only
exHistogramSelectedBars number The histogram is shown for the selected bars only
exHistogramUnlockedItems number The histogram is shown only for unlocked items
exHistogramLockedTopItems number The histogram is shown only for locked items in the top side of the control
exHistogramLockedBottomItems number The histogram is shown only for locked items in the bottom side of the control
exHistogramAllItems number The histogram is shown for all items
exHistogramFilteredItems number The histogram is shown for the filtered items only
exHistogramLeafItems number The histogram shows the bars for leaf items (a leaf item contains no child items)
exHistogramRecLeafItems number The histogram shows all bars for all recursive leaf items (a leaf item contains no child items)
exHistogramNoGrouping number The histogram shows all bars without grouping based on the item's parent
exHistogramBackground number The histogram's chart goes on the background, while the non-working part is shown on front ( erases the non-working parts )
exHistogramNoGroupCaption number The histogram shows no caption for groups being shown
exHistogramGroupCumulative number The histogram shows cumulative groups

(static, readonly) ItemBarPropertyEnum :number

The Gantt.ItemBarPropertyEnum type holds the properties of the bar
Type:
  • number
Properties:
Name Type Description
exBarName 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 number Specifies the date-time the bar starts from ("start" of exontrol.Gantt.BarOptions).
exBarEnd number Specifies the date-time the bar ends to ("end" of exontrol.Gantt.BarOptions).
exBarCaption number Specifies the caption to display within the bar ("caption" of exontrol.Gantt.BarOptions).
exBarHAlignCaption number Specifies the horizontal-alignment / clipping of the item-bar's caption inside / outside the bar ("hAlignCaption" of exontrol.Gantt.BarOptions).
exBarVAlignCaption number Specifies the vertical-alignment of the item-bar's caption inside / outside the bar ("vAlignCaption" of exontrol.Gantt.BarOptions).
exBarToolTip number Specifies the tooltip to be shown once the cursor hovers the bar ("toolTip" of exontrol.Gantt.BarOptions).
exBarKey number Indicates the bar's key (used only if item hosts multiple bars) ("key" of exontrol.Gantt.BarOptions).
exBarCanResize 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 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 number Specifies the bar's percent, as a value from 0 to 1 (for 100%) ("percent" of exontrol.Gantt.BarOptions).
exBarPercentCaptionFormat number Specifies the HTML format to display the bar's percent ("percentCaptionFormat" of exontrol.Gantt.BarOptions).
exBarShowPercentCaption number Shows or hides the bar's percent-caption ("showPercentCaption" of exontrol.Gantt.BarOptions).
exBarAlignPercentCaption number Horizontally aligns the bar's percent-caption ("alignPercentCaption" of exontrol.Gantt.BarOptions).
exBarCanResizePercent number Specifies whether the user can resize the percent at runtime ("canResizePercent" of exontrol.Gantt.BarOptions).
exBarCanResizePercent number Indicates the vertical-offset relative to the default position, the bar is displayed ("offset" of exontrol.Gantt.BarOptions).
exBarEffort 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 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 number Indicates whether the item-bar is selectable or unselectable ("selectable" of exontrol.Gantt.BarOptions).
exBarColor number Defines the bar's individual-shape ("shape" of exontrol.Gantt.BarOptions).
exBarOverviewColor number Defines the bar's individual overview-color ("overviewColor" of exontrol.Gantt.BarOptions).
exBarExtraCaption number Specifies the extra caption to display within the bar ("extraCaption" of exontrol.Gantt.BarOptions).
exBarExtraCaptionHAlign number Specifies the horizontal-alignment / clipping of the item-bar's extra caption inside / outside the bar ("extraCaptionHAlign" of exontrol.Gantt.BarOptions).
exBarExtraCaptionHAlign number Specifies the vertical-alignment of the item-bar's extra caption inside / outside the bar ("extraCaptionVAlign" of exontrol.Gantt.BarOptions).
exBarOverlaidKey number Specifies the z-order of the bar when it overlaps other bars (exOverlaidBarsCascade type) ("overlaidKey" of exontrol.Gantt.BarOptions).
exBarShowCaption number Shows or hides the bar's caption ("showCaption" of exontrol.Gantt.BarOptions).
exBarShowExtraCaption number Shows or hides the bar's extra caption ("showExtraCaption" of exontrol.Gantt.BarOptions).
exBarHistLegend number Specifies the bar's description in the histogram-legend ("histLegend" of exontrol.Gantt.BarOptions).
exBarCriticalPath 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 number Indicates the list of predecessor bars (INDEX1['SF'|'FS'|'FF'|'SS'][KEY][:['W']LAG|:LAG['W']] format), separated by comma
exBarSuccessor number Indicates the list of successor bars (INDEX1['SF'|'FS'|'FF'|'SS'][KEY][:['W']LAG|:LAG['W']] format), separated by comma
exBarParent number Gets the item that hosts the item bar ("parent" of exontrol.Gantt.BarOptions).
exBarDuration 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 Type Description
exLevelNoLine number No line is shown
exLevelDefaultLine number Indicates the default grid line style
exLevelDotLine 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 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 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 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 number Indicates that the line is shown in the middle. For vertical/tick lines, it can be combined with exLevelDotLine or exLevelSolidLine
exLevelQuarterHeight 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 Type Description
exOverlaidBarsNone number No overlaid bars are shown
exOverlaidBarsOffset 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 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 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 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 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 number The overlaid stack is automatically arranged for best fit in the item. The exOverlaidBarsStackAutoArrange flag can be combined with exOverlaidBarsStack flag only.
exOverlaidBarsIncludeCaption number The overlaid mechanism includes the caption for bars
exOverlaidBarsStrict 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 Type Description
exOverviewHidden number The control's overview is not visible
exOverviewShowOnlyVisible number The control's overview shows the bars from the visible items using the range of bars in the visible items only
exOverviewShowAllVisible number The control's overview shows the bars from the visible items using the range for all bars in the chart.
exOverviewAllowVerticalScroll 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 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 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 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 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 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 number Displays the selection limits (first/last visible date in the chart).
exOverviewSplitter number Specifies whether the overview's horizontal splitter is visible or hidden(makes the control's overview resizable or fixed)

(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)
Type:
  • string
Since:
  • 1.8

(static) version :string

The version field defines the version of the control
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

Bar(name) → {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 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
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

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

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
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

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.

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

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

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

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

resTLB()

The resTLB() method resets the critical-path, temporarily shapes for bars and visual-appearances for links
Since:
  • 2.3

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

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

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

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

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
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

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

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