Class: TV

TV(oTree)

new TV(oTree)

Defines the tree view of the control, that displays the columns/items. The oTV field defines the control's base tree-view. Use the AddTreeView() method to add a new view to the control. Use the RemoveTreeView() method removes a tree-view already created by AddTreeView() method.
Parameters:
Name Type Description
oTree Tree Specifies an object of Tree type that defines the owner control of the view to be created

Methods

EnsureVisibleClient(clientA, ensureOptsopt)

The EnsureVisibleClient() method ensures that the giving client fits the control's client area.
Parameters:
Name Type Attributes Description
clientA object The client parameter could be any of the following:
  • 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
  • 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 {exontrol.Tree.Cell} type that indicates the cell to fit into the control's client area
ensureOpts object <optional>
Specifies different options to run the current method as explained:
  • 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

EnsureVisibleSelection(ensureOptsopt)

The EnsureVisibleSelection() method scrolls the control's content to ensure that the control's selection fits the control's client area.
Parameters:
Name Type Attributes Description
ensureOpts object <optional>
Specifies different options to run the current method as explained:
  • expandParents {number}, expands the parent-items as explained:
    • 0 {number}, no parent-item is expanded (ignored)
    • 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
  • duration {number}, specifies the time in ms the control is smoothly performs the changes

FitToClient(rtLayoutopt)

The FitToClient() method ensures that the entire (null/undefined) or giving layout fits the control's client area
Parameters:
Name Type Attributes Description
rtLayout Array.<number> <optional>
Indicates null for entire layout or an array of [x,y,width,height] type that defines the absolute-coordinate to fit to client

GetAllowActions() → {string}

