Options class (Gantt)

The allowActions field defines a list of actions separated by comma that the user can perform by drag or click on the control's content. The order of the actions is very important, as the control checks each action from left to right until it finds a matching action for the performed mouse/touch event. The first matched action is performed, and the rest of the actions are ignored. So if you want to perform a specific action once the user clicks an item, and perform another action if the user clicks an area that does not contain any item, you should place the first action before the second one in the AllowActions property.

For instance:

• "item-drag,scroll", the control performs the "item-drag" action once the user clicks an item and "scroll" action is possible only if the user clicks an area that does not contain any item
• "scroll,item-drag", the "item-drag" action is never performed, as the "scroll" action is always matched first. The scroll by drag can be performed if the user clicks anywhere in the view no matter if an item is present or not

So each action should be placed in the allowActions field according to your needs.

The format of the property is:

"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."

where

• "action", defines the action to perform (as defined below)

  Action	Description	Flags
  "column-drag"	Moves a column to a new position. The onchange("drag-column") event occurs when the user repositions a column via drag-and-drop, if the column's AllowDrag property is true. Not available if the control is read-only.
  "column-resize"	Resizes columns by drag. If no flags are used, resizing is possible in both view and header areas. Requires control and column to be editable. The onchange("resize-column") event notifies that a column has been resized via UI interaction.	[view], resizing possible in view area [header], resizing possible in column header
  "edit"	Edits the cell being clicked. The onchange("change-cell") event occurs when the cell's value has been changed through the UI. Not available if the control is read-only.
  "fit"	Fits a dragged area into the control's client area.
  "item-drag"	Moves items by drag. The onchange("drag-item") event occurs once the user moves the item by drag an drop. Not available if the control is read-only.	[position], item can be moved within group without changing parent [keepIndent], preserves indentation when moved to any position or parent [any], item can be moved freely
  "item-resize"	Resizes items by drag. The onchange("resize-item") event is raised only when the item height is changed by dragging. Only available if the control is editable and item's allowSizing=true.	[all], resizing one item adjusts all resizable items; otherwise only dragged or selected items are resized
  "scroll"	Scrolls the control's content by drag.	[view], scroll possible in view area [header], scroll possible in header area
  "select"	Selects items by drag.
  "zoom"	Zooms the control content at the dragging point.

  The expivot/js control supports additional actions as listed in the table below:

  Action	Description	Flags
  "format"	Formats the column at the cursor, including content, appearance, and conditional formatting.

  The exgantt/js control supports additional actions as listed in the table below:

  Action	Description	Flags
  "chart-create"	Creates item-bars by drag. Not available if the control is read-only.	[name=xxx], defines the name/type of the item-bar to create (e.g., [name=Task]) [key=xxx], defines the key of the item-bar to create [shape=xxx], specifies the shape of the create-bar element [height=xxx], sets the height of the create-bar element in pixels [empty], allows creating item-bars on empty items [auto], automatically adds the created item-bar when drag ends [zero], allows creating zero-length item-bars
  "chart-fit"	Fits a portion of the chart by drag. Not available if the control is read-only.	[chart], operation possible when clicking the chart [level], operation possible when clicking the chart header [overview], operation possible when clicking the control's overview
  "chart-link"	Links item-bars by drag. Not available if the control is read-only.	[toggle], removes the link if bars are already linked
  "chart-move"	Moves or resizes item-bars by drag, including resizing the percent of the item-bar. Not available if the control is read-only.
  "chart-percent"	Resizes the percent of item-bars by drag. Not required if "chart-move" is included. Not available if the control is read-only.
  "chart-resize"	Resizes the chart's unit width by drag. Not available if the control is read-only.	[chart], operation possible when clicking the chart [level], operation possible when clicking the chart header
  "chart-select"	Selects item-bars by drag.	[item], selects items by drag as well [click-item], selects items when clicked as well
  "chart-zoom"	Scales and resizes the chart by drag. Not available if the control is read-only.	[chart], zoom possible when clicking the chart [level], zoom possible when clicking the chart header [overview], zoom possible when clicking the control's overview
  "item-drag"	Moves items by drag. The onchange("drag-item") event occurs once the user moves the item by drag an drop. Not available if the control is read-only.	[view], operation possible when clicking the view [chart], operation possible when clicking the chart [position], item can be moved within group without changing parent [keepIndent], preserves indentation when moved to any position or parent [any], item can be moved freely
  "overview-selection-resize"	Resizes the chart using left/right margins of the overview-selection (available since 2.4).	[unsmooth], resize occurs unit by unit instead of pixel by pixel
  "scroll"	Scrolls the control's content by drag.	[view], scroll possible in view area [header], scroll possible in header area [chart], scroll possible when clicking the chart [level], scroll possible when clicking the chart header
  "select"	Selects items by drag.	[view], operation possible when clicking the view [chart], operation possible when clicking the chart

• "shortcut", defines the event's button or/and the modifier-keys that are required to perform the action. The "shortcut" is a combination of none, one or more of the following values:
  • "Shift", indicates that the SHIFT key is pressed
  • "Ctrl" or "Control", indicates that the CTRL key is pressed
  • "Alt" or "Menu", indicates that the ALT key is pressed
  • "Meta" , indicates that the META key is pressed
  • "LButton", specifies that the mouse's left-button is pressed
  • "RButton", specifies that the mouse's right-button is pressed
  • "MButton", specifies that the mouse's middle/wheel-button is pressed
  • "Long", specifies that the action requires a "long" click or touch before it begins
  • "Double", specifies that the action requires a "double" click before it begins (this flag is available for non-dragable actions only such as "edit")
  • "+", indicates AND between values

The allowActions field is mapped to the AllowActions property, which means that the following statements are equivalent:

oGantt.Options = {allowActions: "item-drag,scroll"}
oGantt.SetOptions({allowActions: "item-drag,scroll"})
oGantt.AllowActions = "item-drag,scroll"
oGantt.SetAllowActions("item-drag,scroll")

null {null}, indicates the control's default allowActions value
"" {string}, specifies that no operation is allowed once the user clicks or touches the control
"scroll" {string}, specifies that only "scroll" operation is allowed, no matter of the event's button or modifier-keys is pressed.
"column-resize[view](LButton)" {string}, allows resizing the columns (inside the view), while pressing the mouse's left-button only
"column-drag(Shift+LButton),item-drag,scroll" {string}, indicates that dragging a column is possible only if the user presses the mouse's left-button while SHIFT key is pressed, and "item-drag" or "scroll" is possible no matter of the event's button or modifier-keys in this order (if one operation is not possible, the next one is performed).

The allowDrop field specifies whether the user can drag and drop local files into the control. The Gantt.AllowDrop property is useful when the user needs to import data from local files into the control, as an alternative to the data property. When the allowDrop property is true, the user can drag and drop CSV or XML files into the control, and the control automatically imports the content of the dropped file. The allowDrop property works in conjunction with the onErrorChooseFile property, so if an error occurs while importing a file (for instance, if the file is not in a valid format), the control can display an input-file to let user choose a local filte to import, as soon as an error occurs, if the onErrorChooseFile property is true.

The allowDrop field is mapped to the AllowDrop property, which means that the following statements are equivalent:

oGantt.Options = {allowDrop: true}
oGantt.SetOptions({allowDrop: true})
oGantt.AllowDrop = true
oGantt.SetAllowDrop(true)

false {boolean}, no file can be drop into the control (default)
true {boolean}, the user can drag and drop files into the control

The allowGroupBy field specifies whether the control supports group-by view. The AllowGroupBy property (equivalent of allowGroupBy field) gets or sets whether the control supports group-by view. If true, a group-view is generated once the user drags a column to the control's group-by/sort bar. The group-view organizes the items into groups based on the values of the grouped column. Each group can be expanded or collapsed to show or hide its items. If false, no group-view is generated once the user drags a column to the control's group-by/sort bar.The sortBarVisible field specifies whether the control's sortbar is visible or hidden. The sortbar displays the header of each sorted/grouped-columns.

The allowGroupBy field is mapped to the AllowGroupBy property, which means that the following statements are equivalent:

oGantt.Options = {allowGroupBy: true}
oGantt.SetOptions({allowGroupBy: true})
oGantt.AllowGroupBy = true
oGantt.SetAllowGroupBy(true)

false {boolean}, no group-view is generated once the user drags a column to the control's group-by/sort bar
true {boolean}, the control supports group-by view

The background object holds display options to show different parts of the control, as an object of BackgroundOptions type. The background object can be utilized by controls that inherit from this one. The Background property maps directly to background field.

The background field is mapped to the Background property, which means that the following statements are equivalent:

