TV class (Tree)

• clientA {object}, indicates an object of {Column} type that indicates the column to fit into the control's client area
• clientA {object}, indicates an object of {Item} type that indicates the item to fit into the control's client area
• clientA {object}, indicates an object of {Cell} type that indicates the cell to fit into the control's client area
• clientA {number}, specifies an integer that indicates the index of the item to fit into the control's client area (if negative the index is counted from the end) (@since 5.1)
• clientA {number[]}, specifies an array of [x,y,width,height] type that indicates the absolute-coordinates of the layout-rectangle to fit into the control's client area

• expandParents {boolean/number}, (@since 5.1) specifies whether the parent items of the giving item are expanded as explained (valid only if clientA is an Item):
  • false/{null}/{undefined}, no parent items are expanded
  • true/1 {boolean/number}, parent items are expanded
  • 2 {number}, parent items are expanded and fully visible
• force {boolean}, forces the EnsureVisibleClient()'s smooth operation to run, not matter if no zoom/scale or scrol changed
• allowScale {boolean}, updates the control's scale/zoom-factor to ensure full-fit the client
• allowScroll {number}, specifies whether horizontal/vertical is allowed as explained:
  • 3 {number}/{null}/{undefined}, allows scrolling horizontal and vertical as required
  • 0 {number}, no horizontal or vertical scroll is allowed
  • 1 {number}, horizontal scroll is allowed
  • 2 {number}, vertical scroll is allowed
• nearestFit {boolean}, ensures that corner of the object nearest the window's client area fits it (it has effect only if the size of the object is greater than size of the window's client area)
• duration {number}, specifies the time in ms the control is smoothly performs the changes
• thisArg {any}, specifies the value of "this" keyword during the cbkI/cbkT callbacks
• cbkR {callback}, specifies a function of callback(p) type that's invoked once the EnsureVisibleClient()'s smooth operation runs (p {number}, specifies the progress of the smooth so far, as a value between 0 and 1)
• cbkI {callback}, specifies a function of callback() type that's invoked once the EnsureVisibleClient()'s smooth operation begins
• cbkT {callback}, specifies a function of callback() type that's invoked once the EnsureVisibleClient()'s smooth operation ends

• expandParents {number}, expands the parent-items as explained:
  • 0 {number}, no parent-item is expanded (ignored, default)
  • 1 {number}, the parent-item(s) is expanded
  • 2 {number}, ensure to fit the parent-item(s) as well
• selection {array}, holds an array of items as [exontrol.Tree.Item] type to fit into current-view. If missing, the control's selection is used by default
• duration {number}, specifies the time in ms the control is smoothly performs the changes. If missing, the control's smooth value is used by default

• index {number}, indicates a numeric value that defines the index of the item to request
• index {string}, specifies a string expression that defines the identifier/key of the item to request
• index {Item}, specifies the object reference to the item to request for

• "Home" {string}, scrolls to the left/top of the control
• "End" {string}, scrolls to the right/end of the control
• "Prior" or "PageUp"{string}, scrolls by a page left/up
• "Next" or "PageDown" {string}, scrolls by a page right/down
• "Up" or "ArrowUp" {string}, scrolls up
• "Down" or "ArrowDown" {string}, scrolls down
• "Left" or "ArrowLeft" {string}, scrolls left
• "Right" or "ArrowRight" {string}, scrolls right

The format of the property is:

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

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

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

• 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 ColumnsFloatBarCaption property defines the caption of the columns float bar. The ColumnsFloatBarSortOrder property defines the sort order to show the columns within the columns float bar.

The format of the property is:

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

• "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)

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

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

• 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

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

• 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

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

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

• 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).

• 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

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

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)

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)

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

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, ... )

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

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)

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

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

• {null}, removes any existing hoisted item and returns the control to its default state
• {number}, indicates a numeric value that defines the index of the hoisted item
• {string}, specifies a string expression that defines the identifier/key of the hoisted item
• {Item}, specifies the object reference to the hoisted item

• 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

• {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.

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

Properties

The format of the property is:

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

• "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.Tree object (while it starts with a lowercase letter, such as shitem which refers to exontrol.Shapes.Tree.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)

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.Tree.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.Tree.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)

• 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 value 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 string value 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 value 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.

• cbkR {callback}, specifies a function of callback(oSmooth) type that's invoked while Smooth progressively runs
• cbkI {callback}, specifies a function of callback(oSmooth) type that's invoked once the Smooth operation begins
• cbkT {callback}, specifies a function of callback(oSmooth) type that's invoked once the Smooth operation ends

• oW {exontrol.W}, indicates the current window as an object of exontrol.W
• oZ {exontrol.WS}, holds the current visible-windows as an object of exontrol.WS([exontrol.W => [x,y,width,height]]) type (before apply the callback)
• oNewZ {exontrol.WS}, holds the new visible-windows as an object of exontrol.WS([exontrol.W => [x,y,width,height]]) type (after callback has been applied)
• rgWFT {object}, holds a collection of changes within windows as an object of exontrol.M1([exontrol.W => {from: [x,y,width,height], to: [x,y,width,height]}]) type
• oWRend {exontrol.W}, indicates the window being rendered during the "Smooth" animation. For instance, if no UI window has been affected, invalidates the current window only, else renders the entire-canvas
• progress {number}, specifies the state of the "Smooth" animation as a value between 0 and 1 (used by oSmooth.oNewZ.cbkget to define the ratio of window's UI rectange from/to)

• mV2FT {map}, specifies a map of [view => {"items":{from,to,stkFT},"cvo-lock":{from,to,stkFT},...}] type that holds the from/to visible-objects for each part of each view
• cbkHI {callback}, defines the rectangle a hidden-object should go to (a collapsed item should go to center of its visible-parent)

Properties

Properties

Properties

Properties