The GetAllowActions() method gets the actions the user can perform once the control is clicked or touched
Returns:
Returns the actions the user can perform once the control is clicked or touched. The format of allowActions field is:
"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."
where
  • "action", indicates the name of the action. The "action" can have any of the following values:
    • "scroll", scrolls the control's content by drag. The "scroll" action allows flags such as:
      • [view], specifies that the "scroll" is possible once the user clicks the view
      • [header], specifies that the "scroll" is possible once the user clicks the header of the view
    • "zoom", zooms the control's content at dragging-point.
    • "fit", fits the drag-area into the control's client area.
    • "select", selects items by drag
    • "edit", edits the cell being clicked (not available if the control is read-only)
    • "item-drag", moves items by drag (not available if the control is read-only). The "item-drag" action allows flags such as:
      • [position], The item can be dragged from a position to another, but not outside of its group. If your items are arranged as a flat list, no hierarchy, this option can be used to allow the user change the item's position at runtime by drag and drop. This option does not change the parent of any dragged item.
      • [keepIndent], The item can be dragged to any position or to any parent, while the dragging object keeps its indentation. This option can be used to allow the user change the item's position at runtime by drag and drop. In the same time, the parent's item could be changed but keeping the item's indentation.
      • [any], The item can be dragged to any position or to any parent, with no restriction (by default, if no flag is present).
    • "item-resize", resize items by drag (available only if the control's readOnly property is false, and item's allowSizing field is true). The "item-resize" action allows flags such as:
      • [all], specifies that once an item gets resized all resizable-items get resized (changes the control's defaultItemHeight property). If the [all] flag is missing, only the item (or all selected items) get resized
    • "column-resize", resizes columns by drag. If "column-resize" action has no flags it indicates that resizing is possible in view and header as well (available only if the control's readOnly property is false, and the column's allowSizing field is true). The "column-resize" action allows flags such as:
      • [view], specifies that the "column-resize" operation is possible in the view
      • [header], specifies that the "column-resize" operation is possible in the header of the view
    • "column-drag", drags the column to a new position (not available if the control is read-only)
  • "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
Type
string

GetAllowDrop() → {boolean}

The GetAllowDrop() method indicates whether the user can drag and drop local files into the control.
Returns:
Returns true, if the user can drag and drop local files into the control.
Type
boolean

GetAllowGroupBy() → {boolean}

The GetAllowGroupBy() method determines whether the control supports group-by view
Returns:
Returns true if the control supports group-by view
Type
boolean

GetCanvasRect() → {Array.<number>}

The GetCanvasRect() method returns the canvas's client rectangle.
Returns:
Returns an array of [x,y,width,height] type that specifies the canvas's client rectangle
Type
Array.<number>

GetClientRect() → {Array.<number>}

The GetClientRect() method returns the control's client area.
Returns:
Returns an array of [x,y,width,height] type that specifies the control's client area
Type
Array.<number>

GetColumnAutoResize() → {boolean}

The GetColumnAutoResize() method indicates whether the control will automatically size its visible columns to fit on the control's client width
Returns:
Returns a boolean value that specifies whether the control will automatically size its visible columns to fit on the control's client width
Type
boolean

GetColumnsFloatBarCaption() → {string}

The GetColumnsFloatBarCaption() method specifies the caption of the columns float bar
Returns:
Indicates the caption of the columns float bar
Type
string

GetColumnsFloatBarSortOrder() → {number}

The GetColumnsFloatBarSortOrder() method specifies the sort order to show the columns within the columns float bar
Returns:
Indicates the sort order to show the columns within the columns float bar as explained:
  • 0 {number}, show columns unsorted
  • 1 {number}, show columns in ascending order (by name)
  • 2 {number}, shows columns in descending order (by name)
Type
number

GetColumnsFloatBarVisible() → {Tree.ColumnsFloatBarVisibleEnum}

The GetColumnsFloatBarVisible() method indicates whether the control's floatbar is visible or hidden. The floatbar displays hidden or groupable columns
Returns:
Specifies whether the control's floatbar is visible or hidden The Tree.ColumnsFloatBarVisibleEnum type supports the following values:
  • exColumnsFloatBarHidden(0), the columns floatbar is hidden
  • exColumnsFloatBarVisibleIncludeGroupByColumns(1), the columns floatbar is visible, and it displays dragable (AllowDragging property) and groupable (AllowGroupBy property) columns of the control.
  • exColumnsFloatBarVisibleIncludeCheckColumns(2), the columns floatbar is visible, and it displays dragable (AllowDragging 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 (AllowDragging 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.
Type
Tree.ColumnsFloatBarVisibleEnum

GetCountLockedColumns() → {number}

The GetCountLockedColumns() method specifies the number of locked columns (a locked column is not scrollable, and it is fixed to the left side of the control)
Returns:
Returns the number of locked-columns
Type
number

GetCrSize() → {number}

The GetCrSize() method specifies the size to show the check-box/radio-button.
Returns:
Returns the size to show the check-box/radio-button.
Type
number

GetCursors() → {string}

The GetCursors() method defines the mouse cursor to display when pointing over different parts of the control.
Returns:
A string expression that defines the mouse cursor to display when pointing over different parts of the control. The format of cursors 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 cursors property supports any of the following parts:
  • "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 field
  • "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
  • "column", defines the mouse-cursor to show when the mouse pointer hovers the column's header
  • "column-filter", defines the mouse-cursor to show when the mouse pointer hovers the column's filter-button
  • "column-drag", defines the mouse-cursor while the column is dragging
  • "item", defines the mouse-cursor when the mouse pointer hovers any item
  • "item-drag", defines the mouse-cursor while the item is dragging
  • "cell", defines the mouse-cursor when the mouse pointer hovers any cell
  • "expand", defines the mouse-cursor to be shown when the mouse pointer hovers the expand/collapse glyphs
  • "check", defines the mouse-cursor to be shown when the mouse pointer hovers the check-box/radio-button
  • "no", defines the mouse-cursor to be shown when no operation is allowed (for instance, dropping the item is not allowed in this area)
  • "long", specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field)
Type
string

GetDefaultItemHeight() → {number}

The GetDefaultItemHeight() method defines the item's default-height
Returns:
Returns the item's default-height
Type
number

GetDrawGridLines() → {Tree.GridLinesEnum}

The GetDrawGridLines() method indicates whether the control's grid-lines are visible or hidden
Returns:
Specifies whether the control's grid-lines are visible or hidden The Tree.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
Type
Tree.GridLinesEnum

GetEnsureOnSort() → {boolean}

The GetEnsureOnSort() method ensures that the selection fits the view's client-area once the user sorts or groups a column
Returns:
Returns true whether the selection fits the view's client-area once the user sorts or groups a column
Type
boolean

GetExpandGlyphSize() → {number}

The GetExpandGlyphSize() method specifies the size to show the item's expand/collapse glyphs.
Returns:
Returns the size to show the item's expand/collapse glyphs.
Type
number

GetExpandOnDblClick() → {boolean}

The GetExpandOnDblClick() method defines whether the item is expanded or collapsed once the user double-clicks the item
Returns:
Returns whether the item is expanded or collapsed once the user double-clicks the item
Type
boolean

GetFilterBarCaption() → {string}

The GetFilterBarCaption() method customizes the caption to display within the control's filter-bar
Returns:
Returns the caption of 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 ItemCount 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 VisibleItemCount 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 MatchItemCount 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 (ItemCount 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 macthing 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 FilterBarPromptVisible 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
Type
string

GetFilterBarHeight() → {number}

The GetFilterBarHeight() method specifies the height to display the control's filter-bar
Returns:
Returns the height to display the control's filter-bar.
Type
number

GetFilterBarPrompt() → {string}

The GetFilterBarPrompt() method gets the caption to show while the pattern of the filter-prompt is empty
Returns:
Returns the caption to show while the pattern of the filter-prompt is empty
Type
string

GetFilterBarPromptColumns() → {any}

The GetFilterBarPromptColumns() method indicates the list of columns the pattern of filter-prompt is applying to
Returns:
Returns the list of columns the pattern of filter-prompt is applying to, as explained:
  • 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
Type
any

GetFilterBarPromptPattern() → {string}

The GetFilterBarPromptPattern() method specifies the pattern of the control's filter-prompt.
Returns:
Returns the pattern of the control's 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)
Type
string

GetFilterBarPromptType() → {Tree.FilterPromptEnum}

The GetFilterBarPromptType() method specifies the type of the control's filter-prompt.
Returns:
Returns the type of the control's filter-prompt. The Tree.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.
Type
Tree.FilterPromptEnum

GetFilterBarVisible() → {Tree.FilterBarVisibleEnum}

The GetFilterBarVisible() method indicates whether the control's filter-bar is visible or hidden
Returns:
Returns a exontrol.Tree.FilterBarVisibleEnum value that defines options for the control's filter-bar The Tree.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).
Type
Tree.FilterBarVisibleEnum

GetFilterInclude() → {Tree.FilterIncludeEnum}

The GetFilterInclude() method specifies the items to include once the control's filter is applied
Returns:
Returns a Tree.FilterIncludeEnum value that defines the items to include once the control's filter is applied The Tree.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
Type
Tree.FilterIncludeEnum

GetFormatText() → {exontrol.DrawTextFormatEnum}

The GetFormatText() method specifies the format to display the item's caption.
Returns:
Returns a value of exontrol.DrawTextFormatEnum type, that defines the format to display the item'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.
Type
exontrol.DrawTextFormatEnum

GetGridLines() → {object}

The GetGridLines() method defines the color, width and style of the control's grid-lines
Returns:
Returns the color, width and style of the control's grid-lines as an object of {width, color, style} type, as explained:
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)
Type
object

GetGroupByFormatCell() → {string}

The GetGroupByFormatCell() method the format of the cell to be displayed when the column gets grouped by
Returns:
Returns the format of the cell to be displayed when the column gets grouped by 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, ... 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, ... 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, ... 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, ... 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 )
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
    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 SortableItem 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 SelectableItem property specifies whether the user can selects/focus the specified item. divider items. The ItemDivider 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
Type
string

GetHasButtons() → {boolean}

The GetHasButtons() method indicates whether the control shows or hides the expand/collapse glyphs (+/- buttons to expand-collapse the item)
Since:
  • 1.4
Returns:
Returns true if the expand/collapse glyphs are visible
Type
boolean

GetHasLines() → {object}

The GetHasLines() method defines the color, width and style of the control's hierarchy-lines
Since:
  • 1.4
Returns:
Returns the color, width and style of the control's hierarchy-lines as an object of {width, color, style, cap, join} type, as explained:
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)
Type
object

GetHeaderHeight() → {number}

The GetHeaderHeight() method specifies the height to display the control's header
Returns:
Returns the height to display the control's header.
Type
number

GetHeaderVisible() → {Tree.HeaderVisibleEnum}

The GetHeaderVisible() method indicates whether the control's header is visible or hidden. The header displays the header of each visible-columns.
Returns:
Specifies whether the control's header is visible or hidden The Tree.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
Type
Tree.HeaderVisibleEnum