oGantt.Options = {background: {...}}
oGantt.SetOptions({background: {..})
oGantt.Background = {...}
oGantt.SetBackground({...})

The chart field holds options to apply on the control's chart. The chart options are defined by the exontrol.Gantt.ChartOptions type, which includes various properties to customize the appearance and behavior of the Gantt chart, such as histogram visibility, height, and other chart-related settings.

The chart field is mapped to the Chart property, which means that the following statements are equivalent:

oGantt.Options = {chart: {histogramVisible: true, histogramHeight: 128}}
oGantt.Chart.Options = {histogramVisible: true, histogramHeight: 128}
oGantt.Chart.SetOptions({histogramVisible: true, histogramHeight: 128})
oGantt.Chart.HistogramVisible = true; oGantt.Chart.HistogramHeight = 128;

Please pay attention, that the following statement:

oGantt.Options.chart = {histogramVisible: true, histogramHeight: 128}

is not equivalent with the above statements, so it do not have any effect on the control's chart.

The following sample shows the histogram and sets its height to 128 pixels:

{
 histogramVisible: true,
 histogramHeight: 128
}

The columnAutoResize field specifies whether the control will automatically size its visible columns to fit on the control's client width. The ColumnAutoResize property (equivalent of columnAutoResize field) defines whether the control will automatically size its visible columns to fit on the control's client width. The Width property of each visible column is adjusted proportionally so that all visible columns fit exactly within the control's client area. The AllowSizing property specifies whether the column is resizable or fixed.

The columnAutoResize field is mapped to the ColumnAutoResize property, which means that the following statements are equivalent:

oGantt.Options = {columnAutoResize: true}
oGantt.SetOptions({columnAutoResize: true})
oGantt.ColumnAutoResize = true
oGantt.SetColumnAutoResize(true)

false {boolean}, no effect
true {number}, all visible columns are proportionally resized to fit the control's width

The columnsFloatBarCaption field defines the caption to display on the columns float bar. The ColumnsFloatBarCaption property (equivalent of columnsFloatBarCaption field) gets or sets the caption to display on the columns float bar. The columns float bar is a floating panel that can display groupable columns, hidden columns, or a check-box for each column to show/hide the column. The columnsFloatBarVisible field specifies the visibility of the columns float bar. By default, the columnsFloatBarCaption is empty, so no caption is displayed on the columns float bar.

The columnsFloatBarCaption field is mapped to the ColumnsFloatBarCaption property, which means that the following statements are equivalent:

oGantt.Options = {columnsFloatBarCaption: "Columns"}
oGantt.SetOptions({columnsFloatBarCaption: "Columns"})
oGantt.ColumnsFloatBarCaption = "Columns"
oGantt.SetColumnsFloatBarCaption("Columns")

"" {string}, hides the caption of the columns float bar
"<b>Columns</b>" {string}, displays in bold the caption of the columns float bar

The columnsFloatBarSortOrder field specifies the sort order to show the columns within the control's columns float panel. The ColumnsFloatBarSortOrder property (equivalent of columnsFloatBarSortOrder field) defines the sort order to show the columns within the columns float bar. The sort order can be ascending, descending or unsorted. The default sort order is unsorted. The sort order applies only to the columns float bar; it does not affect the order of the columns within the control. The columnsFloatBarVisible field must be set to a visible state to see the effect of this property.

Specifies the columns sort-order as listed:

• 0 {number}, show columns unsorted
• 1 {number}, show columns in ascending order (by name)
• 2 {number}, shows columns in descending order (by name)

The columnsFloatBarSortOrder field is mapped to the ColumnsFloatBarSortOrder property, which means that the following statements are equivalent:

oGantt.Options = {columnsFloatBarSortOrder: 1}
oGantt.SetOptions({columnsFloatBarSortOrder: 1})
oGantt.ColumnsFloatBarSortOrder = 1
oGantt.SetColumnsFloatBarSortOrder(1)

0 {number}, show columns unsorted
1 {number}, show columns in ascending order (by name)

The columnsFloatBarVisible field indicates whether the columns float bar is visible or hidden. The ColumnsFloatBarVisible property (equivalent of columnsFloatBarVisible field) shows or hides the control's floatbar. The floatbar displays the header of each sorted/grouped-columns. The floatbar can be shown as docked to the right side of the control, or as floated over the control. The floatbar can display groupable columns, hidden columns, or a check-box for each column to show/hide the column. The ColumnsFloatBarSortOrder property specifies the sort order to show the columns within the columns float bar. By default, the ColumnsFloatBarVisible property is set to exColumnsFloatBarHidden (0), which hides the columns float bar.

The Gantt.ColumnsFloatBarVisibleEnum type supports the following values:

• exColumnsFloatBarHidden(0), the columns floatbar is hidden
• exColumnsFloatBarVisibleIncludeGroupByColumns(1), the columns floatbar is visible, and it displays dragable (AllowDrag property) and groupable (AllowGroupBy property) columns of the control.
• exColumnsFloatBarVisibleIncludeCheckColumns(2), the columns floatbar is visible, and it displays dragable (AllowDrag property), and a check-box for each Column to update its Visible property (shor or hide the column).
• exColumnsFloatBarVisibleIncludeHiddenColumns(4), the columns floatbar is visible, and it displays dragable (AllowDrag property) and hidden (Visible property) columns of the control.
• exColumnsFloatBarFloat(0x100), the columns floatbar is shows as floated. This flag can be combined with exColumnsFloatBarVisibleIncludeHiddenColumns, exColumnsFloatBarVisibleIncludeCheckColumns or exColumnsFloatBarVisibleIncludeGroupByColumns type.

The columnsFloatBarVisible field is mapped to the ColumnsFloatBarVisible property, which means that the following statements are equivalent:

oGantt.Options = {columnsFloatBarVisible: 1}
oGantt.SetOptions({columnsFloatBarVisible: 1})
oGantt.ColumnsFloatBarVisible = 1
oGantt.SetColumnsFloatBarVisible(1)

false {boolean} or 0 {number}, hides the columns float bar
true {boolean}, 1 or Gantt.ColumnsFloatBarVisibleEnum.exColumnsFloatBarVisibleIncludeGroupByColumns {number}, the columns float bar is visible and displays groupable columns

The conditional object simultaneously defines all of the control's conditional formats. The conditional formatting feature enables you to apply formats to a cell or range of cells that dynamically change based on the cell's value or the result of a formula. The Conditional property maps directly to conditional field. The conditional field can be of either a ConditionalFormatOptions type to specify a single conditional format or an array of ConditionalFormatOptions type to define multiple conditional formats.

The conditional field is mapped to the Conditional property, which means that the following statements are equivalent:

oGantt.Options = {conditional: {...}}
oGantt.SetOptions({conditional: {...}})
oGantt.Conditional = {...}
oGantt.SetConditional({...})

{
   expression: "value > 100",
   shape:
   {
     frameColor: "black"
   },
   applyTo: "Total"
 } {ConditionalFormatOptions}, highlights the cells in the 'Total' column with values greater than 100

The countLockedColumns field specifies the number of locked columns (a locked column is not scrollable, and it is fixed to the left/right side of the control). The low nibble (0-15) defines the number of left-locked columns, and the high nibble (0-15) defines the number of right-locked columns. The countLockedColumns field splits the view into lock and unlock parts. The lock-part hosts the columns that are fixed, and can not be scrolled.

The countLockedColumns field is mapped to the CountLockedColumns property, which means that the following statements are equivalent:

oGantt.Options = {countLockedColumns: 0x21}
oGantt.SetOptions({countLockedColumns: 0x21})
oGantt.CountLockedColumns = 0x21
oGantt.SetCountLockedColumns(0x21)

0 {number}, indicates that the control displays no locked-columns
2 {number}, specifies that the first two-visible columns are locked (not scrollable and fixed to the left side of the control)
0x10 {number}, locks 1 column on the right (@since 4.6)

The crSize field specifies the size to show the check-box/radio-button. The CrSize property (equivalent of crSize field) gets or sets the size to show the check-box/radio-button. The CellHasCheck/GetCellHasCheck()/SetCellHasCheck(value) {boolean}, shows or hides check-box, or radio-buttons for all cells within the column. The Cell.HasCheck property shows or hides the cell's check-box or radio-button is visible or hidden.

The crSize field is mapped to the CrSize property, which means that the following statements are equivalent:

oGantt.Options = {crSize: 24}
oGantt.SetOptions({crSize: 24})
oGantt.CrSize = 24
oGantt.SetCrSize(24)

0 {number}, displays no check-box/radio-button
24 {number}, specifies a size of 24x24 to display the check-box/radio-button

The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. The CellOptions.cursor property defines the mouse cursor to be displayed when pointing over a cell. The cursors field customizes the control's interactivity. The ColumnOptions.cursor property defines the mouse cursor to be displayed when pointing over a column's header or filter-button. The ColumnOptions.cellCursor property defines the mouse cursor to be displayed when pointing over any cell of the column.

The format of the property is:

"cursor(part),cursor(part),..."

where:

• "cursor", defines the CSS mouse cursor to display while cursor hovers the part
• "part", defines the name of the part the cursor is applied on (as defined below)

The "cursor" can be any of the following:

Cursor	Description
"alias"	indicates a shortcut or alias will be created
"all-scroll"	indicates scrolling in any direction
"auto"	lets the browser decide the cursor based on context
"cell"	indicates a table cell
"col-resize"	indicates a column can be resized horizontally
"context-menu"	indicates a context menu is available
"copy"	indicates something will be copied
"crosshair"	a precise crosshair cursor
"default"	the default arrow cursor
"e-resize"	resize east (right edge)
"ew-resize"	resize horizontally
"grab"	indicates an item can be grabbed
"grabbing"	indicates an item is being grabbed
"help"	indicates help information is available
"move"	indicates something can be moved
"n-resize"	resize north (top edge)
"ne-resize"	resize northeast (top-right corner)
"nesw-resize"	resize along the northeast–southwest axis
"no-drop"	indicates dropping is not permitted
"not-allowed"	indicates the action is not allowed
"ns-resize"	resize vertically
"nw-resize"	resize northwest (top-left corner)
"nwse-resize"	resize along the northwest–southeast axis
"pointer"	the pointer cursor (a hand with a pointing finger)
"progress"	indicates background processing
"row-resize"	indicates a row can be resized vertically
"s-resize"	resize south (bottom edge)
"se-resize"	resize southeast (bottom-right corner)
"sw-resize"	resize southwest (bottom-left corner)
"text"	the text selection cursor (I-beam)
"url(...)"	uses a custom cursor image (with optional fallback)
"vertical-text"	the vertical text selection cursor
"w-resize"	resize west (left edge)
"wait"	indicates the program is busy
"zoom-in"	indicates zooming in
"zoom-out"	indicates zooming out

The "part" can be any of the following:

Part	Description
"anchor" (hyperlink)	defines the mouse-cursor when the mouse pointer hovers the anchor (the <a> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
"cell"	defines the mouse-cursor when the mouse pointer hovers any cell
"check"	defines the mouse-cursor to be shown when the mouse pointer hovers the check-box/radio-button
"column"	defines the mouse-cursor to show when the mouse pointer hovers the column's header
"column-drag"	defines the mouse-cursor while the column is dragging
"column-filter"	defines the mouse-cursor to show when the mouse pointer hovers the column's filter-button
"drag-drop"	defines the cursor while the item is being dragged using the "drag-drop" action
"expand"	defines the mouse-cursor to be shown when the mouse pointer hovers the expand/collapse glyphs
"filterBar-caption"	defines the mouse-cursor to show when the mouse pointer hovers the filter-bar's caption field
"filterBar-caption-column"	defines the mouse-cursor to show when the mouse pointer hovers a column of the filter-bar's caption field
"filterBar-close"	defines the mouse-cursor to show when the mouse pointer hovers the filter-bar's close button
"filterBar-prompt"	defines the mouse-cursor to show when the mouse pointer hovers the filter-bar's prompt label
"item"	defines the mouse-cursor when the mouse pointer hovers any item
"item-drag"	defines the cursor while the item is being dragged using the "item-drag" action
"long"	specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field)
"no"	defines the mouse-cursor to be shown when no operation is allowed (for instance, dropping the item is not allowed in this area)

The expivot/js control supports additional parts as listed in the table below:

Part	Description
"pivotBar-addNew"	defines the mouse-cursor to show when the mouse pointer hovers the "add-new" buttons within the control's pivotbar
"pivotBar-aggregate"	defines the mouse-cursor to show when the mouse pointer hovers an aggregate-glyph within the control's pivotbar
"pivotBar-total"	defines the mouse-cursor to show when the mouse pointer hovers a total-field within the control's pivotbar
"pivotBar-refresh"	defines the mouse-cursor to show when the mouse pointer hovers the "Refresh" button within the control's pivotbar

The exgantt/js control supports additional parts as listed in the table below:

Part	Description
"create-bar"	defines the mouse-cursor to show when the user creates a new item-bar
"create-link"	defines the mouse-cursor to show when the user creates a new link
"itemBar"	defines the mouse-cursor to show when the user hovers a movable and selectable item-bar
"itemBar-percent-resize"	defines the mouse-cursor to show when the user hovers the bar's percent right-side

The cursors property is mapped to the Cursors property, which means that the following statements are equivalent:

oGantt.Options = {cursors: "pointer(item)"}
oGantt.SetOptions({cursors: "pointer(item)"})
oGantt.Cursors = "pointer(item)"
oGantt.SetCursors("pointer(item)")

"pointer(xxx,yy)" {string}, indicates that the "pointer" mouse cursor is shown while cursor hovers any "xxx" or "yyy" part of the control

The data field defines the source the control imports data from, 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
• An object of {columns, items} type, where 'columns' can be an array of [(string | ColumnOptions)] to specify the columns to add or of type Columns to copy the control's header from one control to another and 'items' is be an array of [(string | ItemOptions)] to specify the items to add or of type Items to copy the control's items from one control to another; 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 (@since 3.2)
• An object that includes the "files" member of FileList type (representing a local file dropped into the control)

The Data property maps directly to data field. The Import(source, importOpts) method imports data from CSV, XML format. The Export(exportOpts) method exports the control's data as an array or CSV format.

The data field is mapped to the Data property, which means that the following statements are equivalent:

oGantt.Options = {data: "xml/datasource.xml"}
oGantt.SetOptions({data: "xml/datasource.xml"})
oGantt.Data = "xml/datasource.xml"
oGantt.SetData("xml/datasource.xml")

"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
[["Item 1.1","Item 1.2"],["Item 2.1","Item 2.2"]] {array}, creates two columns and two rows
{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"]]} {object}, 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 (@since 3.2)

The debug field indicates whether the control displays debug information. The debug-mode displays the bar's key within each bar. The Key property of the ItemBar object defines the unique identifier of the bar. If the key is not specified the '' is displayed. By default, the debug-mode is disabled. Enabling the debug-mode can be useful during development and troubleshooting, as it allows you to easily identify and reference specific bars within the Gantt chart by their keys. This can help in debugging issues related to bar identification, manipulation, or when working with complex charts that have many bars.

The debug field is mapped to the Debug property, which means that the following statements are equivalent:

oGantt.Debug = true
oGantt.SetDebug(true)
oGantt.Options = {debug = true}
oGantt.SetOptions({debug: true})

false {boolean}, no effect
true {boolean}, the control displays the keys of each visible bar

The defaultItemHeight field defines the item's default height. The DefaultItemHeight property (equivalent of defaultItemHeight field) gets or sets the item's default-height. The item's height is set to default-height when the item is added. If the item's height has been changed by the user (resized), then changing the default-height does not affect the item's height unless the item allows sizing (ItemAllowSizing property) and its height is reset to default-height. The Item.Height property gets or sets the height of the item. The Item.AllowSizing property indicates whether the item allows resizing by the user.

The defaultItemHeight field is mapped to the DefaultItemHeight property, which means that the following statements are equivalent:

oGantt.Options = {defaultItemHeight: 18}
oGantt.SetOptions({defaultItemHeight: 18})
oGantt.DefaultItemHeight = 18
oGantt.SetDefaultItemHeight(18)

null {null}, specifies that the item's height is 24 (by default)
18 {number}, changes the item's default height to 18

The drawGridLines field specifies whether the control's grid-lines are shown or hidden. Shows or hides the control's grid-lines. The gridLines field defines the color, width and style of the control's grid-lines. The DrawGridLines property (equivalent of drawGridLines field) gets or sets whether the control's grid-lines are shown or hidden. By default, the drawGridLines field is set to exNoLines (0), so the control's grid-lines are hidden.

The Gantt.GridLinesEnum type supports the following flags:

• exNoLines(0), no grid lines
• exAllLines(-1), shows all vertical and horizontal grid lines
• exRowLines(-2), shows grid lines for existing rows only
• exHLines(1), shows only the horizontal grid lines
• exVLines(2), shows only the vertical grid lines

The drawGridLines field is mapped to the DrawGridLines property, which means that the following statements are equivalent:

oGantt.Options = {drawGridLines: 0}
oGantt.SetOptions({drawGridLines: 0})
oGantt.DrawGridLines = 0
oGantt.SetDrawGridLines(0)

0 or Gantt.GridLinesEnum.exNoLines {number}, hides the grid-lines (default)
-1 or Gantt.GridLinesEnum.exAllLines {number}, shows all vertical and horizontal grid lines

The ensureOnSort field ensures that the selection (including the parent-items) fits the view's client-area once the user sorts or groups a column. The EnsureOnSort property (equivalent of ensureOnSort field) ensures that the selection fits the view's client-area once the user sorts or groups a column. The method scrolls the view, so the selection (including the parent-items) fits the view's client area. The Column.SortOrder property specifies the sort order of the column. The Sorts property of the Columns collection specifies the list of sorted columns within the tree-view.

The ensureOnSort field is mapped to the EnsureOnSort property, which means that the following statements are equivalent:

oGantt.Options = {ensureOnSort: true}
oGantt.SetOptions({ensureOnSort: true})
oGantt.EnsureOnSort = true
oGantt.SetEnsureOnSort(true)

false {boolean}, no effect
true {boolean}, scrolls the view, so the selection (including the parent-items) fits the view's client area

The expandGlyphSize field specifies the size to show the item's expand/collapse glyphs. The ExpandGlyphSize property directly maps to the expandGlyphSize field. The item displays expand/collapse glyphs only if it has child-items. The Item.Expanded property indicates whether the item is expanded or collapsed. The Item.ToggleExpand() method toggles the item's expand state. The Item.ShowExpand property specifies whether the item's expand/collapse glyphs is visible or hidden.

The expandGlyphSize field is mapped to the ExpandGlyphSize property, which means that the following statements are equivalent:

oGantt.Options = {expandGlyphSize: 24}
oGantt.SetOptions({expandGlyphSize: 24})
oGantt.ExpandGlyphSize = 24
oGantt.SetExpandGlyphSize(24)

0 {number}, displays no item's expand/collapse glyphs
24 {number}, specifies a size of 24x24 to display the item's expand/collapse glyphs

The expandOnDblClick field specifies whether the item is expanded or collapsed once the user double-clicks the item. The ExpandOnDblClick property maps directly to expandOnDblClick field. When the expandOnDblClick property is true, the user can double-click an item to toggle its expand/collapse state. When the expandOnDblClick property is false, the user cannot double-click an item to toggle its expand/collapse state. The Item.Expanded property indicates whether the item is expanded or collapsed. The Item.ToggleExpand() method toggles the item's expand state. The Item.ShowExpand property specifies whether the item's expand/collapse glyphs is visible or hidden.

The expandOnDblClick field is mapped to the ExpandOnDblClick property, which means that the following statements are equivalent:

oGantt.Options = {expandOnDblClick: true}
oGantt.SetOptions({expandOnDblClick: true})
oGantt.ExpandOnDblClick = true
oGantt.SetExpandOnDblClick(true)

false {boolean}, the item is not expanded or collapsed once the user double-clicks it
true {boolean}, the item is expanded or collapsed once the user double-clicks it

The filterBarCaption field customizes the caption shown within the control's filter-bar. The FilterBarCaption property (equivalent of filterBarCaption field) gets or sets the caption shown within the control's filter-bar. The control's filter-bar is used to display the control's filter prompt and the current filter applied to the control. The filterBarVisible field indicates whether the control's filter-bar is visible or hidden. By default, the filterBarCaption is empty, so only the current filter applied to the control is shown on the control's filter-bar.

The filterBarCaption expression supports the following keywords, constants, operators and functions:

• "value" or "current", returns the current filter as a string. At runtime the value may return a string such as

  "[<b>EmployeeID</b>] = '4| 5| 6' and [<b>ShipVia</b>] = 1</img>"

  , so the control automatically applies HTML format, which you can change it. For instance,

  "upper(value)"

  displays the caption in uppercase or "value replace `<b>` with `<fgcolor=808080>` replace `</b>` with `</fgcolor>`" displays the column's name with a different foreground color.
• "itemcount", returns the total number of items as indicated by Items.Count property. At runtime the itemcount is a positive integer that indicates the count of all items. For instance,

  "value + `<fgcolor=808080>Total: ` + itemcount"

  includes in the filter bar the number of items aligned to the right.
• "visibleitemcount", returns the number of visible items as indicated by Items.VisibleCount property. At runtime, the visibleitemcount is a positive integer if no filter is applied, and negative if a filter is applied. If positive, it indicates the number of visible items. The visible items does not include child items of a collapsed item. If negative, a filter is applied, and the absolute value minus one, indicates the number of visible items after filter is applied. 0 indicates no visible items, while -1 indicates that a filter is applied, but no item matches the filter criteria. For instance,

  "value + `<fgcolor=808080>` + ( visibleitemcount < 0 ? ( `Result: ` + ( abs(visibleitemcount) - 1 ) ) : ( `Visible: ` + visibleitemcount ) )"

  includes "Visible: " plus number of visible items, if no filter is applied or "Result: " plus number of visible items, if filter is applied, aligned to the right
• "matchitemcount", returns the number of items that match the filter as indicated by Items.MatchCount property. At runtime, the matchitemcount is a positive integer if no filter is applied, and negative if a filter is applied. If positive, it indicates the number of items within the control (Items.Count property). If negative, a filter is applied, and the absolute value minus one, indicates the number of matching items after filter is applied. A matching item includes its parent items, if the control's FilterInclude property allows including child items. 0 indicates no visible items, while -1 indicates that a filter is applied, but no item matches the filter criteria. For instance,

  "value + `<fgcolor=808080>` + ( matchitemcount < 0 ? ( `Result: ` + ( abs(matchitemcount) - 1 ) ) : ( `Visible: ` + matchitemcount ) )"

  includes "Visible: " plus number of visible items, if no filter is applied or "Result: " plus number of matching items, if filter is applied, aligned to the right
• "leafitemcount", returns the number of leaf-items. A leaf item is an item with no child items. At runtime, the leafitemcount is a positive number that computes the number of leaf-items ( expanded or collapsed ). For instance,

  "value + `<fgcolor=808080><font ;6>` + leafitemcount"

  displays the number of leaf-items aligned to the right with a different font and foreground color.
• "promptpattern", returns the pattern in the filter bar's prompt, as a string. The FilterBarPromptPattern specifies the pattern for the filter prompt. The control's filter bar prompt is visible, if the exFilterBarPromptVisible flag is included in the FilterBarVisible property.
• "available", returns the list of columns that are not currently part of the control's filter, but are available to be filtered. A column is available to be filtered, if the DisplayFilterButton property of the Column object, is True. At runtime, the available keyword may return a string such as

  "<fgcolor=C0C0C0>[<s>OrderDate</s>]<fgcolor> </fgcolor>[<s>RequiredDate</s>]<fgcolor> </fgcolor>[<s>ShippedDate</s>]<fgcolor> </fgcolor>[<s>ShipCountry</s>]<fgcolor> </fgcolor>[<s>Select</s>]</fgcolor>"

  so the control automatically applies HTML format, which you can change it. For instance,

  "value + ` ` + available"

  displays the current filter, including all available columns to be filtered. For instance,

  "value + `` + available replace `C0C0C0` with `FF0000`"

  displays the available columns aligned to the right with a different foreground color.
• "allui", returns the list of columns that are part of the current filter and available columns to be filtered. A column is available to be filtered, if the DisplayFilterButton property of the Column object, is True. At runtime, the allui keyword may return a string such as

  "[<b>EmployeeID</b>] = '4| 5| 6'<fgcolor> </fgcolor><fgcolor=C0C0C0>[<s>OrderDate</s>]</fgcolor><fgcolor> </fgcolor><fgcolor=C0C0C0>[<s>RequiredDate</s>]</fgcolor><fgcolor> </fgcolor><fgcolor=C0C0C0>[<s>ShippedDate</s>]</fgcolor><fgcolor> </fgcolor>[<b>ShipVia</b>] = 1</img><fgcolor> </fgcolor><fgcolor=C0C0C0>[<s>ShipCountry</s>]</fgcolor><fgcolor> </fgcolor><fgcolor=C0C0C0>[<s>Select</s>]</fgcolor>"

  so the control automatically applies HTML format, which you can change it. For instance,

  "allui"

  displays the current filter, including all available columns to be filtered. For instance,

  "((allui + `<fgcolor=808080>` + ( matchitemcount < 0 ? ( ( len(allui) ? `` : `` ) + `` + abs(matchitemcount + 1) + ` result(s)` ) : (`<fgcolor=808080>`+ itemcount + ` item(s)`) )) replace `[<b>` with `<bgcolor=000000><fgcolor=FFFFFF><b> ` replace `</b>]` with ` </b></bgcolor></fgcolor>` replace `[<s>` with `<bgcolor=C0C0C0><fgcolor=FFFFFF> ` replace `</s>]` with ` </bgcolor></fgcolor>` )"

  displays all available columns to be filtered with different background/foreground colors including the number of items/results
• "all", returns the list of all columns ( visible or hidden ) no matter if the DisplayFilterButton property is True or False. At runtime, the all keyword may return a string such as

  "<fgcolor=C0C0C0>[<s>OrderID</s>]</fgcolor><fgcolor> </fgcolor>[<b>EmployeeID</b>] = '4| 5| 6'<fgcolor> </fgcolor><fgcolor=C0C0C0>[<s>OrderDate</s>]</fgcolor><fgcolor> </fgcolor><fgcolor=C0C0C0>[<s>RequiredDate</s>]</fgcolor><fgcolor>"

  so the control automatically applies HTML format, which you can change it. For instance,

  "all"

  displays the current filter, including all other columns. For instance,

  "((all + `<fgcolor=808080>` + ( matchitemcount < 0 ? ( ( len(allui) ? `` : `` ) + `` + abs(matchitemcount + 1) + ` result(s)` ) : (`<fgcolor=808080>`+ itemcount + ` item(s)`) )) replace `[<b>` with `<bgcolor=000000><fgcolor=FFFFFF><b> ` replace `</b>]` with ` </b></bgcolor></fgcolor>` replace `[<s>` with `<bgcolor=C0C0C0><fgcolor=FFFFFF> ` replace `</s>]` with ` </bgcolor></fgcolor>` )"

  displays all columns with different background/foreground colors including the number of items/results

The filterBarCaption field is mapped to the FilterBarCaption property, which means that the following statements are equivalent:

oGantt.Options = {filterBarCaption: "value + ` ` + available"}
oGantt.SetOptions({filterBarCaption: "value + ` ` + available"})
oGantt.FilterBarCaption = "value + ` ` + available"
oGantt.SetFilterBarCaption("value + ` ` + available")

"" {string}, displays no filter bar while no filter is applied, else it displays the filter as default
"no filter" {string}, shows no filter caption all the time
"allui" {string}, displays all available columns (column's DisplayFilterButton property is true)
"value replace ` and ` with `<off 4> and </off>` replace `|` with ` <off 4>or</off> ` replace ` ` with ` `" {string}, replaces the AND and | values
"value replace `[` with `<bgcolor=000000><fgcolor=FFFFFF><b> ` replace `]` with ` </b></bgcolor></fgcolor>`" {string}, highlights the columns being filtered with a different background/foreground colors.

The filterBarHeight field specifies the height to display the control's filter-bar. The FilterBarHeight property (equivalent of filterBarHeight field) gets or sets the height to display the control's filter-bar. The control's filter-bar is used to display the control's filter prompt and the current filter applied to the control. The filterBarVisible field indicates whether the control's filter-bar is visible or hidden. By default, the filterBarHeight is set to 24, so the control's filter-bar is shown with a height of 24 pixels.

The filterBarHeight field is mapped to the FilterBarHeight property, which means that the following statements are equivalent:

oGantt.Options = {filterBarHeight: 24}
oGantt.SetOptions({filterBarHeight: 24})
oGantt.FilterBarHeight = 24
oGantt.SetFilterBarHeight(24)

0 {number}, hides the control's filter-bar
24 {number}, indicates that the height of the control's filter-bar is 24

The filterBarPrompt field specifies the caption to show while the pattern of the filter-prompt is empty. The FilterBarPrompt property (equivalent of filterBarPrompt field) gets or sets the caption to show while the pattern of the filter-prompt is empty. The control's filter bar prompt is visible, if the exFilterBarPromptVisible flag is included in the filterBarVisible field. By default, the filterBarPrompt is empty, so no caption is displayed on the filter prompt when its pattern is empty.

The filterBarPrompt field is mapped to the FilterBarPrompt property, which means that the following statements are equivalent:

oGantt.Options = {filterBarPrompt: "filter..."}
oGantt.SetOptions({filterBarPrompt: "filter..."})
oGantt.FilterBarPrompt = "filter..."
oGantt.SetFilterBarPrompt("filter...")

"" {string}, displays no caption (while the pattern of the filter-prompt is empty)
"<i>filter...</i>" {string}, displays the message "filter..." in italics

The filterBarPromptColumns field defines the list of columns the pattern of filter-prompt is applying to. The FilterBarPromptColumns property (equivalent of filterBarPromptColumns field) gets or sets the list of columns the pattern of filter-prompt is applying to. The control's filter bar prompt is visible, if the exFilterBarPromptVisible flag is included in the filterBarVisible field. By default, the filterBarPromptColumns is null, so the pattern of filter-prompt is applying to all columns (visible or hidden). If the filterBarPromptType field is set to exFilterPromptPattern, the filterBarPromptPattern field may include wild characters such as ?, * or # to define a pattern to be applied on the specified columns.

Specifies the list of columns the pattern of filter-prompt is applying to (as explained below):

• null {null} or -1 {number}, all columns (visible or hidden)
• {number}, specifies the index of the column
• {string}, specifies a list of index/identifier/key/caption/plain-caption, separated by comma character
• {Column}, specifies the column reference

The filterBarPromptColumns field is mapped to the FilterBarPromptColumns property, which means that the following statements are equivalent:

oGantt.Options = {filterBarPromptColumns: null}
oGantt.SetOptions({filterBarPromptColumns: null})
oGantt.FilterBarPromptColumns = null
oGantt.SetFilterBarPromptColumns(null)

null {null}, the pattern of filter-prompt is applying to all columns (visible or hidden)
1 {number}, the pattern of filter-prompt is applying to a single-column only (the column wiht the index 1)
"ID,Name" {string}, the pattern of filter-prompt is applying to columns "ID" and "Name" only

The filterBarPromptPattern field defines the filter-pattern for the control's filter-prompt. The FilterBarPromptPattern property (equivalent of filterBarPromptPattern field) gets or sets the filter-pattern for the control's filter-prompt. The control's filter bar prompt is visible, if the exFilterBarPromptVisible flag is included in the filterBarVisible field. By default, the filterBarPromptPattern is empty, so no pattern is applied to the filter prompt.

Based on the filterBarPromptType field the filterBarPromptPattern field defines how the pattern filters for items as explained below:

• filters for items that includes all of the sequences within the filter-pattern (exFilterPromptContainsAll)
• filters for items that includes any of the sequences within the filter-pattern (exFilterPromptContainsAny)
• filters for items that starts with any of the sequences within the filter-pattern (exFilterPromptStartWith)
• filters for items that ends with any of the sequences within the filter-pattern (exFilterPromptEndWith)
• filters for items that matches the filter-pattern, which may includes wild-characters such as ?, * or # (exFilterPromptPattern)

The filterBarPromptPattern field is mapped to the FilterBarPromptPattern property, which means that the following statements are equivalent:

oGantt.Options = {filterBarPromptPattern: "A* *B"}
oGantt.SetOptions({filterBarPromptPattern: "A* *B"})
oGantt.FilterBarPromptPattern = "A* *B"
oGantt.SetFilterBarPromptPattern("A* *B")

"" {string}, clears the pattern of the filter-prompt
"A" {string}, filters for items includes "A" (exFilterPromptContainsAll)
"A* *B" {string}, filters for items start starts with "A" or ends with "B" (exFilterPromptPattern)

The filterBarPromptType field defines the type of control's filter-prompt (filterBarPromptPattern field). The FilterBarPromptType property (equivalent of filterBarPromptType field) gets or sets the type of the control's filter-prompt, as a value of the Gantt.FilterPromptEnum enumeration. The type defines how the pattern of filter-prompt filters for items. The FilterBarVisible property shows or hides the control's filter-bar. The filter-bar is displayed only if the control's FilterBarVisible property includes exFilterBarVisible or exFilterBarPromptVisible flags, or if any filter is applied and the FilterBarVisible property includes exFilterBarHidden flag. The onfilter event notifies your application once the control's filter has been changed.

The Gantt.FilterPromptEnum type supports the following flags:

• exFilterPromptContainsAll(1), The list includes the items that contains all specified sequences in the filter. Can be combined with exFilterPromptCaseSensitive, exFilterPromptStartWords, exFilterPromptEndWords or exFilterPromptWords
• exFilterPromptContainsAny(2), The list includes the items that contains any of specified sequences in the filter. Can be combined with exFilterPromptCaseSensitive, exFilterPromptStartWords, exFilterPromptEndWords or exFilterPromptWords
• exFilterPromptStartWith(3), The list includes the items that starts with any specified sequences in the filter. Can be combined with exFilterPromptCaseSensitive, exFilterPromptStartWords, exFilterPromptEndWords or exFilterPromptWords
• exFilterPromptEndWith(4), The list includes the items that ends with any specified sequences in the filter. Can be combined with exFilterPromptCaseSensitive, exFilterPromptStartWords, exFilterPromptEndWords or exFilterPromptWords
• exFilterPromptPattern(16), The filter indicates a pattern that may include wild characters to be used to filter the items in the list. Can be combined with exFilterPromptCaseSensitive. The filterBarPromptPattern field may include wild characters as follows:

  '?' for any single character
  '*' for zero or more occurrences of any character
  '#' for any digit character
  ' ' space delimits the patterns inside the filter
  

• exFilterPromptCaseSensitive(0x0100), Filtering the list is case sensitive. Can be combined with exFilterPromptContainsAll, exFilterPromptContainsAny, exFilterPromptStartWith, exFilterPromptEndWith or exFilterPromptPattern.
• exFilterPromptStartWords(0x1200), The list includes the items that starts with specified words, in any position. Can be combined with exFilterPromptContainsAll, exFilterPromptContainsAny, exFilterPromptStartWith or exFilterPromptEndWith.
• exFilterPromptEndWords(0x2200), The list includes the items that ends with specified words, in any position. Can be combined with exFilterPromptContainsAll, exFilterPromptContainsAny, exFilterPromptStartWith or exFilterPromptEndWith.
• exFilterPromptWords(0x3200), The filter indicates a list of words. Can be combined with exFilterPromptContainsAll, exFilterPromptContainsAny, exFilterPromptStartWith or exFilterPromptEndWith.

The filterBarPromptType field is mapped to the FilterBarPromptType property, which means that the following statements are equivalent:

oGantt.Options = {filterBarPromptType: 2}
oGantt.SetOptions({filterBarPromptType: 2})
oGantt.FilterBarPromptType = 2
oGantt.SetFilterBarPromptType(2)

2 or Gantt.FilterPromptEnum.exFilterPromptContainsAny {number}, filters for items that contains any sequences in the filter
0x3202 or Gantt.FilterPromptEnum.exFilterPromptContainsAny | Gantt.FilterPromptEnum.exFilterPromptWords {number}, filters for items that contains any words in the filter
0x3203 or Gantt.FilterPromptEnum.exFilterPromptStartWith | Gantt.FilterPromptEnum.exFilterPromptWords {number}, filters for items that starts with any word within the filter

The filterBarVisible field indicates whether the control's filter-bar is visible or hidden. The FilterBarVisible property (equivalent of filterBarVisible field) shows or hides the control's filter-bar. The control's filter-bar is used to display the control's filter prompt and the current filter applied to the control. The filterBarHeight field specifies the height to display the control's filter-bar. By default, the filterBarVisible is set to exFilterBarHidden (0), so the control's filter-bar is visible only if there is a filter applied.

The Gantt.FilterBarVisibleEnum type supports the following flags:

• exFilterBarHidden(0), indicates that the control's filter-bar is visible only if the control has a filter applied (use the filterBarHeight on 0 to effectively hides the control's filter-bar)
• exFilterBarPromptVisible(1), specifies that the control's filter-bar displays the filter prompt
• exFilterBarVisible(2), forces the control's filter-bar to be shown, no matter if any filter is applied
• exFilterBarCaptionVisible(4), forces the control's filter-bar to display the FilterBarCaption property.
• exFilterBarSingleLine(16), specifies that the caption on the control's filter bar is displayed on a single line. The exFilterBarSingleLine flag , specifies that the filter bar's caption is shown on a single line, so
  HTML tag or \r\n are not handled. By default, the control's filter description applies word wrapping. Can be combined to exFilterBarCompact to display a single-line filter bar. If missing, the caption on the control's filter bar is displayed on multiple lines. You can change the height of the control's filter bar using the FilterBarHeight property.
• exFilterBarToggle(256), specifies that the user can close the control's filter bar ( removes the control's filter ) by clicking the close button of the filter bar or by pressing the CTRL + F, while the control's filter bar is visible. If no filter bar is displayed, the user can display the control's filter bar by pressing the CTRL + F key. While the control's filter bar is visible the user can navigate though the list or control's filter bar using the ALT + Up/Down keys. If missing, the control's filter bar is always shown if any of the following flags is present exFilterBarPromptVisible, exFilterBarVisible, exFilterBarCaptionVisible.
• exFilterBarShowCloseIfRequired(512), indicates that the close button of the control's filter bar is displayed only if the control has any currently filter applied.
• exFilterBarShowCloseOnRight(1024), specifies that the close button of the control's filter bar should be displayed on the right side.
• exFilterBarCompact(2048), compacts the control's filter bar, so the filter-prompt will be displayed to the left, while the control's filter bar caption will be displayed to the right. This flag has effect only if combined with the exFilterBarPromptVisible. This flag can be combined with the exFilterBarSingleLine flag, so all filter bar will be displayed compact and on a single line.
• exFilterBarShort(4096), specifies that the control's filter bar is displayed only on the default-view (has effect if the control displays multiple views).

The filterBarVisible field is mapped to the FilterBarVisible property, which means that the following statements are equivalent:

oGantt.Options = {filterBarVisible: 0}
oGantt.SetOptions({filterBarVisible: 0})
oGantt.FilterBarVisible = 0
oGantt.SetFilterBarVisible(0)

0 or Gantt.FilterBarVisibleEnum.exFilterBarHidden {number}, (default) the control's filter-bar is visible only if there is a filter applied.
1 or Gantt.FilterBarVisibleEnum.exFilterBarPromptVisible {number}, the control's filter-bar is visible and shows the control's filter-prompt

The filterInclude field specifies the items to include once the control's filter is applied. The FilterInclude property (equivalent of filterInclude field) defines the items to include once the control's filter is applied. The control's filter is applied by setting a value to the control's filter field, or by using the control's filter bar. The filterInclude field specifies which items are included when a filter is applied to the control. By default, the filterInclude field is set to exItemsWithoutChilds (0), so only items (and parent-items) that match the filter are shown (no child-items are included).

The Gantt.FilterIncludeEnum type supports the following flags:

• exItemsWithoutChilds(0), items (and parent-items) that match the filter are shown (no child-items are included)
• exItemsWithChilds(1), items (parent and child-items) that match the filter are shown
• exRootsWithoutChilds(2), only root-items (excludes child-items) that match the filter are displayed
• exRootsWithChilds(3), root-items (and child-items) that match the filter are displayed
• exMatchingItemsOnly(4), shows only the items that matches the filter (no parent or child-items are included)
• exMatchIncludeParent(0xF0), specifies that the item matches the filter if any of its parent-item matches the filter. The exMatchIncludeParent flag can be combined with any other value

The filterInclude field is mapped to the FilterInclude property, which means that the following statements are equivalent:

oGantt.Options = {filterInclude: 0}
oGantt.SetOptions({filterInclude: 0})
oGantt.FilterInclude = 0
oGantt.SetFilterInclude(0)

null {null}, specifies the control's default FilterInclude property (Gantt.FilterIncludeEnum.exItemsWithoutChilds), so items (and parent-items) that match the filter are shown (no child-items are included)
4 or Gantt.FilterIncludeEnum.exMatchingItemsOnly {number}, shows only the items that matches the filter (no parent or child-items are included)
0xF4 or Gantt.FilterIncludeEnum.exMatchingItemsOnly | Gantt.FilterIncludeEnum.exMatchIncludeParent {number}, shows the items (including the child-items) that match the filter

The formatText field specifies the format to display the cell's caption. The FormatText property directly maps to the formatText field. The formatText field can be a combination of one or more exontrol.DrawTextFormatEnum flags that defines the format to show the cell's caption.

The exontrol.DrawTextFormatEnum type supports the following flags:

• exTextAlignTop (0x00), justifies the text to the top of the rectangle
• exTextAlignLeft (0x00), aligns text to the left
• exTextAlignCenter (0x01), centers text horizontally in the rectangle
• exTextAlignRight (0x02), aligns text to the right
• exTextAlignVCenter (0x04), centers text vertically
• exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
• exTextAlignMask (0x0F), specifies the mask for text's alignment.
• exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
• exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
• exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
• exPlainText (0x80), treats the text as plain text.
• exTextNoClip (0x0100), draws without clipping.
• exHTMLTextNoColors (0x0200), ignores the and tags.
• exTextCalcRect (0x0400), determines the width and height of the text.
• exHTMLTextNoTags (0x0800), ignores all HTML tags.
• exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
• exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
• exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.

The formatText field is mapped to the FormatText property, which means that the following statements are equivalent:

oGantt.Options = {formatText: 32}
oGantt.SetOptions({formatText: 32})
oGantt.FormatText = 32
oGantt.SetFormatText(32)

null {null}, centers the caption
32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line caption
0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line caption right/bottom-aligned

The gridLines field defines the color, width and style of the control's grid-lines. The GridLines property (equivalent of gridLines field) gets or sets the color, width and style of the control's grid-lines. The drawGridLines field specifies whether the control's grid-lines are shown or hidden.

The gridLines object includes any of the following properties:

width {number}, specifies the line's width or size (1 by default)
color {string}, indicates the line's color (partial-black by default)
style {number[]}, specifies the dash pattern to show the lines (dotted by default)

By default, the gridLines field is null, so the control's grid-lines are shown with a width of 1 pixel, partial-black color and dotted style.

The gridLines field is mapped to the GridLines property, which means that the following statements are equivalent:

oGantt.Options = {gridLines: {width: 2, color: "#FF0000", style: [4,2]}}
oGantt.SetOptions({gridLines: {width: 2, color: "#FF0000", style: [4,2]}})
oGantt.GridLines = {width: 2, color: "#FF0000", style: [4,2]}
oGantt.SetGridLines({width: 2, color: "#FF0000", style: [4,2]})

The groupByFormatCell field indicates the format of the cell to be displayed when the column gets grouped by. The Gantt.AllowGroupBy property specifies whether the control supports group-by view. The group-by view is generated once the user drags a column to the control's group-by/sort bar. The Gantt.SortBarVisible property must be true to display the group-by/sort bar. By default, the control does not support group-by view. The onaddgroupitem event is triggered for each item when a group-by view is generated. The onremoveitem event is triggered for each item when a group-by view is removed. The GroupItem property determines whether an item is a group item.

The format-expression supports the following keywords:

value, indicates the value of the current cell ( "value/2 format ``", displays half of the value using current regional format )
%0, %1, %2, ... {any} specifies the value of the cell in the column with the index 0, 1 2, ... ( "currency(%0 + %1)", adds the value of first and second cell and displays it as a currency )
%C0, %C1, %C2, ... {string} specifies the caption of the cell, or the string the cell displays in the column with the index 0, 1 2, ... ( "%C0 + %C1", concatenates the caption of first and second cell )
%CD0, %CD1, %CD2, ... {any} specifies the cell's user-date in the column with the index 0, 1 2, ... ( "%CD0 ? value : ``", displays the cell's value only if the cell's data is not empty )
%CS0, %CS1, %CS2, ... {number} specifies the cell's state in the column with the index 0, 1 2, ... ( "(%CS0 ? `<b>` : ``) + value", displays the cell's value in bold only if the first cell is checked )
%CT0, %CT1, %CT2, ... {boolean} returns true if the cell displays a total field; otherwise, it returns false. The exTotalField / exTotalColumn flag specifies whether the cell displays a total field. For instance, "%CT1" refers to all cells in the second column that display totals, while "not %CT1" refers to all cells in the second column that do not display totals (@since 3.3)
%CE0, %CE1, %CE2, ... {boolean} returns true if the cell is editable; otherwise, it returns false.. For example, "%CE0" refers to all editable cells in the first column, while "not %CE1" refers to all cells in the second column that are read-only (@since 3.3)
%CC0, %CC1, %CC2, ... {number} retrieve the number of child items (this keyword consistently returns identical results for all cells since it pertains to the item that hosts each cell). The ChildCount property returns the number of child items. For example, "%CC0" identifies all parent items, while "%CC0 = 0" identifies all leaf items (@since 3.3)
%CX0, %CX1, %CX2, ... {boolean} returns true if the item hosting the cell is expanded, or false if it is collapsed (this keyword consistently returns identical results for all cells since it pertains to the item that hosts each cell). The Item.Expanded property specifically indicates whether the item is expanded or collapsed. For example, "%CX0" refers to all expanded items, while "not %CX0" identifies all collapsed items (@since 3.3)