GetImageAlign() → {number}

The GetImageAlign() method specifies the alignment of the item's image.
Returns:
Returns the alignment of the item's image as explained:
  • 0, the image is on the left of the item's caption
  • 1, the image is on the right of the item's caption
  • 2, the image is on the top of the item's caption
  • 3, the image is on the bottom of the item's caption
Type
number

GetImageSize() → {any}

The GetImageSize() method defines the size of the item's image.
Returns:
Returns the size, range of limits the item's image is displayed as expalined:
  • {null}, Indicates that the item's image is displayed as it is (full-sized).
  • {number}, Specifies that the item's image is displayed into a square of giving size (same width and height). If 0 the item displays no image, if negative the item'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.
Type
any

GetItemAllowSizing() → {boolean}

The GetItemAllowSizing() method defines whether all or none of the item are resizable or fixed
Returns:
Returns whether all or none of the item are resizable or fixed
Type
boolean

GetLinesAtRoot() → {Tree.LinesAtRootEnum}

The GetLinesAtRoot() method indicates whether the control links the root items
Since:
  • 1.4
Returns:
Returns a value of Tree.LinesAtRootEnum type that indicates whether the root items are connected with a line.
Type
Tree.LinesAtRootEnum

GetLocked() → {string}

The GetLocked() method specifies whether the control is locked(protected) or unlocked
Returns:
Returns true, if the control is locked(protected) or unlocked
Type
string

GetLockedItem(alignment, index) → {object}

The GetLockedItem() method gets a locked item giving its index or identifier/key
Parameters:
Name Type Description
alignment boolean Specifies whether the method refers to top(false) or bottom(true) locked items
index any The item parameter could be any of the following:
  • 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
Returns:
Returns null or an object of Item type
Type
object

GetLockedItemsCount(alignment) → {number}

The GetLockedItemsCount() method gets the number of items fixed on the top or bottom side of the control
Parameters:
Name Type Description
alignment boolean Specifies whether the method refers to top(false) or bottom(true) locked items
Returns:
Returns true if the locked/fixed items are visible
Type
number

GetMargins() → {object}

The GetMargins() method indicates the margins the control uses.
Returns:
Returns an object of {indent} type that specifies the horizontal and vertical distance between items.
Type
object

GetOnErrorChooseFile() → {boolean}

The GetOnErrorChooseFile() method specifies whether the control displays an input-file to let user choose a local filte to import, as soon as an error occurs
Returns:
Returns true, if the control displays an input-file to let user choose a local filte to import, as soon as an error occurs
Type
boolean

GetOptions() → {object}

The GetOptions() method returns the current options of the control.
Returns:
An object of Tree.Options type that indicates the options to display the control.
Type
object

GetPad() → {number|Array.<number>|string}

The GetPad() method specifies the space between item's content and its borders.
Returns:
Returns a value that could be:
  • {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
Type
number | Array.<number> | string

GetReadOnly() → {string}

The GetReadOnly() method specifies whether the control is read-only
Returns:
Returns true, if the control is read-only
Type
string

GetScrollPos() → {object}

The GetScrollPos() method retrieves the horizontal and vertical scroll-position of the control's default view.
Returns:
Returns 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
Type
object

GetShapes() → {string}

The GetShapes() method defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance.
Returns:
A string expression that defines the shapes each part of the control can display. The format of shapes 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.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)
The shapes property supports any of the following parts:
  • "lock", defines the visual-appearance for locked-part of the tree-view (left-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-side panel of the header, determined by the countLockedColumns field, displays un-scrollable 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)
  • "filterBar-close", defines the visual-appearance of the filter-bar's close button
  • "filterBar", defines the visual-appearance of the control's filter-bar
  • "sortBar-caption", defines the visual-appearance of control's sortbar when it displays no columns
  • "column", defines the visual-appearance of column's header
  • "column-filter", defines the visual-appearance of column's filter-button
  • "radio", defines the visual-appearance of the radio-button
  • "check", defines the visual-appearance of the check-box
  • "expand", defines the visual-appearance of expand/collapse glyphs
  • "cell", defines the visual-appearance for all cells within the control
  • "item", defines the visual-appearance for all items within the control
  • "itemDiv", defines the visual-appearance for divider-items (a divider-item displays only a single-cell)
  • "itemAlt", defines the visual-appearance for alternate-items (every second item)
  • "select", defines the visual-appearance of selected-item
  • "frameFit", defines the visual-appearance to display the frame while fitting objects into the control's client area by drag
  • "frameSel", defines the visual appearance to display a frame while selecting objects by drag
  • "countDrag", specifies the visual appearance to show the count of items being dragged
Type
string

GetShowLockedItems() → {boolean}

The GetShowLockedItems() method indicates whether the locked/fixed items are visible or hiddenn
Returns:
Returns true if the locked/fixed items are visible
Type
boolean

GetSingleSort() → {boolean}

The GetSingleSort() method indicates whether the control supports single or multiple-columns sort
Returns:
Specifies whether the control supports single or multiple-columns sort
Type
boolean

GetSmooth() → {number}

The GetSmooth() method defines the time in ms the control goes from one layout to another.
Returns:
Returns the time in ms the control goes from one layout to another.
Type
number

GetSortBarCaption() → {string}

The GetSortBarCaption() method specifies the caption to be shown on the control's sortbar when it is empty.
Returns:
Returns the caption to be shown on the control's sortbar when it is empty.
Type
string

GetSortBarVisible() → {boolean}

The GetSortBarVisible() method indicates whether the control's sortbar is visible or hidden. The sortbar displays the header of each sorted/grouped-columns.
Returns:
Specifies whether the control's sortbar is visible or hidden
Type
boolean

GetSortOnClick() → {Tree.SortOnClickEnum}

The GetSortOnClick() method indicates whether the column gets sorted once the user clicks its header.
Returns:
Specifies a flag of exontrol.Tree.SortOnClickEnum type that defines the action the control takes once the user clicks the column's header. The Tree.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)
Type
Tree.SortOnClickEnum

GetTfi() → {string|object}

The GetTfi() method gets the font attributes to apply on captions of the control.
Returns:
Returns the font attributes as a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The result as a {string} can include any of the following keywords 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 result 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 result as {object} can include 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 mode as a value between 0 and 4
    • 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.
Type
string | object

GetToolTipDelay() → {number}

The GetToolTipDelay() method specifies how long the mouse pointer must point to an object before the tool tip appears
Returns:
Returns how long the mouse pointer must point to an object before the tool tip appears
Type
number

GetToolTipPopDelay() → {number}

The GetToolTipPopDelay() method specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
Returns:
Returns the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
Type
number

GetToolTipWidth() → {number}

The GetToolTipWidth() method specifies the width of the tooltip window, in pixels
Returns:
Returns the width of the tooltip window, in pixels
Type
number

GetTreeColumnIndex() → {any}

The GetTreeColumnIndex() method defines the index or identifier/key/caption of the column that displays the hierarchy
Returns:
Returns the index or identifier/key/caption of the column that displays the hierarchy
Type
any

GetVisibleRect() → {Array.<number>}

The GetVisibleRect() method indicates the control's visible rectangle
Returns:
Returns an array of [x,y,width,height] type that specifies the canvas's client rectangle
Type
Array.<number>

GetWheelChange() → {number}

The GetWheelChange() method defines the amount the control scrolls when the user rolls the mouse wheel.
Returns:
Returns the amount the control scrolls when the user rolls the mouse wheel.
Type
number

GetWindowRect() → {Array.<number>}

The GetWindowRect() method returns the window's client area.
Returns:
Returns an array of [x,y,width,height] type that specifies the window's client area
Type
Array.<number>

GetZoom() → {number}

The GetZoom() method defines the zoom factor of the control's content.
Returns:
A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.
Type
number

GetZoomLevels() → {string}

The GetZoomLevels() method defines the zoom-levels the user can magnify the control's content
Returns:
Specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-margins the control's content is allowed to zoom.
Type
string

Home()

The Home() method zooms to 100% and scrolls the control to origin (0,0)

isItemAlt()

The isItemAlt() method specifies whether the item is an alternate-item

onDblClk(event) → {any}

The onDblClk() method occurs once the user double-clicks the view
Parameters:
Name Type Description
event MouseEvent/TouchEvent A MouseEvent object that generated the event. Could be mouse-up or touch-end
Returns:
Returns an empty-value to continue the operation, else to cancel any further actions
Type
any

Scroll(key, countopt)

The Scroll() method scrolls the window based on the giving key
Parameters:
Name Type Attributes Description
key string Specifies a key to determines the direction to scroll the view as follows:
  • "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
count object <optional>
indicates the number of lines to scroll if key is "Up", "Down", "Left" or "Right"

SetAllowActions(value)

The SetAllowActions() method customizes the actions the user can perform once the control is clicked or touched
Parameters:
Name Type Description
value string Indicates the actions the user can perform once the control is clicked or touched. The format of allowActions field is:
"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."
where
  • "action", indicates the name of the action. The "action" can have any of the following values:
    • "scroll", scrolls the control's content by drag. The "scroll" action allows flags such as:
      • [view], specifies that the "scroll" is possible once the user clicks the view
      • [header], specifies that the "scroll" is possible once the user clicks the header of the view
    • "zoom", zooms the control's content at dragging-point.
    • "fit", fits the drag-area into the control's client area.
    • "select", selects items by drag
    • "edit", edits the cell being clicked (not available if the control is read-only)
    • "item-drag", moves items by drag (not available if the control is read-only). The "item-drag" action allows flags such as:
      • [position], The item can be dragged from a position to another, but not outside of its group. If your items are arranged as a flat list, no hierarchy, this option can be used to allow the user change the item's position at runtime by drag and drop. This option does not change the parent of any dragged item.
      • [keepIndent], The item can be dragged to any position or to any parent, while the dragging object keeps its indentation. This option can be used to allow the user change the item's position at runtime by drag and drop. In the same time, the parent's item could be changed but keeping the item's indentation.
      • [any], The item can be dragged to any position or to any parent, with no restriction (by default, if no flag is present).
    • "item-resize", resize items by drag (available only if the control's readOnly property is false, and item's allowSizing field is true). The "item-resize" action allows flags such as:
      • [all], specifies that once an item gets resized all resizable-items get resized (changes the control's defaultItemHeight property). If the [all] flag is missing, only the item (or all selected items) get resized
    • "column-resize", resizes columns by drag. If "column-resize" action has no flags it indicates that resizing is possible in view and header as well (available only if the control's readOnly property is false, and the column's allowSizing field is true). The "column-resize" action allows flags such as:
      • [view], specifies that the "column-resize" operation is possible in the view
      • [header], specifies that the "column-resize" operation is possible in the header of the view
    • "column-drag", drags the column to a new position (not available if the control is read-only)
  • "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
Example
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).

SetAllowDrop(value)

The SetAllowDrop() method specifies whether the user can drag and drop local files into the control.
Parameters:
Name Type Description
value boolean Indicates whether the user can drag and drop local files into the control.
Example
false {boolean}, no file can be drop into the control
  true {boolean}, the user can drag and drop files into the control

SetAllowGroupBy(value)

The SetAllowGroupBy() method specifies whether the control supports group-by view
Parameters:
Name Type Description
value boolean Indicates a value that enable or disable group-by view
Example
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

SetColumnAutoResize(value)

The SetColumnAutoResize() method defines whether the control will automatically size its visible columns to fit on the control's client width
Parameters:
Name Type Description
value boolean A boolean value that indicates whether the control will automatically size its visible columns to fit on the control's client width
Example
false {boolean}, no effect
 true {number}, all visible columns are proportionally resized to fit the control's width

SetColumnsFloatBarCaption(value)

The SetColumnsFloatBarCaption() method changes the caption of the columns float bar
Parameters:
Name Type Description
value string A value that indicates the caption of the columns float bar
Example
"" {string}, hides the caption of the columns float bar
 "&lt;b&gt;Columns" {string}, displays in bold the caption of the columns float bar

SetColumnsFloatBarSortOrder(value)

The SetColumnsFloatBarSortOrder() method changes the sort order to show the columns within the columns float bar
Parameters:
Name Type Description
value number A value that indicates the sort order as explained:
  • 0 {number}, show columns unsorted
  • 1 {number}, show columns in ascending order (by name)
  • 2 {number}, shows columns in descending order (by name)
Example
0 {number}, show columns unsorted
 1 {number}, show columns in ascending order (by name)

SetColumnsFloatBarVisible(value)