The format-expression supports the following unary-operators:

• exp(``), checks whether the item is expanded or collapsed ( "(exp(``) ? `<b>` : ``) + value", shows expanded-items in bold )
• get(`aggregate(list,direction,formula)`), summarizes the cell based on "aggregate(list,direction,formula)" syntax, where:

  aggregate, must be one of the following:
  

  • sum, performs addition of values
  • min, retrieves the minimum value
  • max, retrieves the maximum value
  • count, counts the number of items
  • avg, calculates the average of values
  • std, gets standard-deviation of numbers
  • unique, counts how many distinct values are in the set (@since 4.3)

  list, must be one of the following:
  

  • a number expression that specifies the index of the item being referred
  • all, indicates all items, so the formula is being applied to all items
  • current, refers the current item
  • parent, refers to the parent item
  • root, refers to the root item (the root item has no parent items)

  direction, must be one of the following:

  • dir, collects only direct descendents (child-items)
  • rec, collects recursivelly the leaf descendents ( leaf items ). A leaf item is an item with no child items
  • all, collects all descendents
    

  Currently, the following items are excluded by aggregate functions:

  not-sortable items. The Item.Sortable property specifies whether the item can be sorted ( a sortable item can change its position after sorting, while a not-sortable item keeps its position after sorting. not-selectable items. The Item.Selectable property specifies whether the user can selects/focus the specified item. divider items. The Item.Divider property specifies whether the item displays a single cell, instead displaying whole cells.

  In conclusion, aggregate functions counts ONLY items that are sortable, selectable and not a divider-item.
  
  For instance:

  "get(`count(current,dir,1)`)", gets the count of child-items
  "get(`count(current,all,1)`)", gets the count of all child-items (implies recursively child items)
  "get(`count(current,rec,1)`)", counts the number of leaf items ( a leaf item is an item with no child items )
  "get(`sum(current,dir,%1 ? 1 : 0)`)", counts the number of child-items that have not-empty cells within the second-column
  "get(`sum(current,dir,value)`)", gets the total of values of child-items (direct descendent) within the same column
  "get(`sum(all,rec,value)`)", gets the total of values of leaf-items within the same column
  "get(`sum(parent,dir,dbl(%1) + dbl(%2))`)", gets the addition of all cells in the second (%1) and third (%2) column that are directly descendent of the parent item (sibling)

The format-expression supports the following binary-operators:

0 index `format`, gets the index of the item (0-based). The first added item has the index 0, the second added item has the index 1, and so on. The index of the item remains the same even if the order of the items is changed by sorting or grouping ( "1 index ``", gets the index of the item starting from 1 )
0 rindex `delimiter|format|format|...`, returns the recursive-index of the item ("1 rindex `.|A-Z`", returns values as A, A.1, A.2, B, ...)
0 pos `format`, returns the relative position of the item (the position within the parent's children collection) ( "1 pos ``", returns the position of the item (1-based) within the parent's child items collection )
0 rpos `delimiter|format|format|...`, returns the recursive relative-position of the item (the position within the parent's children collection) ( "1 rpos `.|A-Z`", returns values as A, A.1, A.2, B, ... )
0 opos `format`, returns the relative old position of the item (the position within the parent's children collection) ( "1 opos ``", returns the position of the item (1-based) within the parent's child items collection )
0 ropos `delimiter|format|format|...`, returns the recursive relative-old-position of the item (the position within the parent's children collection) ( "1 ropos `.|A-Z`", returns values as A, A.1, A.2, B, ... )
0 apos `format`, returns the absolute position of the item (the position from the first visible item) ( "1 apos ``", gets absolute position of the item )
0 rapos `delimiter|format|format|...`, returns the recursive absolute-position of the item (the position from the first visible item) ( "1 rapos `.|A-Z`", returns values as A, A.1, A.2, B, ... )

where:

• `delimiter`, is a character to separated recursive-operators such as "rindex", "rpos", "ropos" and "rapos"
• `format`, is a set of characters to be used for specifying the index

Additionally, it supports parent and root unary operators to access the values of parent or root items as explained:

parent (unary operator), refers to the parent item of the current item. This expression allows access to values or properties associated with the immediate parent in the hierarchy or structure ( "parent(1 index ``)", gets the index of the parent-item (1-based) ) (@since 4.3)
root (unary operator), refers to the root item of the current item's hierarchy. This expression allows access to values or properties of the highest-level item in the entire structure, regardless of how deeply nested the current item is ("root(%C0)", retrieves the caption of the first column for the root item) (@since 4.3)

The groupByFormatCell field is mapped to the GroupByFormatCell property, which means that the following statements are equivalent:

oGantt.Options = {groupByFormatCell: "value + ` ` + get(`count(current,rec,1)`)" }
oGantt.SetOptions({groupByFormatCell: "value + ` ` + get(`count(current,rec,1)`)" })
oGantt.GroupByFormatCell = "value + ` ` + get(`count(current,rec,1)`)"
oGantt.SetGroupByFormatCell("value + ` ` + get(`count(current,rec,1)`)")

"" {string}, the default group-by value gets displayed once the column gets grouped by
"upper(value)" {string}, the default group-by value (in upper case) gets displayed once the column gets grouped by
"value + ` <fgcolor gray>` + get(`count(current,rec,1)`)" {string}, the default group-by value plus the count of items within the group gets displayed once the column gets grouped by

The hasButtons field shows or hides the expand/collapse glyphs (+/- buttons to expand-collapse the item). The HasButtons property maps directly to hasButtons field. The treeColumnIndex field specifies the index or identifier/key/caption of the column that displays the hierarchy and the expand/collapse glyphs. The HasLines property customizes the color, width and style of the control's hierarchy-lines. The margins field specifies the control's margins, which define the indentation between a parent and its children.

The hasButtons field is mapped to the HasButtons property, which means that the following statements are equivalent:

oGantt.Options = {hasButtons: true}
oGantt.SetOptions({hasButtons: true})
oGantt.HasButtons = true
oGantt.SetHasButtons(true)

null {null} or true {boolean}, shows the expand/collapse glyphs
false {boolean}, hides the expand/collapse glyphs

The hasLines field defines the color, width and style of the control's hierarchy-lines. The hasLines object includes any of the following:

• width {number}, specifies the line's width or size (1 by default)
• color {string}, indicates the line's color (partial-black by default)
• style {array}, specifies the dash pattern to show the lines (dotted by default)
• cap {("butt"|"round"|"square")}, determines the shape used to draw the end points of lines ("butt", the ends of lines are squared off at the endpoints by default)
• join {("bevel"|"round"|"miter")}, determines the shape used to join two line segments where they meet ("miter", connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. by default)

The hasLines field is mapped to the HasLines property, which means that the following statements are equivalent:

oGantt.Options = {hasLines: {width: 2, color: "#FF0000", style: [4,2], cap: "round", join: "bevel"}}
oGantt.SetOptions({hasLines: {width: 2, color: "#FF0000", style: [4,2], cap: "round", join: "bevel"}})
oGantt.HasLines = {width: 2, color: "#FF0000", style: [4,2], cap: "round", join: "bevel"}
oGantt.SetHasLines({width: 2, color: "#FF0000", style: [4,2], cap: "round", join: "bevel"})

The headerEnabled field enables or disables the control's header (includes the control's sortbar or floatbar). While disabled the user can't move, resize, sort or drag and drop the columns by drag and drop. The HeaderEnabled property (equivalent of headerEnabled field) gets or sets the enabled state of the control's header. The header displays the header of each visible-columns. The HeaderVisible property shows or hides the control's header. The HeaderEnabled property enables or disables the control's header(includes the control's sortbar or floatbar).

The headerEnabled field is mapped to the HeaderEnabled property, which means that the following statements are equivalent:

oGantt.Options = {headerEnabled: false}
oGantt.SetOptions({headerEnabled: false})
oGantt.HeaderEnabled = false
oGantt.SetHeaderEnabled(false)

false {boolean} or 0 {number}, disables the headers of the control
true {boolean}, enables the headers of the control

The headerHeight field specifies the height to display the control's header (specifies the height the header's level, where columns header is being shown). The HeaderHeight property (equivalent of headerHeight field) gets or sets the height to display the control's header. The header displays the header of each visible-columns. The HeaderVisible property shows or hides the control's header. The HeaderEnabled property enables or disables the control's header(includes the control's sortbar or floatbar). While disabled the user can't move, resize, sort or drag and drop the columns by drag and drop.

The headerHeight field is mapped to the HeaderHeight property, which means that the following statements are equivalent:

oGantt.Options = {headerHeight: 24}
oGantt.SetOptions({headerHeight: 24})
oGantt.HeaderHeight = 24
oGantt.SetHeaderHeight(24)

0 {number}, hides the control's header
24 {number}, indicates that the height of the control's header is 24

The headerVisible field specifies whether the control's header is visible or hidden. The header displays the header of each visible-columns. The HeaderVisible property (equivalent of headerVisible field) gets or sets the visibility of the control's header. The header displays the header of each visible-columns. The HeaderEnabled property enables or disables the control's header(includes the control's sortbar or floatbar). While disabled the user can't move, resize, sort or drag and drop the columns by drag and drop.