The SetColumnsFloatBarVisible() method shows or hides the control's floatbar. The floatbar displays the header of each sorted/grouped-columns.
Parameters:
Name Type Description
value Tree.ColumnsFloatBarVisibleEnum A value that indicates whether the control's floatbar is visible or hidden. The Tree.ColumnsFloatBarVisibleEnum type supports the following values:
  • exColumnsFloatBarHidden(0), the columns floatbar is hidden
  • exColumnsFloatBarVisibleIncludeGroupByColumns(1), the columns floatbar is visible, and it displays dragable (AllowDragging property) and groupable (AllowGroupBy property) columns of the control.
  • exColumnsFloatBarVisibleIncludeCheckColumns(2), the columns floatbar is visible, and it displays dragable (AllowDragging 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 (AllowDragging 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.
Example
false {boolean} or 0 {number}, hides the columns float bar
 true {boolean}, 1 or Tree.ColumnsFloatBarVisibleEnum.exColumnsFloatBarVisibleIncludeGroupByColumns {number}, the columns float bar is visible and displays groupable columns

SetCountLockedColumns(value)

The SetCountLockedColumns() method changes the number of locked columns (a locked column is not scrollable, and it is fixed to the left side of the control)
Parameters:
Name Type Description
value number A value that specifies the number of locked columns (a locked column is not scrollable, and it is fixed to the left side of the control).
Example
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)

SetCrSize(value)

The SetCrSize() method changes the size to show the check-box/radio-button.
Parameters:
Name Type Description
value number A value that specifies the size to show the check-box/radio-button.
Example
0 {number}, displays no check-box/radio-button
 24 {number}, specifies a size of 24x24 to display the check-box/radio-button

SetCursors(value)

The SetCursors() method changes the mouse cursor to display when pointing over different parts of the control.
Parameters:
Name Type Description
value string A string expression that defines the mouse cursor to display when pointing over different parts of the control. The format of cursors 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 cursors property supports any of the following parts:
  • "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 field
  • "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
  • "column", defines the mouse-cursor to show when the mouse pointer hovers the column's header
  • "column-filter", defines the mouse-cursor to show when the mouse pointer hovers the column's filter-button
  • "column-drag", defines the mouse-cursor while the column is dragging
  • "item", defines the mouse-cursor when the mouse pointer hovers any item
  • "item-drag", defines the mouse-cursor while the item is dragging
  • "cell", defines the mouse-cursor when the mouse pointer hovers any cell
  • "expand", defines the mouse-cursor to be shown when the mouse pointer hovers the expand/collapse glyphs
  • "check", defines the mouse-cursor to be shown when the mouse pointer hovers the check-box/radio-button
  • "no", defines the mouse-cursor to be shown when no operation is allowed (for instance, dropping the item is not allowed in this area)
  • "long", specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field)

SetDefaultItemHeight(value)

The SetDefaultItemHeight() method changes the item's default-height
Parameters:
Name Type Description
value number Specifies the item's default-height
Example
null {null}, specifies that the item's height is 24 (by default)
 18 {number}, changes the item's default height to 18

SetDrawGridLines(value)

The SetDrawGridLines() method shows or hides the control's grid-lines.
Parameters:
Name Type Description
value Tree.GridLinesEnum Specifies whether the control's grid-lines are visible or hidden The Tree.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
Example
0 or Tree.GridLinesEnum.exNoLines {number}, hides the grid-lines (default)
 -1 or Tree.GridLinesEnum.exAllLines {number}, shows all vertical and horizontal grid lines

SetEnsureOnSort(value)

The SetEnsureOnSort() method ensures that the selection fits the view's client-area once the user sorts or groups a column
Parameters:
Name Type Description
value boolean Specifies whether the selection fits the view's client-area once the user sorts or groups a column
Example
false {boolean}, no effect
 true {boolean}, scrolls the view, so the selection (including the parent-items) fits the view's client area

SetExpandGlyphSize(value)

The SetExpandGlyphSize() method changes the size to show the item's expand/collapse glyphs.
Parameters:
Name Type Description
value number A value that specifies the size to show the item's expand/collapse glyphs.
Example
0 {number}, displays no item's expand/collapse glyphs
 24 {number}, specifies a size of 24x24 to display the item's expand/collapse glyphs

SetExpandOnDblClick(value)

The SetExpandOnDblClick() method changes whether the item is expanded or collapsed once the user double-clicks the item
Parameters:
Name Type Description
value boolean Specifies whether the item is expanded or collapsed once the user double-clicks the item
Example
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

SetFilterBarCaption(value)

The SetFilterBarCaption() method customizes the caption to display within the control's filter-bar
Parameters:
Name Type Description
value string Indicates the caption to be shown within 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 ItemCount 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 VisibleItemCount 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 MatchItemCount 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 (ItemCount 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 macthing 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 FilterBarPromptVisible 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
Example
"" {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.

SetFilterBarHeight(value)

The SetFilterBarHeight() method changes the height to display the control's filter-bar.
Parameters:
Name Type Description
value number A value that specifies the height to display the control's filter-bar.
Example
0 {number}, hides the control's filter-bar
 24 {number}, indicates that the height of the control's filter-bar is 24

SetFilterBarPrompt(value)

The SetFilterBarPrompt() method sets the caption to show while the pattern of the filter-prompt is empty
Parameters:
Name Type Description
value string Specifies the caption to show while the pattern of the filter-prompt is empty
Example
"" {string}, displays no caption (while the pattern of the filter-prompt is empty)
 "<i>filter...</i>" {string}, displays the message "filter..." in italics

SetFilterBarPromptColumns(range)

The SetFilterBarPromptColumns() method specifies the list of columns the pattern of filter-prompt is applying to
Parameters:
Name Type Description
range any 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

SetFilterBarPromptPattern(value)

The SetFilterBarPromptPattern() method changes the pattern of the control's filter-prompt.
Parameters:
Name Type Description
value string Indicates the pattern of the control's 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)
Example
"" {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)

SetFilterBarPromptType(value)

The SetFilterBarPromptType() method changes the type of the control's filter-prompt.
Parameters:
Name Type Description
value Tree.FilterPromptEnum Indicates the type of the control's filter-prompt. The Tree.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.
Example
2 or Tree.FilterPromptEnum.exFilterPromptContainsAny {number}, filters for items that contains any sequences in the filter 
 0x3202 or Tree.FilterPromptEnum.exFilterPromptContainsAny | Tree.FilterPromptEnum.exFilterPromptWords {number}, filters for items that contains any words in the filter 
 0x3203 or Tree.FilterPromptEnum.exFilterPromptStartWith | Tree.FilterPromptEnum.exFilterPromptWords {number}, filters for items that starts with any word within the filter

SetFilterBarVisible(value)

The SetFilterBarVisible() method shows or hides the control's filter-bar
Parameters:
Name Type Description
value Tree.FilterBarVisibleEnum Specifies a value of exontrol.Tree.FilterBarVisibleEnum type that to show, hide or customize the control's filter-bar The Tree.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).
Example
0 or Tree.FilterBarVisibleEnum.exFilterBarHidden {number}, (default) the control's filter-bar is visible only if there is a filter applied.
 1 or Tree.FilterBarVisibleEnum.exFilterBarPromptVisible {number}, the control's filter-bar is visible and shows the control's filter-prompt

SetFilterInclude(value)

The SetFilterInclude() method specifies the items to include once the control's filter is applied
Parameters:
Name Type Description
value Tree.FilterIncludeEnum Specifies a value of Tree.FilterIncludeEnum type that specifies the items to include once the control's filter is applied The Tree.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
Example
null {null}, specifies the control's default FilterInclude property (Tree.FilterIncludeEnum.exItemsWithoutChilds), so items (and parent-items) that match the filter are shown (no child-items are included)
 4 or Tree.FilterIncludeEnum.exMatchingItemsOnly {number}, shows only the items that matches the filter (no parent or child-items are included)
 0xF4 or Tree.FilterIncludeEnum.exMatchingItemsOnly | Tree.FilterIncludeEnum.exMatchIncludeParent {number}, shows the items (including the child-items) that match the filter

SetFormatText(value)

The SetFormatText() method changes the format to display the item's caption.
Parameters:
Name Type Description
value exontrol.DrawTextFormatEnum Specifies a value of exontrol.DrawTextFormatEnum value that defines the format to show the item'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.
Example
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

SetGridLines(value)

The SetGridLines() method customizes the color, width and style of the control's grid-lines
Parameters:
Name Type Description
value object Specifies the color, width and style of the control's grid-lines as an object of {width, color, style} type as explained:
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)

SetGroupByFormatCell(value)

The SetGroupByFormatCell() method specifies the format of the cell to be displayed when the column gets grouped by
Parameters:
Name Type Description
value string Specifies the format of the cell to be displayed when the column gets grouped by 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, ... 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, ... 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, ... 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, ... 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 )
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
    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 SortableItem 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 SelectableItem property specifies whether the user can selects/focus the specified item. divider items. The ItemDivider 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
Example
"" {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

SetHasButtons(value)

The SetHasButtons() method shows or hides the expand/collapse glyphs (+/- buttons to expand-collapse the item)
Parameters:
Name Type Description
value boolean Indicates whether the control shows or hides the expand/collapse glyphs
Since:
  • 1.4

SetHasLines(value)

The SetHasLines() method customizes the color, width and style of the control's hierarchy-lines
Parameters:
Name Type Description
value object Specifies the color, width and style of the control's hierarchy-lines as an object of {width, color, style, cap, join} type as explained:
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)
Since:
  • 1.4

SetHeaderHeight(value)

The SetHeaderHeight() method changes the height to display the control's header.
Parameters:
Name Type Description
value number A value that specifies the height to display the control's header.
Example
0 {number}, hides the control's header
 24 {number}, indicates that the height of the control's header is 24

SetHeaderVisible(value)

The SetHeaderVisible() method shows or hides the control's header. The header displays the header of each visible-columns.
Parameters:
Name Type Description
value Tree.HeaderVisibleEnum A value that indicates whether the control's header is visible or hidden. The Tree.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
Example
false {boolean} or 0 {number}, hides the control's header
 -1 {number} or Tree.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)

SetImageAlign(value)

The SetImageAlign() method changes the alignment of the item's image.
Parameters:
Name Type Description
value number Defines the alignment of the item's image as one of the following:
  • 0, the image is on the left of the item's caption
  • 1, the image is on the right of the item's caption
  • 2, the image is on the top of the item's caption
  • 3, the image is on the bottom of the item's caption
Example
null {null}, the image is aligned left to the caption (default)
 1 {number}, the image is displayed to the right of the item's caption

SetImageSize(value)

The SetImageSize() method changes the size of the item's image.
Parameters:
Name Type Description
value any Indicates the size of the item's image as explained:
  • {null}, Indicates that the item's image is displayed as it is (full-sized).
  • {number}, Specifies that the item's image is displayed into a square of giving size (same width and height). If 0 the item displays no image, if negative the item'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.
Example
null {null}, Indicates that the item'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

SetItemAllowSizing(value)