The Gantt.HeaderVisibleEnum type defines the following values:

exHeaderHidden(0), the control's header is hidden exHeaderVisible(-1), the control's header is visible exHeaderVisibleExtendLevels(1), the control's header is visible, and each column's header is extended to cover all levels of the header

The headerVisible field is mapped to the HeaderVisible property, which means that the following statements are equivalent:

oGantt.Options = {headerVisible: -1}
oGantt.SetOptions({headerVisible: -1})
oGantt.HeaderVisible = -1
oGantt.SetHeaderVisible(-1)

false {boolean} or 0 {number}, hides the control's header
-1 {number} or Gantt.HeaderVisibleEnum.exHeaderVisible {number}, shows the control's header
true {boolean} or 1 {number}, shows the control's header (each column's header is extended to cover all levels of the header)

The hoistItem field defines the hoisted item, promoting it and all its visible children to the top level without altering their content or properties.

By default,

• hoisting an item also displays all of its parent rows up to the root. To restrict the view so that only the hoisted item and its visible children are shown, set the FilterInclude property to exMatchingItemsOnly
• when an item is hoisted, all of its child rows are automatically expanded. To preserve their original expand/collapse state, use the Layout property to save the current layout before changing the hoist, and restore it immediately afterward.

For reference, the Selection property specifies the currently selected row, while the Item property retrieves the row by its index.