The SetItemAllowSizing() method changes whether all or none of the item are resizable or fixed
Parameters:
Name Type Description
value boolean Specifies whether all or none of the item are resizable or fixed
Example
false {boolean}, none of the items are resizable (unless the item's allowSizing field is true)
 true {boolean}, all of the items are resizable (unless the item's allowSizing field is false)

SetLinesAtRoot(value)

The SetLinesAtRoot() method links items at the root of the hierarchy
Parameters:
Name Type Description
value Tree.LinesAtRootEnum Specifies a value of Tree.LinesAtRootEnum type that indicates whether the root items are connected with a line
Since:
  • 1.4
Example
0 or exontrol.Tree.LinesAtRootEnum.exNoLinesAtRoot {number}, no lines at root items
 -1 or exontrol.Tree.LinesAtRootEnum.exLinesAtRoot {number}, the control links the root items

SetLocked(value)

The SetLocked() method locks or unlocks the control.
Parameters:
Name Type Description
value boolean A boolean value that indicates whether the control is locked(protected) or unlocked
Example
false {boolean}, unlocks the control (can select any item)
  true {boolean}, locks the control (can't select any item)

SetLockedItemsCount(alignment, value) → {object}

The SetLockedItemsCount() method specifies the number of items fixed on the top or bottom side of the control
Parameters:
Name Type Description
alignment boolean Specifies whether the method refers to top(false) or bottom(true) locked items
value number Specifies the number of items fixed on the top or bottom side of the control
Returns:
Returns the last locked-item as an object of Item type
Type
object

SetMargins(value)

The SetMargins() method specifies the control's margins
Parameters:
Name Type Description
value object Indicates an object of {indent} type that specifies control's margins

SetOnErrorChooseFile(value)

The SetOnErrorChooseFile() method specifies whether the control displays an input-file to let user choose a local filte to import, as soon as an error occurs
Parameters:
Name Type Description
value boolean Indicates whether the control displays an input-file to let user choose a local filte to import, as soon as an error occurs
Example
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

SetOptions(nOptions, bIncludeAllopt) → {boolean}

The SetOptions() method applies new options to the view.
Parameters:
Name Type Attributes Description
nOptions object Specifies an object of Tree.Options type that indicates the new options to apply
bIncludeAll boolean <optional>
Indicates whether all fields of nOptions are included in the item's oOptions object
Returns:
Returns true, if there were options applied to the item
Type
boolean
Example
oTree.Options = {imageAlign: 1, imageSize: 24}, changes the alignment and the size for all images within the control.
 oTree.Options = {headerVisible: true, headerHeight: 24}, shows the header and sets its size

The oTree.Options = value statement is equivalent with oTree.SetOptions(value) or oTree.oTV.SetOptions(value)

SetPad(value)

The SetPad() method changes the item's padding or the space between item's content and its borders.
Parameters:
Name Type Description
value number | Array.<number> | string Specifies a value that could be:
  • {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
Example
null {null}, indicates that the default-padding field is used ([4,4])
  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

SetReadOnly(value)

The SetReadOnly() method locks or unlocks the control.
Parameters:
Name Type Description
value boolean A boolean value that indicates whether the control is read-only
Example
false {boolean}, the user can edit or drag any item
  true {boolean}, the user can not edit or drag the items

SetScrollPos(value)

The SetScrollPos() method scrolls horizontally and/or vertically the control's default view.
Parameters:
Name Type Description
value object Specifies an object of {x,y} type that defines the control's horizontal and vertical scroll-position.
Properties
Name Type Description
x number indicates the horizontal scroll-position
y number indicates the vertical scroll-position

SetShapes(value)

The SetShapes() method changes the shapes each part of the control can display.
Parameters:
Name Type Description
value string A string expression that defines the shapes each part of the control can display. The format of shapes 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.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)
The shapes property supports any of the following parts:
  • "lock", defines the visual-appearance for locked-part of the tree-view (left-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-side panel of the header, determined by the countLockedColumns field, displays un-scrollable 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)
  • "filterBar-close", defines the visual-appearance of the filter-bar's close button
  • "filterBar", defines the visual-appearance of the control's filter-bar
  • "sortBar-caption", defines the visual-appearance of control's sortbar when it displays no columns
  • "column", defines the visual-appearance of column's header
  • "column-filter", defines the visual-appearance of column's filter-button
  • "radio", defines the visual-appearance of the radio-button
  • "check", defines the visual-appearance of the check-box
  • "expand", defines the visual-appearance of expand/collapse glyphs
  • "cell", defines the visual-appearance for all cells within the control
  • "item", defines the visual-appearance for all items within the control
  • "itemDiv", defines the visual-appearance for divider-items (a divider-item displays only a single-cell)
  • "itemAlt", defines the visual-appearance for alternate-items (every second item)
  • "select", defines the visual-appearance of selected-item
  • "frameFit", defines the visual-appearance to display the frame while fitting objects into the control's client area by drag
  • "frameSel", defines the visual appearance to display a frame while selecting objects by drag
  • "countDrag", specifies the visual appearance to show the count of items being dragged
Example
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.Tree.xxx combined with exontrol.Shapes.Tree.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Tree.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Tree.zzz object defines the visual appearance of "y" part of the control

SetShowLockedItems(value)

The SetShowLockedItems() method indicates whether the locked/fixed items are visible or hiddenn
Parameters:
Name Type Description
value boolean Specifies if the locked/fixed items are visible
Example
false {boolean}, the control's locked/fixed items are not shown
 true {boolean}, the control's locked/fixed items are visible

SetSingleSort(value)

The SetSingleSort() method specifies whether the control supports single or multiple-columns sort
Parameters:
Name Type Description
value boolean A value that indicates whether the control supports single or multiple-columns sort.
Example
false {boolean}, specifies that the control supports one ore more sorted-columns
 true {boolean}, the control supports single-column sorts only

SetSmooth(value)

The SetSmooth() method changes the time in ms the control goes from one layout to another (0 indicates no smooth-transition is performed).
Parameters:
Name Type Description
value number Indicates the time in ms the control goes from one layout to another.
Example
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.

SetSortBarCaption(value)

The SetSortBarCaption() method changes the caption to be shown on the control's sortbar when it is empty.
Parameters:
Name Type Description
value string A value that indicates the caption to be shown on the control's sortbar when it is empty.
Example
null {null}, the control's sortbar shows the default-caption
 "Drag a <b>column</b> header here to drag by that column." {string}, changes the caption to be displayed on the control's sortbar while it is empty.

SetSortBarVisible(value)

The SetSortBarVisible() method shows or hides the control's sortbar. The sortbar displays the header of each sorted/grouped-columns.
Parameters:
Name Type Description
value boolean A value that indicates whether the control's sortbar is visible or hidden.
Example
false {boolean}, hides the control's sortbar
 true {boolean}, shows the control's sortbar

SetSortOnClick(value)

The SetSortOnClick() method indicates whether the column gets sorted once the user clicks its header.
Parameters:
Name Type Description
value Tree.SortOnClickEnum Specifies a flag/value of exontrol.Tree.SortOnClickEnum type that defines the action the control takes once the user clicks the column's header. The Tree.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)
Example
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

SetTfi(value)

The SetTfi() method sets the font attributes to apply on captions of the control.
Parameters:
Name Type Description
value string | object Indicates a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

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 mode as a value between 0 and 4
    • 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.
Example
null {null}, the tfi field is ignored
  "bold monospace 16 &lt;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

SetToolTipDelay(value)

The SetToolTipDelay() method changes how long the mouse pointer must point to an object before the tool tip appears
Parameters:
Name Type Description
value number A value that specifies how long the mouse pointer must point to an object before the tool tip appears.
Example
0 {number}, the tooltip is shown "immediately"
  128 {number}, the tooltip is displayed in 128 ms.

SetToolTipPopDelay(value)

The SetToolTipPopDelay() method changes the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
Parameters:
Name Type Description
value number A value that specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control.
Example
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

SetToolTipWidth(value)

The SetToolTipWidth() method changes the width of the tooltip window, in pixels
Parameters:
Name Type Description
value number A value that specifies the width of the tooltip window, in pixels.
Example
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

SetTreeColumnIndex(value)

The SetTreeColumnIndex() method changes the index or identifier/key/caption of the column that displays the hierarchy
Parameters:
Name Type Description
value any Specifies the index or identifier/key/caption of the column that displays the hierarchy
Example
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.

SetWheelChange(value)

The SetWheelChange() method changes the amount the control scrolls when the user rolls the mouse wheel.
Parameters:
Name Type Description
value number A value that specifies the amount the control scrolls when the user rolls the mouse wheel.
Example
0 {number}, locks any action the mouse's wheel performs
  18 {number}, scrolls the control by 18-pixels when mouse's wheel is rotated (CTRL + wheel scrolls horizontally)

SetZoom(value)

The SetZoom() method defines the zoom factor of the control's content.
Parameters:
Name Type Description
value number A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.
Example
null {null}, Specifies normal-view (100%)
  150 {number}, Indicates that the control's content is magnfied to 150%

SetZoomLevels(value)

The SetZoomLevels() method defines the zoomLevels factor of the control's content.
Parameters:
Name Type Description
value string specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-margins the control's content is allowed to zoom
Example
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%

Smooth(callback, thisArg, oSmoothOptsopt, thisArg)

The Smooth() method performs a smooth-transition from a layout to another. The smooth-transition goes from the current layout to the new layout generated by the callback.
Parameters:
Name Type Attributes Description
callback callback Indicates a callback function that generates the new layout for the control ( such as removing or adding new items to the control). The callback is provided with no arguments.
thisArg any Specifies the value of this keyword for callback functions. If missing, the TV object reference is used instead
oSmoothOpts object <optional>
Indicates an object of {cbkR,cbkI,cbkT} type that defines callback to invoke when Smooth operation begins, progress and ends as explained below:
  • 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
The oSmooth's parameter of cbkI, cbkR or cbkT callbacks is undefined while no animated-smooth, else it includes the following:
  • oW {exontrol.W}, indicates the current window as an object of exontrol.W
  • oVisZOrd {exontrol.WS}, holds the current visible-windows as an object of exontrol.WS([exontrol.W => [x,y,width,height]]) type (before apply the callback)
  • oNewVisZOrd {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
  • oWRender {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.oNewVisZOrd.cbkget to define the ratio of window's UI rectange from/to)
Additionally, the oSmooth parameter includes the following:
  • 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)
thisArg any defines the value of "this" keyword during cbkI, cbkR or cbkT callbacks.

Soom(zoomTo, oPointAbsopt)

The Soom() method zooms or/and scrolls the control's content.
Parameters:
Name Type Attributes Description
zoomTo number Indicates a numeric value that defines the target-zoom factor as a value between 10 and 1000 (no zoom if null or undefined)
oPointAbs object <optional>
Specifies an object of {x,y} or array as [x,y] type that specifies the absolute-coordinates of the point to scroll into the client
Example
oTree.Soom(100, [0,0]), zooms to 100% and brings the origin (0,0) at its original position (Home)

Events

onchange

The onChange() method notifies the listeners that an object has changed
Parameters:
Name Type Description
oEvent object specifies an object of {object,action} type, that holds information about the control's object being changed.
Properties
Name Type Description
object object The object field specifies the object being changed (expanded, checked, ...). The type of the object is based on the action it occured
action string The action field specifies the name of the action, as one of the following:
  • "expand-item" {string}, notifies that an item has been expanded or collapsed (the object refers to an Item type)
  • "resize-item" {string}, notifies that the item's height has been changed (the object refers to an Item type)
  • "drag-item" {string}, notifies the user drags the item to a new position (the object refers to an Item type)
  • "check-cell" {string}, notifies that a cell has been checked or unchecked (the object refers to Cell type)
  • "change-cell" {string}, occurs once the cell's value has changed (while UI edit) (the object refers to Cell type)
  • "expand-column" {string}, notifies that a column has been expanded or collapsed (the object refers to an Column type)
  • "resize-column" {string}, notifies that a column has been resized (the object refers to an Column type)
  • "show-column" {string}, notifies that a column has shows or hidden (the object refers to an Column type)
  • "drag-column" {string}, notifies that a column has been moved to a new position (the object refers to an Column type)
  • "sort-column" {string}, notifies that a column has been sorted (the object refers to an Column type)
Example
The following samples display information about the change once it occurs:

oTree.Listeners.Add("onchange", function (oEvent)
{
 console.log(oEvent);
})

or

oTree.oTV.onchange = function (oEvent)
{
 console.log(oEvent);
}

where oTree is an object of Tree type. The oTV is member of Tree type, of TV type.

onclick

The onclick() method occurs once the user clicks or double-clicks an item.
Parameters:
Name Type Description
oEvent object specifies an object of {dblClick,button,modifiers,..} type, that holds information about the object being clicked
Properties
Name Type Description
cell Cell specifies undefined or an object of Cell type that indicates the cell being clicked
item Item specifies undefined or an object of Item type that indicates the item being clicked
column Column specifies undefined or an object of Column type that specifies the column being clicked
view object indicates an object of exontrol.Tree.TV, exontrol.Tree.TV.Header, ... type that specifies the view/window where the click occurred
dblClick boolean indicates whether the user clicks or double-clicks the item
button number indicates which button is pressed while clicking the item as 1 (left), 2 (right) or 4 (middle)
modifiers number specifies a combination of 1, 2, 4 and 16 according with modifier keys (ALT, CTRL, META and SHIFT), or 0 if no modifier keys
Example
The following samples display information about the cell, item or column being clicked:

oTree.Listeners.Add("onclick", function (oEvent)
{
 console.log(oEvent);
})

or

oTree.oTV.onclick = function (oEvent)
{
 console.log(oEvent);
}

where oTree is an object of Tree type. The oTV is member of Tree type, of TV type.

onscroll

The onscroll() method notifies your application once the view has been scrolled.
Parameters:
Name Type Description
oEvent object Specifies an object of {view,type,value} that holds information about the view's scroll that has been changed
Properties
Name Type Description
view TV specifies the view, where the scroll occurs
type exontrol.SB.ModeEnum specifies the view's scroll that has changed as 0(vertical), 1(horizontal)
value number specifies the scroll's value
Example
The following samples display the view's scroll position once it is changed:

oTree.Listeners.Add("onscroll", function (oEvent)
{
 console.log(oEvent);
})

or

oTree.oTV.onscroll = function (oEvent)
{
 console.log(oEvent);
}

where oTree is an object of Tree type. The oTV is member of Tree type, of TV type.