The hoistItem field is mapped to the HoistItem property, which means that the following statements are equivalent:

oGantt.Options = {hoistItem: 0}
oGantt.SetOptions({hoistItem: 0})
oGantt.HoistItem = 0
oGantt.SetHoistItem(0)

0 {number}, hoists the first item (index 0)
"id" {string}, hoists the item with the identifier/key "id"
item {Item}, hoists the item referenced by the Item object

The imageAlign field defines the alignment of the image within the item. The ImageAlign property (equivalent of imageAlign field) gets or sets the alignment of the cell's image. The Column.ImageAlign property takes priority over the control's ImageAlign property, and the Cell.ImageAlign property takes priority over the Column.ImageAlign property. When the Cell.ImageAlign property is null, the alignment falls back to the Column.ImageAlign property, and if the Column.ImageAlign property is also null, the control's ImageAlign property is used.

The imageAlign property can be any of the following:

• 0, the image is on the left of the cell's caption
• 1, the image is on the right of the cell's caption
• 2, the image is on the top of the cell's caption
• 3, the image is on the bottom of the cell's caption

The imageAlign field is mapped to the ImageAlign property, which means that the following statements are equivalent:

oGantt.Options = {imageAlign: 1}
oGantt.SetOptions({imageAlign: 1})
oGantt.ImageAlign = 1
oGantt.SetImageAlign(1)

null {null}, the image is aligned left to the caption (default)
1 {number}, the image is displayed to the right of the cell's caption

The imageSize field defines the size of the cell's image. The ImageSize property directly maps to the imageSize field. The Column.ImageSize property takes priority over the control's ImageSize property, and the Cell.ImageSize property takes priority over the Column.ImageSize property. When the Cell.ImageSize property is null, the size falls back to the Column.ImageSize property, and if the Column.ImageSize property is also null, the control's ImageSize property is used. In short, the size priority is: Cell -> Column -> Control.

The imageSize could be of one of the following types:

• {null}, Indicates that the cell's image is displayed as it is (full-sized).
• {number}, Specifies that the cell's image is displayed into a square of giving size (same width and height). If 0 the item displays no image, if negative the cell's image is stretched to giving square, else the item's picture is scaled to fit the giving rectangle.
• {number[]}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the item's picture to scale or stretch to.

The imageSize field is mapped to the ImageSize property, which means that the following statements are equivalent:

oGantt.Options = {imageSize: "32,64"}
oGantt.SetOptions({imageSize: "32,64"})
oGantt.ImageSize = "32,64"
oGantt.SetImageSize("32,64")

null {null}, Indicates that the cell's image is displayed as it is (full-sized).
0 {number}, no image is displayed
64 {number}, the image is scaled to fit a 64 x 64 rectangle
-64 {number}, the image is strected to a 64 x 64 rectangle
[32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client
[-32,-64] {array}, stretches the image to a 32 x 64 rectangle

The itemAllowSizing field specifies whether all or none of the items are resizable or fixed. The ItemAllowSizing property maps directly to itemAllowSizing field. The allowActions field must include "item-resize" action to enable item resizing. The "item-resize[all]" action enables resizing all items, while the missing "item-resize" action disables resizing for all items. The Item.AllowSizing property can override this property for individual items. If allowActions property does not include "item-resize" action, then no item can be resized regardless of the ItemAllowSizing property value. The "item-resize[all]" action takes precedence over the ItemAllowSizing property. The DefaultItemHeight property is updated if the user resizes the item at runtime by drag an drop (AllowActions property must include "item-resize[all]").

The itemAllowSizing field is mapped to the ItemAllowSizing property, which means that the following statements are equivalent:

oGantt.Options = {itemAllowSizing: true}
oGantt.SetOptions({itemAllowSizing: true})
oGantt.ItemAllowSizing = true
oGantt.SetItemAllowSizing(true)

false {boolean}, none of the items are resizable (unless the Item.AllowSizing property is true)
true {boolean}, all of the items are resizable (unless the Item.AllowSizing property is false)

The linesAtRoot field specifies how the control links the root items. The LinesAtRoot property maps directly to linesAtRoot field. The treeColumnIndex field specifies the index or identifier/key/caption of the column that displays the hierarchy and the expand/collapse glyphs. The HasButtons property shows or hides the expand/collapse glyphs (+/- buttons to expand-collapse the item). The HasLines property customizes the color, width and style of the control's hierarchy-lines. The Margins property specifies the control's margins, which define the indentation between a parent and its children.

The exontrol.Gantt.LinesAtRootEnum type defines the following values:

• exNoLinesAtRoot(0), no lines at root items
• exLinesAtRoot(-1), the control links the root items
• exGroupLinesAtRoot(1), the control shows no links between roots, and divides them as being in the same group
• exGroupLines(2), the lines between root items are no shown, and the links show the items being included in the group
• exGroupLinesInside(3), the lines between root items are no shown, and the links are shown between child only
• exGroupLinesInsideLeaf(4), the lines between root items are no shown, and the links are shown for first and last visible child item
• exGroupLinesOutside(5), the lines between root items are no shown, and the links are shown for first and last visible child item. A parent item that contains flat child items only, does not indent the child part. By a flat child we mean an item that does not contain any child item

The linesAtRoot field is mapped to the LinesAtRoot property, which means that the following statements are equivalent:

oGantt.Options = {linesAtRoot: exontrol.Gantt.LinesAtRootEnum.exLinesAtRoot}
oGantt.SetOptions({linesAtRoot: exontrol.Gantt.LinesAtRootEnum.exLinesAtRoot})
oGantt.LinesAtRoot = exontrol.Gantt.LinesAtRootEnum.exLinesAtRoot
oGantt.SetLinesAtRoot(exontrol.Gantt.LinesAtRootEnum.exLinesAtRoot)

0 or exontrol.Gantt.LinesAtRootEnum.exNoLinesAtRoot {number}, no lines at root items
-1 or exontrol.Gantt.LinesAtRootEnum.exLinesAtRoot {number}, the control links the root items

The locked field indicates whether the control is locked(protected) or unlocked. The Locked property locks or unlocks the control. The user can't select any item, sort any column, or edit any item when the control is locked(protected). The ReadOnly property sets the control in read-only mode. While in read-only mode, the user can't edit or drag any item. The CountLockedColumns property locks columns on both the left and right sides of the view using a single byte in {high, low} format. The Item.Lock property locks or unlocks the item, placing it at the top, bottom, or making it scrollable. The ShowLockedItems property indicates whether the locked/fixed items are visible or hidden. By default, the control is unlocked.

The locked field is mapped to the Locked property, which means that the following statements are equivalent:

oGantt.Options = {locked: true}
oGantt.SetOptions({locked: true})
oGantt.Locked = true
oGantt.SetLocked(true)

false {boolean}, unlocks the control (can select any item)
true {boolean}, locks the control (can't select any item)

The margins field specifies control's margins (indicates an object of {indent} type that defines the control's margins). The Margins property corresponds directly to the margins field. The margins field is an object of {indent} type that defines the control's margins, where indent is a number that specifies the size of the margin in pixels. For instance, the margins field can be set to {indent: 5} to specify a margin of 5 pixels for all sides of the control, or it can be set to {left: 5, top: 10, right: 15, bottom: 20} to specify different margins for each side of the control.

The margins field is mapped to the Margins property, which means that the following statements are equivalent:

oGantt.Options = {margins: {indent: 5}}
oGantt.SetOptions({margins: {indent: 5}})
oGantt.Margins = {indent: 5}
oGantt.SetMargins({indent: 5})

{indent: 5} {object}, specifies a margin of 5 pixels for all sides of the control

The onErrorChooseFile field specifies whether the control displays an input-file to let user choose a local filte to import, as soon as an error occurs. The OnErrorChooseFile property maps directly to onErrorChooseFile field. The onerror event occurs when an error occurs during the loading of the control, such as when the data source is not accessible or when the file being imported has an unsupported format. If the OnErrorChooseFile property is set to true, the control displays an input-file to let user choose a local file to import, as soon as an error occurs. If the user selects a file and clicks "Open", the control attempts to import the selected file using the Import method, based on the file extension. If the OnErrorChooseFile property is set to false, no input-file is displayed as soon an error occurs. The ChooseFile() method clears the control's data and adds an input-file element to let user choose a local file (CSV or XML format) to import data from.

The onErrorChooseFile field is mapped to the OnErrorChooseFile property, which means that the following statements are equivalent:

oGantt.Options = {onErrorChooseFile: true}
oGantt.SetOptions({onErrorChooseFile: true})
oGantt.OnErrorChooseFile = true
oGantt.SetOnErrorChooseFile(true)

false {boolean}, no input-file is displayed as soon an error occurs
true {boolean}, the control displays an input-file to let user choose a local filte to import, as soon as an error occurs

The pad field defines the item's padding (space between the item's content and its border), as one of the following:

• {number} a numeric value, to pad horizontal and vertical size with the same value
• {(string|number[])} a "x,y" or [x,y] type to specify the padding on horizontal and vertical side

The Pad property (equivalent of pad field) gets or sets the item's padding or the space between item's content and its borders. The Column.Pad property takes priority over the control's Pad property, and the Cell.Pad property takes priority over the Column.Pad property. When the Cell.Pad property is null, the padding falls back to the Column.Pad property, and if the Column.Pad property is also null, the control's Pad property is used. In short, the padding priority is: Cell -> Column -> Control.

The pad field is mapped to the Pad property, which means that the following statements are equivalent:

oGantt.Options = {pad: "8,4"}
oGantt.SetOptions({pad: "8,4"})
oGantt.Pad = "8,4"
oGantt.SetPad("8,4")

null {null}, indicates that the default padding value of [4,4] is applied
0 {number}, indicates no padding
"8,4" {string}, increases the item's width with 2 * 8-pixels and item's height with 2 * 4-pixels
[8,4] {array}, increases the item's width with 2 * 8-pixels and item's height with 2 * 4-pixels

The readOnly field indicates whether the control is read-only. The ReadOnly property (equivalent of readOnly field) sets the control in read-only mode. While in read-only mode, the user can't edit or drag any item. The user can still select item. The Locked property locks or unlocks the control. The user can't select any item, sort any column, or edit any item when the control is locked(protected).

The readOnly field is mapped to the ReadOnly property, which means that the following statements are equivalent:

oGantt.Options = {readOnly: true}
oGantt.SetOptions({readOnly: true})
oGantt.ReadOnly = true
oGantt.SetReadOnly(true)

false {boolean}, the user can edit or drag any item
true {boolean}, the user can not edit or drag the items

The scrollBars field determines whether the control has horizontal and/or vertical scroll bars. The Gantt.ScrollBars property (equivalent of scrollBars field) gets or sets the control's scroll bars as a value of the exontrol.ScrollBarsEnum type. The scroll bars are displayed if the content is larger than the control's client area, and the scrollBars field includes exNoScroll flag. If the scrollBars field includes exDisableNoHorizontal or exDisableNoVertical flag, the control always displays the horizontal or vertical scroll bar, and they are active only if scroll is possible. If the scrollBars field includes exDisableBoth flag, the control always displays both horizontal and vertical scroll bars, and they are active only if scroll is possible. If the scrollBars field includes exHideSBS flag, no scroll bars are shown, but scroll is allowed. The scrollBars field is a combination of one or more exontrol.ScrollBarsEnum flags that determines whether the control has horizontal and/or vertical scroll bars.

The exontrol.ScrollBarsEnum type defines the following flags:

• exNoScroll (0), specifies that no scroll bars are shown (scroll is not allowed)
• exHorizontal (1), specifies that only horizontal scroll bars is shown
• exVertical (2), specifies that only vertical scroll bars is shown
• exBoth (3), specifies that both horizontal and vertical scroll bars are shown if the content is larger than the control's client area
• exDisableNoHorizontal (5), specifies that the horizontal scroll bar is always shown, it is disabled if it is unnecessary
• exDisableNoVertical (10), specifies that the vertical scroll bar is always shown, it is disabled if it is unnecessary
• exDisableBoth (15), specifies that both horizontal and vertical scroll bars are always shown, disabled if they are unnecessary
• exHScrollOnThumbRelease (0x100), specifies that the control's content is horizontally scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
• exVScrollOnThumbRelease (0x200), specifies that the control's content is vertically scrolled as soon as the user releases the thumb of the vertical scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
• exScrollOnThumbRelease (0x300), specifies that the control's content is scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
• exHScrollEmptySpace (0x400), allows empty space, when the control's content is horizontally scrolled to the end
• exVScrollEmptySpace (0x800), allows empty space, when the control's content is vertically scrolled to the end
• exScrollEmptySpace (0xC00), allows empty space, when the control's content is scrolled to the end
• exExtendSBS (0x3000), specifies that the control's scroll-bars are visible only when cursor hovers the window. Also, the control's client area is extended on the scroll bars portion
• exMinSBS (0xC000), specifies that the control's scroll-bars are shown as minimized
• exHideSBS (0x10000), specifies that no scroll bars are shown (scroll is allowed)

The scrollBars field is mapped to the ScrollBars property, which means that the following statements are equivalent:

oGantt.Options = {scrollBars: exontrol.ScrollBarsEnum.exDisableBoth}
oGantt.SetOptions({scrollBars: exontrol.ScrollBarsEnum.exDisableBoth})
oGantt.ScrollBars = exontrol.ScrollBarsEnum.exDisableBoth
oGantt.SetScrollBars(exontrol.ScrollBarsEnum.exDisableBoth)

0 or exontrol.ScrollBarsEnum.exNoScroll {number}, removes the control's scroll bars, so scroll is not allowed
15 or exontrol.ScrollBarsEnum.exDisableBoth {number}, the control always displays the scroll bars, and they are active only if scroll is possible
12291 or exontrol.ScrollBarsEnum.exBoth | exontrol.ScrollBarsEnum.exExtendSBS {number}, the control shows the scroll bars only if the cursor hovers the control, and the control scroll bars are hidden as soon as the cursor leaves the control

The scrollPos field defines the horizontal and vertical scroll-position of the control's default view. The ScrollPos property maps directly to scrollPos field. The scrollBars field specifies the visibility of horizontal and vertical scroll bars.

The scrollPos field specifies an object of {x,y} type that defines the control's horizontal and vertical scroll-position as explained:

x {number}, indicates the horizontal scroll-position
y {number}, indicates the vertical scroll-position

The scrollPos field is mapped to the ScrollPos property, which means that the following statements are equivalent:

oGantt.Options = {scrollPos: {x: 100, y: 50}}
oGantt.SetOptions({scrollPos: {x: 100, y: 50}})
oGantt.ScrollPos = {x: 100, y: 50}
oGantt.SetScrollPos({x: 100, y: 50})

{x: 100} {object}, scrolls horizontally to position 100
{x: 100, y: 50} {object}, scrolls horizontally to position 100, and vertically to 50

The selection field defines the control's selection, as one of the following:

• {null}, clears the entire selection (unselect all)
• {number}, selects an item giving index within the items collection
• {string}, selects an item giving its identifier/key
• {Item}, selects an item giving its reference
• {Items}, selects all items within the control
• {array}, specifies an array of [type] type, where type could be any number, string or Item type.

The singleSel field gets or sets the control's selection to single, multiple or toggle. The Item.Selected property defines whether the item is selected. The onselchange event is raised when the selection is changed.

The selection field is mapped to the Selection property, which means that the following statements are equivalent:

oGantt.Options = {selection: 0}
oGantt.SetOptions({selection: 0})
oGantt.Selection = 0
oGantt.SetSelection(0)

null {null}, clears the entire selection
0 {number}, selects the first-item
[0,"id"] {number}, selects the first-item and the item with the identifier/key "id"

The shapes field defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. The Shapes property corresponds directly to the shapes field. The shape is defined as a JSON representation of the shape object, or as a name of a predefined shape within exontrol.Shapes.Gantt or exontrol.Shapes objects, or as a CSS color value. The part is defined as one of the following: cell, check, column, column-filter, expand, and filterBar.

The format of the property is:

"shape(part),shape(part),..."

where:

• "shape", defines the shape to apply on the UI part as one of the following:

  ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
  ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
  ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
  ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
  ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
  ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
  ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
  ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
  ◦ specifies the name of the field within the exontrol.Shapes.Gantt object (while it starts with a lowercase letter, such as shitem which refers to exontrol.Shapes.Gantt.shitem shape)
  ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)
  

• "part", defines the name of the part the shape is applied on (as defined below)

The shapes property supports any of the following parts:

Part	Description
"cell"	defines the visual-appearance for all cells within the control. The Cell.Shape property changes the shape for the cell itself. The Column.CellShape property gets or sets the shape to apply on the column's body/data/cells.
"check"	defines the visual-appearance of the check-box
"column"	defines the visual-appearance of column's header. The Column.Shape property changes the shape for the column itself (column's header).
"column-filter"	defines the visual-appearance of column's filter-button
"expand"	defines the visual-appearance of expand/collapse glyphs
"filterBar"	defines the visual-appearance of the control's filter-bar
"filterBar-close"	defines the visual-appearance of the filter-bar's close button
"frameFit"	specifies the visual appearance of the frame that is displayed while fitting objects into the control's client area during a drag operation
"frameSel"	defines the visual appearance to display a frame while selecting objects by drag
"item"	defines the visual-appearance for all items within the control. The Item.Shape property defines the shape for the item itself.
"itemAlt"	defines the visual-appearance for alternate-items (every second item). The Item.Shape property defines the shape for the item itself.
"itemDiv"	defines the visual-appearance for divider-items (a divider-item displays only a single-cell). The Item.Shape property defines the shape for the item itself.
"lock"	defines the visual-appearance for locked-part of the tree-view (left and right-side panel of the tree-view, determined by the countLockedColumns field, displays un-scrollable columns)
"lock-header"	defines the visual-appearance for locked-part of the header (left and right-side panels of the header, determined by the countLockedColumns field, displays un-scrollable columns). The "lock-header" and "lock-header-right" are background shapes and may be overridden by columns, so set exontrol.Shapes.Gantt.shcolumn.normal.fillColor = "rgba(0,0,0,0.25)" for a partially transparent background.
"lock-header-right"	defines independent styling of right-locked-part of the header (right-side panel of the header, determined by the countLockedColumns field, displays un-scrollable columns). The "lock-header" and "lock-header-right" are background shapes and may be overridden by columns, so set exontrol.Shapes.Gantt.shcolumn.normal.fillColor = "rgba(0,0,0,0.25)" for a partially transparent background. (@since 4.6)
"lock-items"	defines the visual appearance of top or bottom-locked items in the tree view (these locked items, displayed in the top and bottom panels of the tree view (as determined by the SetLockedItemsCount method), remain fixed and do not scroll) (@since 4.6)
"lock-items-bottom"	defines independent styling of the bottom-locked items in the tree view (these items appear in the bottom panel (as determined by the SetLockedItemsCount method) and remain fixed without scrolling) (@since 4.6)
"lock-right"	defines independent styling of the right-locked columns (items section only, not including the header) (right-side panel of the tree-view, determined by the countLockedColumns field, displays un-scrollable columns) (@since 4.6)
"multiSel"	specifies the visual appearance to show the count of multiple-selected items (for instance, when you drag and drop multiple items at once)
"radio"	defines the visual-appearance of the radio-button
"select"	defines the visual-appearance of selected-item
"sortBar-caption"	defines the visual-appearance of control's sortbar when it displays no columns
"unlock"	defines the visual-appearance for unlocked-part of the tree-view (ride-side panel of the tree-view, determined by the countLockedColumns field, displays scrollable columns)
"unlock-header"	defines the visual-appearance for unlocked-part of the header (ride-side panel of the header, determined by the countLockedColumns field, displays scrollable columns)

The expivot/js control supports additional parts as listed in the table below:

Part	Description
"itemTot"	defines the visual-appearance for item of total type
"itemSub"	defines the visual-appearance for item of sub-total type
"pivotBar-addNew"	defines the visual-appearance of the "add-new" buttons within the control's pivotbar
"pivotBar-aggregate"	defines the visual-appearance of an aggregate-glyph within the control's pivotbar
"pivotBar-idem"	defines the visual-appearance of idem-columns within the control's pivotbar
"pivotBar-refresh"	defines the visual-appearance of the "Refresh" button within the control's pivotbar
"pivotBar-total"	defines the visual-appearance of a total-field within the control's pivotbar

The exgantt/js control supports additional parts as listed in the table below:

Part	Description
"date-ticker"	defines the visual-appearance to indicate the date-time being hovered
"level"	defines the visual-appearance for level's header
"nw"	defines the visual-appearance to show the non-working units
"select-bar"	defines the visual-appearance of selected item-bar
"select-chart"	defines the visual-appearance of selected-item (applied to chart section only)
"select-date"	defines the visual-appearance to display a selected-date
"select-overview"	defines the visual-appearance to display the overview-selection
"select-overview-resize"	defines the visual-appearance to display left/right resize-margins of the overview-selection (@since 2.4)
"selectout-overview"	defines the visual-appearance to display the left/right parts outside of the overview-selection (@since 2.4)
"selectunit-overview"	defines the visual-appearance to display the selected unit within the control's overview (@since 2.4)
"unavailableunit-overview"	defines the visual-appearance to display unavailable-units within the control's overview (@since 2.4)

The shapes property is mapped to the Shapes property, which means that the following statements are equivalent:

oGantt.Options = {shapes: "red(itemAlt)"}
oGantt.SetOptions({shapes: "red(itemAlt)"})
oGantt.Shapes = "red(itemAlt)"
oGantt.SetShapes("red(itemAlt)")

null {null}, specifies the default visual appearance
"" {string}, no shape (no visual appearance is applied to any part of the control)
"red(itemAlt)", "#FF0000(itemAlt)", "rgb(255,0,0)(itemAlt)", "rgba(255,0,0,1)(itemAlt)" {string}, shows alternate-items in red
'{"hover":{"fillColor":"black","tfi":{"fgColor":"white"}}}(item)' {string}, shows the item in white on a black-background, while the cursor hovers it
"xxx(d),yyy(d,m),zzz(y)"  {string}, specifies that the exontrol.Shapes.Gantt.xxx combined with exontrol.Shapes.Gantt.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Gantt.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Gantt.zzz object defines the visual appearance of "y" part of the control

The showLockedItems field indicates whether the locked/fixed items are visible or hidden. The ShowLockedItems property maps directly to showLockedItems field. The locked/fixed items are displayed on top or bottom side of the view based on the Item.Lock property that specifies or retrieves the section of the control where the item is placed - either locked at the top, scrollable, or locked at the bottom. The locked/fixed items are not affected by sorting or grouping operations. The SetLockedItemsCount() method specifies the number of items fixed on the top or bottom side of the control.

The showLockedItems field is mapped to the ShowLockedItems property, which means that the following statements are equivalent:

oGantt.Options = {showLockedItems: true}
oGantt.SetOptions({showLockedItems: true})
oGantt.ShowLockedItems = true
oGantt.SetShowLockedItems(true)

false {boolean}, the control's locked/fixed items are not shown
true {boolean}, the control's locked/fixed items are visible

The singleSel field specifies whether the control supports single, multiple, toggle selection. The SingleSel property directly maps to the singleSel field. The singleSel field is a combination of one or more Gantt.SingleSelEnum flags that defines the control's selection behavior.

The Gantt.SingleSelEnum type defines the following flags:

• exDisableSel(0), specifies that the control's selection is disabled (can not be combined with any other flags)
• exEnableSel(1), specifies that the control's selection is enabled (multiple-selection, unless the exSingleSel is set )
• exSingleSel(2), specifies that the user can select a item only
• exToggleSel(4), specifies that the item's selection state is toggled once the user clicks a item.
• exDisableCtrlSel(8), disables toggling the item's selection state when user clicks a item, while CTRL modifier key is pressed.
• exDisableShiftSel(16), disables selecting items using the SHIFT key.
• exDisableDrag(32), disables selecting items by drag.

The singleSel field is mapped to the SingleSel property, which means that the following statements are equivalent:

oGantt.Options = {singleSel: 3}
oGantt.SetOptions({singleSel: 3})
oGantt.SingleSel = 3
oGantt.SetSingleSel(3)

0 or exontrol.Gantt.SingleSelEnum.exDisableSel {number}, disables selecting any item
3 or exontrol.Gantt.SingleSelEnum.exSingleSel | exontrol.Gantt.SingleSelEnum.exEnableSel {number}, enables control's single selection, so only a single item can be selected
6 or exontrol.Gantt.SingleSelEnum.exToggleSel | exontrol.Gantt.SingleSelEnum.exSingleSel {number}, enables control's single and toggle selection, which means that once a item is selected it gets unselected once it is clicked, or reverse, and only a single-item can be selected at once.

The singleSort field specifies whether the control supports single or multiple-columns sort. The SingleSort property (equivalent of singleSort field) gets or sets whether the control supports single or multiple-columns sort. If true, the control supports single-column sorts only, and sorting a column will remove the sort from the previously sorted column. If false, the control supports one ore more sorted-columns, and sorting a column will not remove the sort from the previously sorted columns.

The singleSort field is mapped to the SingleSort property, which means that the following statements are equivalent:

oGantt.Options = {singleSort: true}
oGantt.SetOptions({singleSort: true})
oGantt.SingleSort = true
oGantt.SetSingleSort(true)

false {boolean}, specifies that the control supports one ore more sorted-columns
true {boolean}, the control supports single-column sorts only

The smooth field defines the time in ms the control goes from one layout to another. The Smooth property corresponds directly to the smooth field. The smooth field is a number that defines the time in ms the control goes from one layout to another. Setting the smooth field to 0 means that no smooth changes are performed once the control goes from a layout to another. Setting the smooth field to 125 means that a smooth-transition is performed from a layout to another for 125 ms.

The smooth field is mapped to the Smooth property, which means that the following statements are equivalent:

oGantt.Options = {smooth: 125}
oGantt.SetOptions({smooth: 125})
oGantt.Smooth = 125
oGantt.SetSmooth(125)

0 {number}, no smooth changes once the control goes from a layout to another
125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms.

The sortBarCaption field specifies the caption to be shown on the control's sortbar when it is empty. The SortBarCaption property (equivalent of sortBarCaption field) gets or sets the caption to be shown on the control's sortbar when it is empty. The sortbar displays the header of each sorted/grouped-columns. The SortBarVisible property shows or hides the control's sortbar. The singleSort field specifies whether the control supports single or multiple-columns sort. The sortOnClick field indicates whether the column gets sorted once the user clicks its header.

The sortBarCaption field is mapped to the SortBarCaption property, which means that the following statements are equivalent:

oGantt.Options = {sortBarCaption: "Drag a column header here to group by that column."}
oGantt.SetOptions({sortBarCaption: "Drag a column header here to group by that column."})
oGantt.SortBarCaption = "Drag a column header here to group by that column."
oGantt.SetSortBarCaption("Drag a column header here to group by that column.")

null {null}, the control's sortbar shows the default-caption
"Drag a <b>column</b> header here to group by that column." {string}, changes the caption to be displayed on the control's sortbar while it is empty.

The sortBarVisible field specifies whether the control's sortbar is visible or hidden. The sortbar displays the header of each sorted/grouped-columns. The SortBarVisible property (equivalent of sortBarVisible field) shows or hides the control's sortbar. The sortbar displays the header of each sorted/grouped-columns. The sortBarCaption field specifies the caption to be shown on the control's sortbar when it is empty. The singleSort field specifies whether the control supports single or multiple-columns sort. The sortOnClick field indicates whether the column gets sorted once the user clicks its header.

The sortBarVisible field is mapped to the SortBarVisible property, which means that the following statements are equivalent:

oGantt.Options = {sortBarVisible: true}
oGantt.SetOptions({sortBarVisible: true})
oGantt.SortBarVisible = true
oGantt.SetSortBarVisible(true)

false {boolean}, hides the control's sortbar
true {boolean}, shows the control's sortbar

The sortOnClick field indicates whether the column gets sorted once the user clicks its header. The SortOnClick property (equivalent of sortOnClick field) gets or sets whether the column gets sorted once the user clicks its header. The column gets sorted only if the user clicks the column's header, and the column's AllowSort property is true. If the column gets sorted, the onchange("sort-column") event occurs.

The Gantt.SortOnClickEnum type defines the following values:

• exNoSort(0), the column is not sorted when user clicks the column's header.
• exDefaultSort(-1), The column gets sorted when user the clicks the column's header.
• exUserSort(-1), The control displays the sort icons, but it doesn't sort the column (not supported)

The sortOnClick field is mapped to the SortOnClick property, which means that the following statements are equivalent:

oGantt.Options = {sortOnClick: 0}
oGantt.SetOptions({sortOnClick: 0})
oGantt.SortOnClick = 0
oGantt.SetSortOnClick(0)

null {null}, specifies the control's default sort on click, equivalent of exDefaultSort
0 {number}, no column gets sorted once the user clicks any column's header

The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. By default, the tfi field is null, so the canvas uses its own default font defined by exontrol.defGUIFont (typically "12px sans-serif"). CSS fonts applied to surrounding HTML elements do not affect the canvas; the canvas text is independent of page styles, and the default font can be changed by setting exontrol.defGUIFont.

The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

• bold, displays the text in bold (equivalent of <b> tag)
• italic, displays the text in italics (equivalent of <i> tag)
• underline, underlines the text (equivalent of <u> tag)
• strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
• <fontName name>, specifies the font's family (equivalent of <font name> tag)
• <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
• <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
• <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
• <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
• <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the tfi field that's not recognized as a keyword is interpreted as:

• name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
• size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The tfi field as object supports any of the following fields:

• bold {boolean}, displays the text in bold (equivalent of <b> tag)
• italic {boolean}, displays the text in italics (equivalent of <i> tag)
• underline {boolean}, underlines the text (equivalent of <u> tag)
• strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
• fontName {string}, specifies the font's family (equivalent of <font name> tag)
• fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
• fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
• bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
• shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
  • color {string}, defines the color of the text's shadow (CSScolor)
  • width {number}, defines the size of the text's shadow
  • offset {number}, defines the offset to show the text's shadow relative to the text
• outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
  • color {string}, defines the gradient-color (CSScolor)
  • mode {number}, defines the gradient direction as 0 (left-right), 1 (default, top-bottom), 2 (left-center-right), and 3 (top-center-bottom)
  • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

• Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
• Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
• RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
• RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
• HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
• HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
• Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.

The tfi field is mapped to the Tfi property, which means that the following statements are equivalent:

oGantt.Options = {tfi: "b monospace 16 <fg blue>"}
oGantt.SetOptions({tfi: "b monospace 16 <fg blue>"})
oGantt.Tfi = "b monospace 16 <fg blue>"
oGantt.SetTfi("b monospace 16 <fg blue>")

null {null}, the tfi field is ignored
"bold monospace 16 <fg blue>" {string}, defines Monospace font of 16px height, bold and blue
{bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blue

The toolTipDelay field specifies the amount of time the mouse pointer must hover over an object before the tool tip is displayed. Adjusting this value allows you to control how quickly tool tips appear, improving usability and user experience. Setting the property to 0 will cause tool tips to appear immediately when the mouse pointer hovers over an object, while setting it to a higher value (e.g., 128) will introduce a delay before the tool tip is shown, allowing users to avoid accidental tool tip pop-ups when quickly moving the mouse across the control.

The toolTipDelay property is mapped to the ToolTipDelay property, which means that the following statements are equivalent:

oGantt.Options = {toolTipDelay: 128}
oGantt.SetOptions({toolTipDelay: 128})
oGantt.ToolTipDelay = 128
oGantt.SetToolTipDelay(128)

0 {number}, the tooltip is shown "immediately"
128 {number}, the tooltip is displayed in 128 ms.

The toolTipPopDelay field specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control. Adjusting this value allows you to control how long tool tips stay visible, improving usability and user experience. Setting the property to 0 will cause tool tips to disappear immediately when the mouse pointer stops moving, while setting it to a higher value (e.g., 5000) will allow tool tips to remain visible for a longer period of time, giving users more time to read the information provided in the tool tip. The toolTipDelay field specifies the amount of time the mouse pointer must hover over an object before the tool tip is displayed. The toolTipWidth field indicates the max-width of the control's tooltip (in pixels).

The toolTipPopDelay property is mapped to the ToolTipPopDelay property, which means that the following statements are equivalent:

oGantt.Options = {toolTipPopDelay: 5000}
oGantt.SetOptions({toolTipPopDelay: 5000})
oGantt.ToolTipPopDelay = 5000
oGantt.SetToolTipPopDelay(5000)

0 {number}, no tooltip is shown for any object (disabled)
-1 {number}, the tooltip stays indefinitely (negative)
1000 {number}, the tooltip is visible for 1 second

The toolTipWidth field indicates the max-width of the control's tooltip (in pixels). Adjusting this value allows you to control the width of tool tips, improving readability and user experience. Setting the property to 0 will cause tool tips to have no maximum width, allowing them to expand as needed to fit their content, while setting it to a specific value (e.g., 300) will limit the width of tool tips, causing longer content to wrap within the specified width, making it easier for users to read and understand the information provided in the tool tip. The toolTipDelay field specifies the amount of time the mouse pointer must hover over an object before the tool tip is displayed. The toolTipPopDelay field specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control.

The toolTipWidth property is mapped to the ToolTipWidth property, which means that the following statements are equivalent:

oGantt.Options = {toolTipWidth: 300}
oGantt.SetOptions({toolTipWidth: 300})
oGantt.ToolTipWidth = 300
oGantt.SetToolTipWidth(300)

0 {number}, no tooltip is shown for any object (disabled)
-1 {number}, the tooltip's content is displayed on a single line (without limit the width of it)
300 {number}, the tooltip's max-width is 300 pixels

The treeColumnIndex field specifies the index or identifier/key/caption of the column that displays the hierarchy. The TreeColumnIndex property maps directly to treeColumnIndex field. The HasButtons property shows or hides the expand/collapse glyphs (+/- buttons to expand-collapse the item). The HasLines property customizes the color, width and style of the control's hierarchy-lines. The Margins property specifies the control's margins, which define the indentation between a parent and its children.

The treeColumnIndex field is mapped to the TreeColumnIndex property, which means that the following statements are equivalent:

oGantt.Options = {treeColumnIndex: 0}
oGantt.SetOptions({treeColumnIndex: 0})
oGantt.TreeColumnIndex = 0
oGantt.SetTreeColumnIndex(0)

null {null}, no column displays the hierarchy.
0 {number}, the column with the index 0, displays the hierarchy (displays the expand/collapse glyphs)
"xxx" {string}, the column with the key or plain-caption on "xxx" displays the hierarchy.

The wheelChange field specifies how much the control scrolls when the user rotates the mouse wheel. This setting allows you to adjust the sensitivity of the mouse wheel interaction with the control.

• Setting wheelChange to 0 disables mouse wheel actions, preventing the control from changing when the wheel is scrolled
• Setting wheelChange to a positive number, such as 5, increases the control's value by that amount each time the wheel is rotated, enabling faster adjustments

By modifying this value, you can fine-tune the control's responsiveness, making it easier for users to perform precise changes or larger adjustments as needed.

The wheelChange field is mapped to the WheelChange property, which means that the following statements are equivalent:

oGantt.Options = {wheelChange: 5}
oGantt.SetOptions({wheelChange: 5})
oGantt.WheelChange = 5
oGantt.SetWheelChange(5)

The wheelChange field is mapped to the WheelChange property, which means that the following statements are equivalent:

oGantt.Options = {wheelChange: 5}
oGantt.SetOptions({wheelChange: 5})
oGantt.WheelChange = 5
oGantt.SetWheelChange(5)

0 {number}, locks any action the mouse's wheel performs
18 {number}, scrolls the control by 18-pixels when mouse's wheel is rotated (SHIFT + wheel scrolls horizontally)

The zoom field defines the zoom factor of the control's content. The Zoom property directly maps to the zoom field. The zoomLevels field defines the margins of the zoom-factor the control is allowed to magnify. The zoom field can be any value between 10 (10%) and 1000 (1000%). The default value of zoom is null, which indicates that the control's content is shown in normal-view (100%).

The zoom field is mapped to the Zoom property, which means that the following statements are equivalent:

oGantt.Options = {zoom: 150}
oGantt.SetOptions({zoom: 150})
oGantt.Zoom = 150
oGantt.SetZoom(150)

null {null}, Specifies normal-view (100%)
150 {number}, Indicates that the control's content is magnfied to 150%

The zoomLevels field defines the zoom-levels the user can magnify the control's content (specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-margins the control's content is allowed to zoom). The ZoomLevels property directly maps to the zoomLevels field. The zoom field defines the current zoom factor of the control's content.

The zoomLevels field is mapped to the ZoomLevels property, which means that the following statements are equivalent:

oGantt.Options = {zoomLevels: "50,100,150,200"}
oGantt.SetOptions({zoomLevels: "50,100,150,200"})
oGantt.ZoomLevels = "50,100,150,200"
oGantt.SetZoomLevels("50,100,150,200")

null {null}, Specifies that the control's zoom factor is always 100%
150 {number}, Specifies that the control's zoom factor is always 150%
"50,100,200,350" {string}, Indicates that the zoom-factor can be any of selected values, and the margins of zoom-factor is 50% to 350%