Tree class

The Tree.ColumnsFloatBarVisibleEnum type indicates the type of columns, the columns floatbar can display. The ColumnsFloatBarVisible property shows or hides the control's floatbar. The floatbar displays the header of each sorted/grouped-columns. The floatbar can be shown as docked to the right side of the control, or as floated over the control. The floatbar can display groupable columns, hidden columns, or a check-box for each column to show/hide the column. The ColumnsFloatBarSortOrder property specifies the sort order to show the columns within the columns float bar.

Each ColumnsFloatBarVisibleEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "GroupBy,BarFloat" is equivalent to the numeric value 257, or to the combination of enumeration constants exColumnsFloatBarVisibleIncludeGroupByColumns | exColumnsFloatBarFloat.

The Tree.FilterBarVisibleEnum type defines whether the control's filter-bar is visible or hidden. The FilterBarVisible property shows or hides the control's filter-bar. The filter-bar is displayed only if the control's FilterBarVisible property includes exFilterBarVisible or exFilterBarPromptVisible flags, or if any filter is applied and the FilterBarVisible property includes exFilterBarHidden flag. The onfilter event notifies your application once the control's filter has been changed.

Each FilterBarVisibleEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "Prompt,Compact,Top" is equivalent to the numeric value 6145, or to the combination of enumeration constants exFilterBarPromptVisible | exFilterBarCompact | exFilterBarTop.

The Tree.FilterIncludeEnum indicates the type of columns, the columns floatbar can display. The FilterInclude property specifies the items to include once the control's filter is applied. For instance, the exItemsWithChilds value specifies that the items that match the filter and their child-items are included once the control's filter is applied. The exMatchIncludeParent flag 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. For instance, exMatchIncludeParent | exMatchingItemsOnly displays only the items that match the filter including the child-items as well.

Each FilterIncludeEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "ItemsOnly,Parent" is equivalent to the numeric value 244, or to the combination of enumeration constants exMatchingItemsOnly | exMatchIncludeParent.

The Tree.FilterListEnum type specifies the type of items being included in the column's drop down list filter. The FilterList property specifies whether the column's drop down filter list includes visible or all items. The Filter property filters for items based on values within this column. The FilterType property specifies the type of filter being applied to the column.

Each FilterListEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "Visible,Check,Asc" is equivalent to the numeric value 369, or to the combination of enumeration constants exVisibleItems | exShowCheckBox | exSortItemsAsc.

The Tree.FilterPromptEnum type specifies the type of filter-prompt. The FilterBarPromptType property gets or sets the type of the control's filter-prompt, as a value of the Tree.FilterPromptEnum enumeration.

Each FilterPromptEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "ContainsAll,Case,Start" is equivalent to the numeric value 4353, or to the combination of enumeration constants exFilterPromptContainsAll | exFilterPromptCaseSensitive | exFilterPromptStartWords.

The Tree.FilterTypeEnum type defines the type of filter applies to a column. The FilterList property specifies whether the column's drop down filter list includes visible or all items. The Filter property filters for items based on values within this column. The FilterType property specifies the type of filter being applied to the column.

Each FilterTypeEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "Pattern,Case,Exclude" is equivalent to the numeric value 497, or to the combination of enumeration constants exPattern | exFilterDoCaseSensitive | exFilterExclude.

The Tree.GridLinesEnum type defines the control's grid lines. The DrawGridLines property shows or hides the control's grid-lines. The DrawGridLines property pecifies whether the control's grid-lines are visible or hidden.

Each GridLinesEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "H,V" is equivalent to the numeric value 3, or to the combination of enumeration constants exHLines | exVLines.

The Tree.HeaderVisibleEnum type specifies whether the control's header is visible or hidden. The HeaderVisible property shows or hides the control's header. The header displays the header of each visible-columns.

Each HeaderVisibleEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "Extend" is equivalent to the numeric value 1, or to the combination of enumeration constants exHeaderVisibleExtendLevels.

The Tree.LinesAtRootEnum type defines how the control displays the lines at root. The LinesAtRoot property defines the way the tree lines are shown. The HasLines property defines the type of the line to be shown. The HasButtons shows or hides the expand/collapse glyphs for parent items.

The Tree.LockItemEnum type specifies the section of the control where the item is placed. The Lock property locks or unlocks the item, placing it at the top, bottom, or making it scrollable

Each LockItemEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive partial string containing a name that matches the enumeration constant.

For instance, the string "Top" is equivalent to the numeric value -1, corresponding to the enumeration constant exLockTop.

The Tree.SingleSelEnum type defines flags the singleSel/SetSingleSel/GetSingleSel method uses. The SingleSel property gets or sets the control's selection to single, multiple or toggle. The SingleSel property accepts an OR combination of Tree.SingleSelEnum flags that specifies how user can select items.

Each SingleSelEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "Enable,Single,Toggle" is equivalent to the numeric value 7, or to the combination of enumeration constants exEnableSel | exSingleSel | exToggleSel.

The Tree.SortOnClickEnum type specifies the action that control takes when the user clicks the column's header. The SortOnClick property indicates whether the column gets sorted once the user clicks its header as a value of exontrol.Tree.SortOnClickEnum type.

Each SortOnClickEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive partial string containing a name that matches the enumeration constant.

For instance, the string "User" is equivalent to the numeric value 1, corresponding to the enumeration constant exUserSort.

The Tree.SortOrderEnum type specifies the column's sort order. The SetSortOrder() method changes the column's sort-order.

Each SortOrderEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive partial string containing a name that matches the enumeration constant.

For instance, the string "Asc" is equivalent to the numeric value 1, corresponding to the enumeration constant exSortAscending.

The Tree.SortTypeEnum type specifies the types of sort-as the column supports. The SortType property defines whether the column gets sorted as string, number or date, or by value, state or image.

Each SortTypeEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "Numeric,ByValue" is equivalent to the numeric value 17, or to the combination of enumeration constants exSortNumeric | exSortByValue.

The type field holds the full name of the object, since constructor.name can differ in minimized or obfuscated code. This field is never altered by the control itself, so it can be reliably used to verify the object's type. It is particularly useful when multiple versions of a control exist or when you need to check the type without depending on constructor.name, which may be inconsistent in some scenarios, such as minified code. The Tree.type member always returns "Tree"

console.log(exontrol.Tree.type); // logs "Tree"

The version field defines the version of the control. Each release of the control has a different version number, so you can use this field to check the control's version and ensure that it supports the features you want to use. The version field is especially useful when you have multiple versions of the control, or when you want to check the version of the control without relying on other properties or methods that may differ between versions. The current version is 5.2

console.log(exontrol.Tree.version); // logs "5.2"

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

For instance:

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

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

The format of the property is:

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

where

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

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

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

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

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

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

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

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

The AllowDrop property specifies whether the user can drag and drop local files into the control. By default, the AllowDrop property is set to false, so no file can be drop into the control. The control imports the file being dropped, using the Import method, based on the file extension.

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

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

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

The Background property defines the display options to show different parts of the control. The Background property accepts a value of BackgroundOptions type that indicates the display options to show different parts of the control. The Shapes property gets or sets the visual-appearance for different parts of the control, such as header of the columns, rows or cells, and so on.

The ColumnAutoResize property defines whether the control will automatically size its visible columns to fit on the control's client width. The ColumnAutoResize property indicates whether the control will automatically size its visible columns to fit on the control's client width. The Width property of each visible column is adjusted proportionally so that all visible columns fit exactly within the control's client area. The AllowSizing property specifies whether the column is resizable or fixed. The ColumnAutoResize property proportionally resizes visible columns with AllowSizing set to true so that they fit the control's width. By default, ColumnAutoResize is false, and visible columns are not automatically resized to fit the control.

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

The Columns property returns the control's columns. The Columns property is equivalent with GetColumns() method. The Add or Remove methods of the Columns object could be used to add or remove columns from the control. The Items property returns the control's items. The Add or Remove methods of the Items object could be used to add or remove items from the control. The Import or Data method loads data into the control, and the Export method extracts data from the control, all in a specific format. The ConditionalFormats property returns the control's conditional formats. The Add or Remove methods of the ConditionalFormats object could be used to add or remove conditional formats from the control.

The following statements are equivalents:

 oTree.GetColumns(), returns the control's columns
 oTree.Columns, returns the control's columns
 
where oTree is an object of Tree type

The ColumnsFloatBarCaption property defines the caption of the columns float bar. The floatbar displays the header of each sorted/grouped-columns. The caption can include ex-HTML tags for formatting purposes. The ColumnsFloatBarVisible property shows or hides the control's floatbar. The ColumnsFloatBarSortOrder property defines the sort order to show the columns within the columns float bar. The ColumnsFloatBarCaption property is set to "Columns" by default.

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

The ColumnsFloatBarSortOrder property defines the sort order to show the columns within the columns float bar. The sort order can be ascending, descending or unsorted. The default sort order is unsorted. The sort order applies only to the columns float bar; it does not affect the order of the columns within the control. The ColumnsFloatBarVisible property must be set to a visible state to see the effect of this property. The ColumnsFloatBarSortOrder property can be set to one of the following values:

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

The ColumnsFloatBarCaption property defines the caption of the columns float bar. By default, the ColumnsFloatBarSortOrder property is set to 0, which shows the columns unsorted.

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

The ColumnsFloatBarVisible property shows or hides the control's floatbar. The floatbar displays the header of each sorted/grouped-columns. The floatbar can be shown as docked to the right side of the control, or as floated over the control. The floatbar can display groupable columns, hidden columns, or a check-box for each column to show/hide the column. The ColumnsFloatBarSortOrder property specifies the sort order to show the columns within the columns float bar. By default, the ColumnsFloatBarVisible property is set to exColumnsFloatBarHidden (0), which hides the columns float bar. The 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 (AllowDrag property) and groupable (AllowGroupBy property) columns of the control.
• exColumnsFloatBarVisibleIncludeCheckColumns(2), the columns floatbar is visible, and it displays dragable (AllowDrag property), and a check-box for each Column to update its Visible property (shor or hide the column).
• exColumnsFloatBarVisibleIncludeHiddenColumns(4), the columns floatbar is visible, and it displays dragable (AllowDrag property) and hidden (Visible property) columns of the control.
• exColumnsFloatBarFloat(0x100), the columns floatbar is shows as floated. This flag can be combined with exColumnsFloatBarVisibleIncludeHiddenColumns, exColumnsFloatBarVisibleIncludeCheckColumns or exColumnsFloatBarVisibleIncludeGroupByColumns type.

The ColumnsFloatBarCaption property defines the caption of the columns float bar. The ColumnsFloatBarSortOrder property defines the sort order to show the columns within the columns float bar.

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

The Conditional property simultaneously defines all of the control's conditional formats. The conditional formatting feature enables you to apply formats to a cell or range of cells that dynamically change based on the cell's value or the result of a formula. The ConditionalFormats.Add method adds new conditional formats individually. The Conditional.Shape property defines the visual-appearance of the cell when the condition is met, and it accepts the same values of the Shapes property, such as backgroundColor, fontColor, fontStyle and so on.

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

The ConditionalFormats property returns the control's conditional formats. The conditional format allows changing the appearance of cells or items based on specific conditions. The ConditionalFormats property is equivalent with GetConditionalFormats() method. The Add or Remove methods of the ConditionalFormats object could be used to add or remove conditional formats from the control. The Conditional.Shape property defines the visual-appearance of the cell when the condition is met, and it accepts the same values of the Shapes property, such as backgroundColor, fontColor, fontStyle and so on.

The following statements are equivalents:

 oTree.GetConditionalFormats(), returns the control's conditional formats
 oTree.ConditionalFormats, returns the control's conditional formats

where oTree is an object of Tree type

The CountLockedColumns property locks columns on both the left and right sides of the view using a single byte in {high, low} format. The low nibble (0-15) specifies the number of left-locked columns, while the high nibble (0-15) specifies the number of right-locked columns (locked columns are fixed in place and do not scroll with the rest of the content). The Shapes/GetShapes()/SetShapes(value) {string}, defines the shapes each part of the control can display, including the locked columns. By default, the control displays no locked-columns. The Item.Lock property locks or unlocks the item, placing it at the top, bottom, or making it scrollable. The ShowLockedItems property indicates whether the locked/fixed items are visible or hidden.

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

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

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

The Cursors property specifies the mouse cursors assigned to the different parts of the control. These cursors determine how the pointer appears when hovering over specific areas, providing visual feedback and indicating interactive regions within the control. The change takes effect immediately. The cursors field customizes the mouse cursor appearance of the control. The Cell.Cursor property gets or sets the mouse cursor for the cell itself. The Column.CellCursor property gets or sets the mouse cursor for the column's body/data/cells. The Column.Cursor property gets or sets the mouse cursor for the column itself (column's header). The format of property is:

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

where:

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

The "cursor" can be any of the following:

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

The "part" can be any of the following:

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

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

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

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

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

By default, the Cursors property is set to:

"not-allowed(no),grab(long),pointer(expand,check,radio,filterBar-close,filterBar-caption-column,column-filter,column-drag,item-drag,drag-drop,anchor),text(filterBar-prompt)"

"pointer(item),not-allowed(no),grab(long)" {string}, sets the mouse cursors for different parts of the tree control

The Data property gets or sets the control's data. The GetData() method is equivalent with Data getter, while the SetData(value) method is equivalent with Data setter. The Data property imports data from CSV, XML files, string, array or objects of {columns, items} type. The SetData(value) method is equivalent with Import(value) method. The onload event occurs once the data is loaded. The onload event is fired even if the data is changed by user interaction (drop a file) or programmatically. The onerror event occurs if the data is not loaded successfully. The onerror event is fired even if the data is changed by user interaction (drop a file) or programmatically. The ImportOptions type defines default options to import data.

The Data property supports any of the following values:

• A String expression that specifies the URL to a CSV or XML file (contains no eof, eor or str). For example, "datasource.xml" imports the content of the 'datasource.xml' file
• A String expression in CSV or XML format. For example, "Item 1.1,SubItem 1.2\r\nItem 1.2,SubItem 2.2" creates two columns and two rows
• An array of [value] or [[value]] type that defines the data to load. For instance, [["Item 1.1","Item 1.2"],["Item 2.1","Item 2.2"]] creates two columns and two rows
• (@since 3.2) An object of {columns, items} type, where:
  • 'columns' can be an array of [(string | ColumnOptions)] to specify the columns to add or of type Columns to copy the control's header from one control to another (@since 4.3). For instance {columns: "Name,Start,End"}, adds three columns, or {columns: ["Name", {caption: "Filter", displayFilterButton: true}]} adds two columns
  • 'items' is be an array of [(string | ItemOptions)] to specify the items to add or of type Items to copy the control's items from one control to another (@since 4.3).

    The ItemOptions type supports a recursive 'items' property to specify child items. For instance, {columns: "Def", items: {value: "Root", expanded: false, items:["Child 1", "Child 2", "Child 3"]}} defines a single-column control with a collapsed root item labeled 'Root' and three child items named 'Child 1', 'Child 2', and 'Child 3', or {columns: [{caption: "C1", displayFilterButton: true}, "C2"], items: [{value: ["R1.1", "R1.2"], items: [["C1.1", "C1.2"], ["C2.1", "C2.2"], ["C3.1", "C3.2"]]}, ["R2.1", "R2.2"]]} defines a dataset with two columns labeled as C1 (with a filter button for user value filtering) and C2. It includes two root items and three child items under the first root, each specifying values for their respective cells in the table

• An object that includes the "files" member of FileList type (representing a local file dropped into the control)

The onaddcolumn event occurs for each column added to the control, while the onadditem event occurs for each item added to the control during data import. The onload event occurs once all data is imported and loaded into the control.

"xml/datasource.xml" {string}, imports data from datasource.xml file
"Item 1.1,SubItem 1.2\r\nItem 1.2,SubItem 2.2" {string}, creates two columns and two rows
[["Item 1.1","Item 1.2"],["Item 2.1","Item 2.2"]] {array}, creates two columns and two rows
{columns: [{caption: "C1", displayFilterButton: true}, " C2"], items: [{value: ["R1.1", "R1.2"], items: [["C1.1", "C1.2"], ["C2.1", "C2.2"], ["C3.1", "C3.2"]]}, ["R2.1", "R2.2"]]} {object}, defines a dataset with two columns labeled as C1 (with a filter button for user value filtering) and C2. It includes two root items and three child items under the first root, each specifying values for their respective cells in the table (@since 3.2)

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

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

The DrawGridLines property shows or hides the control's grid-lines. The DrawGridLines property pecifies 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

The GridLines property customizes the color, width and style of the control's grid-lines. The GridLines property specifies the color, width and style of the control's grid-lines as an object of {width, color, style} type. By default, the DrawGridLines property is set to exNoLines (0), which hides the control's grid-lines.

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

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

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

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

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

The ExpandOnDblClick property determines whether the item is expanded or collapsed once the user double-clicks the item. The Item.Expanded property indicates whether the item is expanded or collapsed. The Item.ToggleExpand() method toggles the item's expand state. The Item.ShowExpand property specifies whether the item's expand/collapse glyphs is visible or hidden. By default, the ExpandOnDblClick property is set to true, which expands or collapses the item once the user double-clicks it.

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

The FilterBarCaption property customizes the caption to display within the control's filter-bar. The FilterBarHeight property gets or sets the height to display the control's filter-bar. The filter-bar is displayed only if the control's FilterBarVisible property includes exFilterBarVisible or exFilterBarPromptVisible flags, or if any filter is applied and the FilterBarVisible property includes exFilterBarHidden flag. Setting the filter-bar height to 0 hides the control's filter-bar. The FilterBarPrompt property gets or sets the caption to show while the pattern of the filter-prompt is empty. The property supports the following keywords, constants, operators and functions:

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

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

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

  "upper(value)"

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

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

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

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

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

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

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

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

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

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

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

  "value + ` ` + available"

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

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

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

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

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

  "allui"

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

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

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

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

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

  "all"

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

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

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

By default, the FilterBarCaption property is an empty string (""), so no filter bar is displayed while no filter is applied. Once a filter is applied, the control displays the current filter as the filter bar caption.

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

The FilterBarHeight property gets or sets the height to display the control's filter-bar. The filter-bar is displayed only if the control's FilterBarVisible property includes exFilterBarVisible or exFilterBarPromptVisible flags, or if any filter is applied and the FilterBarVisible property includes exFilterBarHidden flag. Setting the filter-bar height to 0 hides the control's filter-bar. The FilterBarPrompt property gets or sets the caption to show while the pattern of the filter-prompt is empty. By default, the FilterBarHeight property is set to 24 pixels.

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

The FilterBarPrompt property gets or sets the caption to show while the pattern of the filter-prompt is empty. FilterBarPrompt property supports ex-HTML formatting. The FilterBarVisible property shows or hides the control's filter-bar. The FilterBarHeight property gets or sets the height to display the control's filter-bar. The FilterBarPromptColumns property specifies the list of columns the pattern of filter-prompt is applying to. The FilterBarPromptType property gets or sets the type of the control's filter-prompt. The default value is "Start Filter...".

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

The FilterBarPromptColumns property specifies the list of columns the pattern of filter-prompt is applying to. The FilterBarPromptColumns property supports the following types of values:

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

The FilterBarPrompt property gets or sets the caption to show while the pattern of the filter-prompt is empty. FilterBarPrompt property supports ex-HTML formatting. The FilterBarVisible property shows or hides the control's filter-bar. The FilterBarHeight property gets or sets the height to display the control's filter-bar. The FilterBarPromptColumns property specifies the list of columns the pattern of filter-prompt is applying to. The FilterBarPromptType property gets or sets the type of the control's filter-prompt. By default, the FilterBarPromptColumns property is null, which specifies that filter-prompt is applied to all columns (visible or hidden).

null or -1 {null/number}, specifies that filter-prompt is applied to all columns (visible or hidden)
2 {number}, specifies that filter-prompt is applied to the column with index 2
"0,2,4" {string}, specifies that filter-prompt is applied to the columns with index 0, 2 and 4
"EmployeeID,ShipVia,ShipCountry" {string}, specifies that filter-prompt is applied to the columns with identifier/key/caption/plain-caption "EmployeeID", "ShipVia" and "ShipCountry"

The FilterBarPromptPattern property gets or sets the pattern of the control's filter-prompt. The pattern is used to filter the items within the control based on the filterBarPromptType field. The FilterBarPrompt property gets or sets the caption to show while the pattern of the filter-prompt is empty. The FilterBarPromptType property gets or sets the type of the control's filter-prompt, as a value of the Tree.FilterPromptEnum enumeration. By default, the FilterBarPromptPattern property is an empty string ("").

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

The FilterBarPromptType property gets or sets the type of the control's filter-prompt, as a value of the Tree.FilterPromptEnum enumeration. The type defines how the pattern of filter-prompt filters for items. The FilterBarVisible property shows or hides the control's filter-bar. The filter-bar is displayed only if the control's FilterBarVisible property includes exFilterBarVisible or exFilterBarPromptVisible flags, or if any filter is applied and the FilterBarVisible property includes exFilterBarHidden flag. The onfilter event notifies your application once the control's filter has been changed. The 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.

By default, the FilterBarPromptType property is exFilterPromptContainsAll.

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

The FilterBarVisible property shows or hides the control's filter-bar. The filter-bar is displayed only if the control's FilterBarVisible property includes exFilterBarVisible or exFilterBarPromptVisible flags, or if any filter is applied and the FilterBarVisible property includes exFilterBarHidden flag. The onfilter event notifies your application once the control's filter has been changed. The onfilter event is triggered when the user applies a new filter or clears the existing filter. The FilterBarVisible property supports multiple flags that customize the control's filter-bar appearance and behavior, as defined by the exontrol.Tree.FilterBarVisibleEnum type. 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).

By default, the FilterBarVisible property is set to exontrol.Tree.FilterBarVisibleEnum.exFilterBarHidden, which makes the control's filter-bar visible only if there is a filter applied.

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

The FilterInclude property specifies the items to include once the control's filter is applied. The Tree.FilterIncludeEnum type supports various flags that define the items to include once the control's filter is applied. The exMatchIncludeParent flag can be combined with any other value to include the parent-items that match the filter. The FilterInclude property supports values of Tree.FilterIncludeEnum type. 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

By default, the FilterInclude property is set to exItemsWithoutChilds, which shows the items (and parent-items) that match the filter (no child-items are included).

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

The FormatText property gets or sets the format to display the cell's caption, as a combination of exontrol.DrawTextFormatEnum flags. The Cell.FormatText property gets or sets the format to display the cell's caption. The Column.FormatText property gets or sets the format to display the column's header caption. The format defines the text's alignment, wrapping, clipping, and other display options. The Tree.FormatText property is used as default format for the cells or columns that do not have their own format defined. Shortly, if the Cell.Format property is null, the Tree.FormatText property is used to display the cell's caption; if the Column.Format property is null, the Tree.FormatText property is used to display the column's header 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.

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

The GridLines property customizes the color, width and style of the control's grid-lines. The DrawGridLines property shows or hides the control's grid-lines. The GridLines property 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)

By default, the GridLines property is set to:

 {
  color: "gray",
  style: 1
 }

which displays gray dotted grid-lines with 1-pixel width.

null {null}, resets the grid-lines to default (gray dotted lines with 1-pixel width)
{ color: "red", width: 2, style: [4,2] } {object}, changes the grid-lines to red color, 2-pixels width and dashed style

The GroupByFormatCell property specifies the format of the cell to be displayed when the column gets grouped by. The Tree.AllowGroupBy property specifies whether the control supports group-by view. The group-by view is generated once the user drags a column to the control's group-by/sort bar. The Tree.SortBarVisible property must be true to display the group-by/sort bar. By default, the control does not support group-by view. The onaddgroupitem event is triggered for each item when a group-by view is generated. The onremoveitem event is triggered for each item when a group-by view is removed. The GroupItem property determines whether an item is a group item. The format of the cell to be displayed when the column gets grouped by can be specified for each column individually through the Column.GroupByFormatCell property, which overrides the default format specified by this method.

The format of the cell is defined by a format-expression that supports keywords and operators, as explained next:

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

The format-expression supports the following unary-operators:

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

  aggregate, must be one of the following:
  

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

  list, must be one of the following:
  

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

  direction, must be one of the following:

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

  Currently, the following items are excluded by aggregate functions:

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

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

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

The format-expression supports the following binary-operators:

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

where:

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

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

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

By default, the GroupByFormatCell property is set to:

"(exp(``) ? `<b>` : ``) + value + (0:=get(`count(current,rec,1)`) ? (` <fgcolor gray>(` + =:0 + `)`) : ``)"

which displays the group-by value in bold if the group-item is expanded, followed by the count of items within the group in gray color.

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

The HasButtons property shows or hides the expand/collapse glyphs (+/- buttons to expand-collapse the item). The items can still be expanded/collapsed by double-clicking the item. The expand/collapse glyphs are shown only if the item has child items. The HasLines property customizes the color, width and style of the control's hierarchy-lines. The TreeColumnIndex property gets or sets the index or identifier/key/caption of the column that displays the hierarchy. By default, the HasButtons property is true, meaning that the control shows the expand/collapse glyphs.

false {boolean}, hides the expand/collapse glyphs (+/- buttons to expand-collapse the item)
true {boolean}, shows the expand/collapse glyphs (+/- buttons to expand

The HasLines property customizes the color, width and style of the control's hierarchy-lines. The TreeColumnIndex property gets or sets the index or identifier/key/caption of the column that displays the hierarchy. The HasButtons property shows or hides the expand/collapse glyphs (+/- buttons to expand-collapse the item). The HasLines property 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)

By default, the control shows hierarchy-lines with partial-black color, 1-pixel width and dotted style.

null {null}, no hierarchy lines are shown
{width: 2, color: "red", style: [4,2], cap: "round", join: "bevel"} {object}, shows hierarchy-lines with red color, 2-pixels width, dashed style, round line-caps and bevel line-joins

The HeaderEnabled property enables or disables the control's header(includes the control's sortbar or floatbar). While disabled the user can't move, resize, sort or drag and drop the columns by drag and drop. The HeaderHeight property gets or sets the height to display the control's header. The HeaderVisible property shows or hides the control's header. By default, the HeaderEnabled property is set to true, which enables the control's header.

false {boolean} or 0 {number}, disables the control's header
true {boolean} or 1 {number}, enables the control's header

The HeaderHeight property gets or sets the height to display the control's header. The header displays the header of each visible-columns. The HeaderVisible property shows or hides the control's header. The HeaderEnabled property enables or disables the control's header(includes the control's sortbar or floatbar). By default, the HeaderHeight property is set to 24, which indicates that the height of the control's header is 24 pixels.

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

The HeaderVisible property shows or hides the control's header. The header displays the header of each visible-columns. The HeaderHeight property specifies the height to display the control's header. The HeaderEnabled property enables or disables the control's header(includes the control's sortbar or floatbar). The HeaderVisible property supports 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

By default, the HeaderVisible property is set to exHeaderVisible(-1), which shows the control's header.

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)

The HoistItem property defines the control's hoisted item, promoting it along with all its visible children to the top level without altering its content or properties.

By default,

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

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

The HoistItem property could be any of the following:

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

By default, if no hoisted item is defined, the HoistItem property is set to null or undefined.

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

The ImageAlign property gets or sets the alignment of the cell's image. The Column.ImageAlign property takes priority over the control's ImageAlign property, and the Cell.ImageAlign property takes priority over the Column.ImageAlign property. When the Cell.ImageAlign property is null, the alignment falls back to the Column.ImageAlign property, and if the Column.ImageAlign property is also null, the control's ImageAlign property is used. The alignment can be one of the following:

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

The Cell.Image property gets or sets the cell's individual image. The Column.FormatImage property defines the expression to determine the images the column display. The Column.Image property sets or gets the column's image. By default, the ImageAlign property is set to 0 (the image is aligned left to the caption).

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

The ImageSize property gets or sets the size of the cell's image. The size can be defined as explained:

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

The Column.ImageSize property takes priority over the control's ImageSize property, and the Cell.ImageSize property takes priority over the Column.ImageSize property. When the Cell.ImageSize property is null, the size falls back to the Column.ImageSize property, and if the Column.ImageSize property is also null, the control's ImageSize property is used. In short, the size priority is: Cell -> Column -> Control. By default, the ImageSize property is set to 16.

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

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

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

The Items property returns the control's items. The Items property is equivalent with GetItems() method. The Add or Remove methods of the Items object could be used to add or remove items from the control. The Columns property returns the control's columns. The Add or Remove methods of the Columns object could be used to add or remove columns from the control. The Import or Data method loads data into the control, and the Export method extracts data from the control, all in a specific format. The ConditionalFormats property returns the control's conditional formats. The Add or Remove methods of the ConditionalFormats object could be used to add or remove conditional formats from the control.

The following statements are equivalents:

 oTree.GetItems(), returns the control's items
 oTree.Items, returns the control's items

where oTree is an object of Tree type

The Layout property gets/sets the UI layout of the object. The Layout property is equivalent with GetLayout()/SetLayout() methods. Currently, the control's Layout property serializes the following:

• layout of windows (size, dock, parent)
• pattern of the control's filter-prompt
• view's horizontal and vertical scroll position
• column's width, visibility, position, expand/collapse state, sort-order, sort-position, filter, filter-type
• selected, expanded/collapsed items
• control's zoom

The following statements are equivalents:

oTree.GetLayout(), gets the control's layout
oTree.Layout, gets the control's layout

where oTree is an object of Tree type

The LinesAtRoot property links items at the root of the hierarchy. The LinesAtRoot property specifies whether the root items are connected with a line. The TreeColumnIndex property gets or sets the index or identifier/key/caption of the column that displays the hierarchy. The HasLines property customizes the color, width and style of the control's hierarchy-lines. The HasButtons property shows or hides the expand/collapse glyphs (+/- buttons to expand-collapse the item). By default, the LinesAtRoot property is set to exNoLinesAtRoot (0), meaning that no lines are shown at root items.

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

The Listeners field defines the events of the control, as an object of exontrol.Lts type. The exontrol.Lts type supports forEach(callback, thisArg) method that helps you to enumerate the events the control supports. The on() method adds an event listener to the specified event or defines a keyboard shortcut. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts. The Events section lists the events the component supports.

The following sample shows how you can get all events the component currently supports:

oTree.Listeners.forEach(function(name)
{
 console.log(name);
});

The following sample displays information about the item being clicked:

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

or

oTree.on("click", function (oEvent)
{
 console.log(oEvent);
});

where oTree is an object of Tree type

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

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

The Margins property specifies the control's margins, which define the indentation between a parent and its children. The TreeColumnIndex property gets or sets the index or identifier/key/caption of the column that displays the hierarchy. The HasButtons property shows or hides the expand/collapse glyphs (+/- buttons to expand-collapse the item). The Margins property can be get or set using the GetMargins() and SetMargins() methods. By default, the Margins property is set to null, which indicates an indentation of 16-pixels between a parent and its children.

null {null}, the control uses the default indentation of 16-pixels between a parent and its children
{indent: 0} {object}, specifies no indentation between a parent and its children
{indent: 24} {object}, specifies an indentation of 24-pixels between a parent and its children

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

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

The Options property specifies the control's general settings. By default, the control's oTV field determines its default tree-view, so the GetOptions and SetOptions methods of the oTV field are used to retrieve or update the control's options. The Options property functions identically to calling GetOptions/SetOptions on the oTV field. Each option corresponds to a specific Get/Set... method of the view, meaning that updating an option is equivalent to invoking the related Get/Set... method. For example, setting the allowGroupBy option is the same as calling the view's GetAllowGroupBy()/SetAllowGroupBy(value) methods.

The following statements are equivalents:

 oTree.SetOptions({ allowGroupBy: true }), sets the allowGroupBy option to true
 oTree.Options = { allowGroupBy: true }, sets the allowGroupBy option to true
 oTree.oTV.SetAllowGroupBy(true), sets the allowGroupBy option to true

where oTree is an object of Tree type

The Pad property gets or sets the item's padding or the space between item's content and its borders. The Column.Pad property takes priority over the control's Pad property, and the Cell.Pad property takes priority over the Column.Pad property. When the Cell.Pad property is null, the padding falls back to the Column.Pad property, and if the Column.Pad property is also null, the control's Pad property is used. In short, the padding priority is: Cell -> Column -> Control. By default, the Pad property is set to null that indicates the default padding value of [4,4] is applied. The value can 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

By default, the Pad property is set to null that indicates the default padding value of [4,4] is applied.

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

The ReadOnly property sets the control in read-only mode. While in read-only mode, the user can't edit or drag any item. The user can still select item. The Locked property locks or unlocks the control. The user can't select any item, sort any column, or edit any item when the control is locked(protected). By default, the ReadOnly property is set to false (the control is editable). The ReadOnly property can be get or set using the GetReadOnly() and SetReadOnly() methods.

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

The ScrollBars property specifies how the scroll-bars are being displayed into the control. You can use the ScrollBars property to show or hide the control's scroll bars. The ScrollBars property is equivalent with GetScrollBars/SetScrollBars methods. The ScrollBars property uses the exontrol.ScrollBarsEnum enumeration as explained:

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

The ScrollPos property scrolls horizontally and/or vertically the control's default view. The onscroll event is fired when the user scrolls the view by mouse, touch or keyboard, or when the view's scroll is changed programmatically by ScrollPos property. By default, the ScrollBars property is set to exBoth value, so both horizontal and vertical scroll bars are shown if the content is larger than the control's client area.

exontrol.ScrollBarsEnum.exBoth or 3 {number}, specifies that both horizontal and vertical scroll bars are shown if the content is larger than the control's client area
exontrol.ScrollBarsEnum.exNoScroll or 0 {number}, specifies that no scroll bars are shown (scroll is not allowed)

The ScrollPos property scrolls horizontally and/or vertically the control's default view. The onscroll event is fired when the user scrolls the view by mouse, touch or keyboard, or when the view's scroll is changed programmatically by ScrollPos property. The ScrollPos property accepts an object of {x,y} type that defines the control's horizontal and vertical scroll-position. Alternatively, a number value could be specified to set the vertical scroll position only (@since 5.1) as explained:

x {number}, indicates the horizontal scroll-position (in pixels)
y {number}, indicates the vertical scroll-position (in pixels)

The ScrollBars property specifies how the scroll-bars are being displayed into the control.

{x:0, y:100} {object}, scrolls the control's default view to horizontal position 0 and vertical position 100 (in pixels)
200 {number}, scrolls the control's default view to vertical position 200 (in pixels)

The Selection property gets or sets the control's selection. The Selection property can be used as a getter or setter. The SingleSel property gets or sets the control's selection to single, multiple or toggle. The Item.Selected property defines whether the item is selected. The onselchange event is raised when the selection is changed. The Selection property is equivalent to GetSelection() and SetSelection() methods. The Selection supports any of the following values:

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

The following statements are equivalents:

oTree.Selection, gets the control's selection
oTree.GetSelection(), gets the control's selection

oTree.Selection = value, sets the control's selection
oTree.SetSelection(value), sets the control's selection

where oTree is an object of Tree type

The Shapes property specifies the shapes assigned to each part of the control. These shapes define the visual appearance of the control's elements, such as borders, fills, and other graphical components. By setting this property, you can fully customize how the control is drawn and displayed. The Cell.Shape property changes the shape for the cell itself. The Column.CellShape property gets or sets the shape to apply on the column's body/data/cells. The Item.Shape property defines the shape for the item itself. The Column.Shape property changes the shape for the column itself (column's header).

The format of the property is:

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

where:

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

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

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

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

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

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

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

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

The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts. In order to provide keyboard support for the component, the owner <canvas> element must include the tabIndex attribute, as <canvas ... tabIndex="0">. You can associated a function or a callback to any shortcut.

The following sample removes the selection (calls the RemoveSelection() method) once the user presses the Delete key:

oTree.Shortcuts.Add( "Delete", oTree.RemoveSelection, oTree );

where oTree is an object of Tree type

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

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

The SingleSel property gets or sets the control's selection to single, multiple or toggle. The SingleSel property accepts an OR combination of Tree.SingleSelEnum flags that specifies how user can select items. The SingleSel property can be used as a getter or setter. The SingleSel property is equivalent to GetSingleSel() and SetSingleSel() methods. The Item.Selected property defines whether the item is selected. The onselchange event is raised when the selection is changed. The onselchange event is raised when the selection is changed. By default, the SingleSel property is set to exontrol.Tree.SingleSelEnum.exEnableSel, which enables multiple-selection.

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

The SingleSort property specifies whether the control supports single or multiple-columns sort. The Sorts/GetSorts()/SetSorts(value) {string}, sorts(groups) multiple-columns at once giving a string-representation such as "1:A 2:D, 0:A". By default, the control supports multiple-columns sort. The Column.AllowSort property specifies whether the column is sortable. The Column.SortOrder property gets or sets the column's sort-order. The AllowGroupBy property specifies whether the control supports group-by view. The onchange("sort-column") event notifies that a column has been sorted through user interaction by clicking its header. The Column.AllowGroupBy property specifies whether the column can be grouped by.

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

The SortBarCaption property gets or sets the caption to be shown on the control's sortbar when it is empty. The caption supports HTML tags for formatting. The SortBarVisible/GetSortBarVisible()/SetSortBarVisible(value) {boolean}, shows or hides the control's sortbar. The sortbar displays the header of each sorted/grouped-columns. The Sorts/GetSorts()/SetSorts(value) {string}, sorts(groups) multiple-columns at once giving a string-representation such as "1:A 2:D, 0:A". By default, the control's sortbar shows the caption "Drag a column header here to sort by that column." when no columns has been dropped onto it.

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

The SortBarVisible property shows or hides the control's sortbar. The sortbar displays the header of each sorted/grouped-columns. The SortBarCaption/GetSortBarCaption()/SetSortBarCaption(value) {string}, specifies the caption to be shown on the control's sortbar when it is empty. The Sorts/GetSorts()/SetSorts(value) {string}, sorts(groups) multiple-columns at once giving a string-representation such as "1:A 2:D, 0:A". The AllowGroupBy property specifies whether the column can be grouped by. By default, the control's sortbar is hidden.

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

The SortOnClick property indicates whether the column gets sorted once the user clicks its header as a value of exontrol.Tree.SortOnClickEnum type. 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)

By default, the SortOnClick property is set to exDefaultSort, meaning that the column gets sorted once the user clicks its header.

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

The Statistics property gives statistics data of objects being hold by the control. The Statistics property is equivalent with GetStatistics() method. The Statistics property returns statistics data of objects being hold by the control such as:

Size: 1,536x754
Zoom: 100%
Column: 4/4
Item: 32/55
Cell: 128/220
Sel: 1

The following statements are equivalents:

 oTree.Statistics, gives statistics data of objects being hold by the control
 oTree.GetStatistics(), gives statistics data of objects being hold by the control

where oTree is an object of Tree type

The Tfi property defines the font attributes that are applied to the control's captions and can be set to customize their appearance. The Tfi property can be set by a string such as "b monospace 16" or by an object such as {bold: true, fontName: "monospace", fontSize: 16}, and immediately applies these settings to update the displayed captions. By default, the Tfi property is null, so the canvas uses its own default font defined by exontrol.defGUIFont (typically "12px sans-serif"). CSS fonts applied to surrounding HTML elements do not affect the canvas; the canvas text is independent of page styles, and the default font can be changed by setting exontrol.defGUIFont.

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

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

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

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

The value as {object} supports any of the following fields:

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

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

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

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

The ToolTipDelay property gets or sets how long the mouse pointer must point to an object before the tool tip appears. The ToolTipDelay property accepts a number value that specifies how long the mouse pointer must point to an object before the tool tip appears. The ToolTipDelay property is measured in milliseconds. The ToolTipPopDelay property gets or sets the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control. The ToolTipWidth property gets or sets the width of the tooltip window, in pixels. The default value is 500 ms.

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

The ToolTipPopDelay property gets or sets the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control. The ToolTipPopDelay property is expressed in milliseconds. The ToolTipDelay property defines how long the mouse pointer must hover over an object before the tooltip appears. The ToolTipWidth property specifies the width of the tooltip window in pixels.

The property supports the following values:

• 0 {number}, no tooltip is shown for any object (disabled)
• -1 {number}, the tooltip stays indefinitely (negative)
• positive {number}, the tooltip is visible for the specified number of milliseconds (for example, 1000 means that the tooltip is visible for 1 second)

By default, the tooltip remains visible for 5000 milliseconds.

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

The ToolTipWidth property gets or sets the width of the tooltip window, in pixels. The ToolTipWidth property accepts a number value that specifies the width of the tooltip window, in pixels. The ToolTipDelay property gets or sets how long the mouse pointer must point to an object before the tool tip appears. The ToolTipPopDelay property gets or sets the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control. The following values are valid:

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

The default value is -1.

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

The TreeColumnIndex property gets or sets the index or identifier/key/caption of the column that displays the hierarchy. The HasButtons property shows or hides the expand/collapse glyphs (+/- buttons to expand-collapse the item). The HasLines property customizes the color, width and style of the control's hierarchy-lines. The Margins property specifies the control's margins, which define the indentation between a parent and its children. By default, the TreeColumnIndex property is set to 0, which displays the hierarchy within the first column (index 0).

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

The WheelChange property gets or sets the amount by which the control scrolls when the user rolls the mouse wheel. You can access or modify this property using the GetWheelChange() and SetWheelChange() methods. By default, WheelChange is set to 18. Setting WheelChange to 0 disables any action from the mouse wheel. When the user rolls the mouse wheel, the control scrolls by the amount specified in WheelChange. Holding SHIFT while scrolling causes the control to scroll horizontally.

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

The Zoom property defines the zoom factor of the control's content. The zoom factor determines how much the control's content is magnified or reduced. Once the user adjusts the browser's zoom level, the control automatically recalculates its zoom factor to maintain the correct scaling of its content. The ZoomLevels property defines the allowed zoom levels the user can select from. By default, the Zoom property is set to null, indicating a normal view (100% zoom).

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

The ZoomLevels property defines the allowed zoom levels the user can select from, as a list of numbers separated by comma. The Zoom property defines the zoom factor of the control's content. The zoom factor determines how much the control's content is magnified or reduced. Once the user adjusts the browser's zoom level, the control automatically recalculates its zoom factor to maintain the correct scaling of its content.

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%

The oTV field defines the base tree-view of control. The tree-view displays a view of the control's items and columns. The control can display multiple views. Each view can display different columns but the same set of items. For instance, the SetScrollPos(), GetScrollPos() methods can be used to set/get the scroll-position of a specific 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. The TreeView() method returns a specific tree-view by its name. By default, the control provides a single tree view named tree, accessible through the oTV field, and this view cannot be removed.

The following statements are equivalent:

 oTree.oTV.SetScrollPos({x: 100}); // sets the horizontal scroll-position of the default tree-view to 100
 oTree.ScrollPos = {x: 100}; // sets the horizontal scroll-position of the default tree-view to 100

where oTree is an object of Tree type

The AddTreeView() method creates a new view to display the columns/items. Use the RemoveTreeView() method removes a tree-view already created by AddTreeView() method. The TreeView() method returns a tree-view by name. A tree-view displays the items and columns in a specific way. The control supports multiple tree-views, each with its own configuration for displaying items and columns. By default, the control includes a single tree-view named "tree", accessible directly through the oTV field. The RemoveTreeView() method cannot remove the control's default tree-view.

oTree.AddTreeView("2nd",{Background: "black", Foreground: "white", Dock: 3}) {TV}, creates a new tree-view named "2nd", with black background, white foreground and docked to the left side of the control.

The ApplyFilter() method (re-)applies the control's filter (if any). The onfilter event notifies your application once the control's filter has been changed. The onfilter event is triggered when the user applies a new filter or clears the existing filter. The Column.DisplayFilterButton properyy specifies whether the column shows the filter-button. The Column.Filter property filters for items based on values within this column. Column.The FilterList property specifies whether the column's drop down filter list includes visible or all items. The ChangeFilter() method changes the column's filter and filterType at once (validates the view and applies the filter once).

oTree.ApplyFilter(), (re-)applies the control's filter (if any)

The BeginUpdate() method suspends the control's render until the EndUpdate() method is called. It maintains performance, while multiple changes occurs within the control. The BeginUpdate() method is mostly used when you want to perform multiple changes to the control without refreshing the control after each change, and once all changes are performed, you can call the EndUpdate() method to refresh the control. For instance, you can use the BeginUpdate()/EndUpdate() methods when you want to add multiple items to the control, so instead of refreshing the control after adding each item, you can call the BeginUpdate() method before adding the items, and once all items are added, you can call the EndUpdate() method to refresh the control. You can use the Update() method to perform multiple changes at once. The Smooth() method performs a smooth-transition from a layout to another. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.

oTree.BeginUpdate();
  // performs multiple changes to the control
oTree.EndUpdate();

The Cell() method returns the cell based on the item and column. The Cell property is equivelent with calling Item(item).Cell(column) method, but with no need to check whether the item and column exist, as the Cell() method returns null if either the item or column is not found, or if the cell does not exist for the giving item and column. The Cell() method supports retrieving a cell by specifying the item and column using their index, identifier/key, or object reference. The Column() method returns the column based on its index or identifier/key. The Item() method returns the item based on its index or identifier/key.

The following statements are equivalents:

 oTree.Cell(0, 0), gets the cell of the first item and the first column
 oTree.Cell("item1", "column1"), gets the cell of the item with identifier/key "item1" and the column with identifier/key/caption/plain-caption "column1"
 oTree.Cell(oItem, oColumn), gets the cell of the item specified by the object reference oItem and the column specified by the object reference oColumn

where oTree is an object of Tree type, oItem is an object of Item type and oColumn is an object of Column type

The ChooseFile() method clears the control's data and adds an input-file element to let user choose a local file (CSV or XML format) to import data from. The OnErrorChooseFile property specifies whether the control displays an input-file to let user choose a local filte to import, as soon as an error occurs. The onerror event occurs when an error occurs during the loading of the control, such as when the data source is not accessible or when the file being imported has an unsupported format.

oTree.ChooseFile("message"); // displays "message" as an error to the user, and adds an "input-file" element to let user selects a local file to import into the control

The Clear() method clears the control's data (columns, items and filter). The ClearFilter() method is called within the Clear() method to remove the control's filter as well. The Columns.Clear method is used to clear all the columns and items of the control. The Items.Clear method is used to clear all the items of the control. The Import() method imports data from CSV/XML format. The Data property gets or sets the control's data.

oTree.Clear(); // clears the control's data (columns, items and filter)

The ClearFilter() method clears the control's filter (if any). The onfilter event notifies your application once the control's filter has been changed. The onfilter event is triggered when the user applies a new filter or clears the existing filter. The Column.DisplayFilterButton properyy specifies whether the column shows the filter-button. The Column.Filter property filters for items based on values within this column. Column.The FilterList property specifies whether the column's drop down filter list includes visible or all items. The ChangeFilter() method changes the column's filter and filterType at once (validates the view and applies the filter once). The ClearFilter() method is called within the Clear() method to remove the control's filter as well.

oTree.ClearFilter(), clears the control's filter (if any)

The CollapseAll() method collapses all items. The ExpandAll() method expands or collapses all items based on the giving parameter (true to expand, false to collapse). The CollapseAll() method is equivalent with calling ExpandAll(false). The Item.Expanded property specifies whether the item is expanded or collapsed. The ExpandAll() method is useful when you want to expand or collapse all items at once, without the need to iterate over them one by one.

oTree.CollapseAll(), collapses all items
 oTree.ExpandAll(false), collapses all items

The Column() method returns the column based on its index or identifier/key. The Column(id) method is equivalent with Columns.Item(id) method. The Cell() method returns the cell based on the item and column. The Item() method returns the item based on its index or identifier/key. The feC and feCU methods (short for forEachColumn, forEachColumnUntil) enumerates the columns of the control.

The following statements are equivalents:

 oTree.Column(0), gets the first column
 oTree.Column("column1"), gets the column with identifier/key/caption/plain-caption "column1" 

where oTree is an object of Tree type

The ConditionalFormat() method gets the conditional format by index, key or reference. The ConditionalFormat(id) method is equivalent with ConditionalFormats.Item(id) method. The conditional format allows changing the appearance of cells or items based on specific conditions. The Conditional.Shape property defines the visual-appearance of the cell when the condition is met, and it accepts the same values of the Shapes property, such as backgroundColor, fontColor, fontStyle and so on.

The following statements are equivalents:

 oTree.ConditionalFormat(0), gets the first conditional format
 oTree.ConditionalFormat("cf1"), gets the conditional format with identifier/key "cf1"

where oTree is an object of Tree type

The EndUpdate() method resumes the control's render, after it is suspended by the BeginUpdate() method. The EndUpdate() method is mostly used after calling the BeginUpdate() method, to refresh the control after performing multiple changes to the control. You can use the Update() method to perform multiple changes at once. The Smooth() method performs a smooth-transition from a layout to another. BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.

oTree.BeginUpdate();
 // performs multiple changes to the control
oTree.EndUpdate();

The EnsureVisibleClient() method ensures that the giving client fits the control's client area. The EnsureVisibleClient() method can be used to ensure that a specific column, item, or cell fits the control's client area. The EnsureVisibleClient() method performs the required scroll and zoom operations to fit the client into the control's client area. The EnsureVisibleClient() method performs a smooth transition while fitting the client into the control's client area, if the smooth option is set to a value greater than zero. The EnsureVisibleSelection() method scrolls the control's content to ensure that the control's selection fits the control's client area.

oTree.EnsureVisibleClient(oTree.Column(2)), ensures that the column at index 2 fits the control's client area
oTree.EnsureVisibleClient(oTree.Item(10), {expandParents: true}), expands the parent items of the item at index 10 and ensures that the item fits the control's client area (@since 5.1)
oTree.EnsureVisibleClient(-1, {expandParents: true}), expands the parent items of the last item and ensures that the last item fits the control's client area (@since 5.1)

The EnsureVisibleSelection() method scrolls the control's content to ensure that the control's selection fits the control's client area. The EnsureVisibleSelection() method performs the required scroll and zoom operations to fit the selection into the control's client area. The EnsureVisibleSelection() method performs a smooth transition while fitting the selection into the control's client area, if the smooth option is set to a value greater than zero. The EnsureVisibleClient() method ensures that the giving client fits the control's client area.

oTree.EnsureVisibleSelection(), scrolls the control's content to ensure that the control's selection fits the control's client area
oTree.EnsureVisibleSelection({expandParents: true}), expands the parent items of the control's selection and scrolls the control's content to ensure that the control's selection fits the control's client area
oTree.EnsureVisibleSelection({selection: [oTree.Item(10)], expandParents: true}), expands the parent items of the item at index 10 and scrolls the control's content to ensure that the item fits the control's client area (@since 5.1)

The ExpandAll() method expands all items. The CollapseAll() method collapses all items. The ExpandAll() method is equivalent with calling ExpandAll(true), while the CollapseAll() method is equivalent with calling ExpandAll(false). The Item.Expanded property specifies whether the item is expanded or collapsed. The ExpandAll() method is useful when you want to expand or collapse all items at once, without the need to iterate over them one by one.

oTree.ExpandAll(), expands all items
 oTree.ExpandAll(false), collapses all items

The Export() method exports the control's data as an array or CSV format. The GetData() method is equivalent with Export() method. The exportOpts parameter of the Export() method allows you to specify the items and columns to export, and the type of data to export for each column. The Import() method imports data from CSV/XML format. The LoadXML() method loads an XML document (previously saved by an exontrol component). The Data property gets(exports) or sets(imports) the control's data.

The FindItem() method searches for an item by its caption in a specified column. If start is provided, the search begins from the given item. The Item property gets the item based on its index, key/identifier or reference, and the Column property gets the column based on its index, key/identifier or reference. The Cell() method returns the cell based on the item and column. The feI and feIU methods (short for forEachItem, forEachItemUntil) enumerates the items of the control.

FindItem(10248) {Item}, returns undefined if 10248 is not found in the first column, or returns the item
FindItem('Filimon', 'Last', 10) {Item}, searches the 'Last' column for the exact caption 'Filimon' starting after the item with index 10, and returns the item or undefined if not found
FindItem('Mihai', 'First') {Item}, searches the 'First' column for the exact caption 'Mihai' starting from the first item, and returns the item or undefined if not found

The FitToClient() method ensures that the entire (null/undefined) or giving layout fits the control's client area. The FitToClient() method performs the required scroll and zoom operations to fit the entire or giving layout into the control's client area. The FitToClient() method performs a smooth transition while fitting the entire or giving layout into the control's client area, if the smooth option is set to a value greater than zero. The FitToClient() method can be used as a default action for double-click on the control's background or as a callback for a button to reset the zoom and scroll to fit the entire layout into the control's client area. The ScrollPos property scrolls horizontally and/or vertically the control's default view. The onscroll event is fired when the user scrolls the view by mouse, touch or keyboard, or when the view's scroll is changed programmatically by ScrollPos property. The Zoom property defines the zoom factor of the control's content.

oTree.FitToClient(), ensures that the entire layout fits the control's client area by performing the required scroll and zoom operations with a smooth transition (if the smooth option is set to a value greater than zero)
 oTree.FitToClient([0,0,1000,1000]), ensures that the layout defined by the absolute-coordinates of [0,0,1000,1000] fits the control's client area by performing the required scroll and zoom operations with a smooth transition (if the smooth option is set to a value greater than zero)  

The GetCanvas() method returns the HTMLCanvasElement object where the control is currently running on. The control is always running on a canvas, which is the canvas of the control's canvas-window (exontrol.CW). The GetCanvas() method is useful when you need to access the canvas directly. You can also use the GetCanvas() method to retrieve the canvas's context and perform custom drawing operations using the Canvas API. It is recommended to call the exontrol.CC.Resize(<canvas>, [width], [height]) method to resize and refresh the control; otherwise, the control's content is lost.

exontrol.CC.Resize( oTree.GetCanvas(), 800, 600 ); // resizes the control's canvas to 800x600 pixels

The GetLockedItem() method gets a locked item giving its index or identifier/key. The Item.Lock property specifies or retrieves the section of the control where the item is placed - either locked at the top, scrollable, or locked at the bottom (@since 4.6). The GetLockedItemsCount() method gets the number of items fixed on the top or bottom side of the control. The SetLockedItemsCount() method specifies the number of items fixed on the top or bottom side of the control.

oTree.GetLockedItem(false, 0); // gets the first locked item on the top side of the control
  oTree.GetLockedItem(true, "itemKey"); // gets the locked item with the identifier/key "itemKey" on the bottom side of the control

The GetLockedItemsCount() method gets the number of items fixed on the top or bottom side of the control. The Item.Lock property specifies or retrieves the section of the control where the item is placed - either locked at the top, scrollable, or locked at the bottom (@since 4.6). The locked/fixed items are not affected by sorting or grouping operations. The SetLockedItemsCount() method specifies the number of items fixed on the top or bottom side of the control.

oTree.GetLockedItemsCount(false); // gets the number of locked items on the top side of the control

The Home() method zooms to 100% and scrolls the control to origin (0,0). The Home() method is used when the entire layout fits the control's client area, so no zoom is required, just scroll to origin (0,0). The Home() method can be used as a default action for double-click on the control's background or as a callback for a button to reset the zoom and scroll to default values. The ScrollPos property scrolls horizontally and/or vertically the control's default view. The onscroll event is fired when the user scrolls the view by mouse, touch or keyboard, or when the view's scroll is changed programmatically by ScrollPos property. The Zoom property defines the zoom factor of the control's content.

oTree.Home(), zooms to 100% and scrolls the control to origin (0,0)

The Import() method imports data from CSV/XML format. The LoadXML() method loads an XML document (previously saved by an exontrol component). The SetData(value) method is equivalent with Import(value) method. The Import() method can import data from various types of sources, such as a URL, a string in CSV or XML format, an array of values, or a local file dropped into the control. The Import() method also supports different options to specify how to import data into the control, such as whether to clear previously data of the control, where to insert new items, how to parse CSV string, and so on. The onload event occurs once the data is loaded. The onload event is fired even if the data is changed by user interaction (drop a file) or programmatically. The onerror event occurs if the data is not loaded successfully. The onerror event is fired even if the data is changed by user interaction (drop a file) or programmatically.

"xml/datasource.xml" {string}, imports data from datasource.xml file
"Item 1.1,SubItem 1.2\r\nItem 1.2,SubItem 2.2" {string}, creates two columns and two rows
[["Item 1.1","Item 1.2"],["Item 2.1","Item 2.2"]] {array}, creates two columns and two rows
{columns: [{caption: "C1", displayFilterButton: true}, "C2"], items: [{value: ["R1.1", "R1.2"], items: [["C1.1", "C1.2"], ["C2.1", "C2.2"], ["C3.1", "C3.2"]]}, ["R2.1", "R2.2"]]} {object}, defines a dataset with two columns labeled as C1 (with a filter button for user value filtering) and C2. It includes two root items and three child items under the first root, each specifying values for their respective cells in the table (@since 3.2)

The Item() method returns the item based on its index or identifier/key. The Item(id) method is equivalent with Items.Item(id) method. The Cell() method returns the cell based on the item and column. The Column() method returns the column based on its index or identifier/key. The FindItem() method searches for an item by its caption in a specified column. The feI and feIU methods (short for forEachItem, forEachItemUntil) enumerates the items of the control.

The following statements are equivalents:

 oTree.Item(0), gets the first item
 oTree.Item("item1"), gets the item with identifier/key "item1"

where oTree is an object of Tree type

The LoadXML() method loads an XML document (previously saved by an exontrol component). The Import(source, importOpts) method can also load XML documents using the LoadXML() method if the source is an XML string (must begins with 'onload event occurs once the data is loaded. The onload event is fired even if the data is changed by user interaction (drop a file) or programmatically. The onerror event occurs if the data is not loaded successfully. The onerror event is fired even if the data is changed by user interaction (drop a file) or programmatically.

oTree.LoadXML("xml/datasource.xml") {string}, imports data from datasource.xml file

The Refresh() method forces the control to redraw and update its layout without modifying any of its properties or data. It is typically used when the visual appearance needs to be recalculated or repainted, even though no structural or state changes were made.

For example, call Refresh() when:

• The control's container has been resized and the layout must be recalculated.
• External CSS or styling changes affect the control's appearance.
• The control becomes visible after being hidden.
• You need to ensure the UI is visually synchronized with its current internal state.

The method does not alter the control's data, options, or configuration - it only updates the rendered output.

You can use the Update() method to perform multiple changes at once. The Smooth() method performs a smooth-transition from a layout to another. The Refresh() method is not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.

oTree.Refresh(), refreshes the control

The RemoveSelection() method deletes the selected-items. The RemoveSelection() method removes the selected items (including descendent items) from the control, and clears the control's selection. The RemoveSelection() method returns the number of the items being deleted. The UnselectAll() method clears the control's selection. The Items.Remove or Remove method removes the item one by one, and the RemoveSelection() method is more efficient to remove multiple items at once, because it clears the control's selection before remove items. The onremoveitem event is fired once for each item being removed, and the onremoveitem event is fired once after all items are removed.

The RemoveTreeView() method removes the view already created by the AddTreeView() method. The AddTreeView() method creates a new view to display the columns/items. The TreeView() method gets the tree-view by name (which was previously created by the AddTreeView() method). The TreeView("tree") returns the control's default-tree view, equivalent of oTV member.

oTree.RemoveTreeView("2nd"), removes the tree-view named "2nd" previously created by AddTreeView() method.

The Scroll() method scrolls the window based on the giving key. The Scroll() method scrolls the view without changing the selection. The Select method selects the item and scrolls the view to make the selected item visible. The ScrollPos property scrolls horizontally and/or vertically the control's default view. The onscroll event is fired when the user scrolls the view by mouse, touch or keyboard, or when the view's scroll is changed programmatically by ScrollPos property.

The following sample code shows how to scroll the view by a page up or down using the Scroll() method:

 oTree.on("{PageUp}", oTree.Scroll.bind(oTree, "PageUp"));
 oTree.on("{PageDown}", oTree.Scroll.bind(oTree, "PageDown"));

where oTree is an object of Tree type

The Select() method selects items based on the key. The Select method selects items based on the giving key, such as "Home", "PageUp", "ArrowUp", "ArrowDown", "PageDown" or "End". The Select() method selects only visible and selectable items. The Select() method is useful to select items by using shortcut keys, and it can be called once a key is pressed. The Select() method does not change the control's selection if there is no visible and selectable item based on the giving key. The SelectAll method selects all items within the control, and the UnselectAll method clears the control's selection. The RemoveSelection method deletes the selected-items. The Selection property gets or sets the control's selection. The Item.Selected property defines whether the item is selected. The onselchange event is raised when the selection is changed.

The following sample selects up or down item once the user presses "ArrowUp" or "ArrowDown" key:

 oTree.on("{Up}", oTree.Select.bind(oTree, "Up"));
 oTree.on("{Down}", oTree.Select.bind(oTree, "Down"));

where oTree is an object of Tree type

The SelectAll(toSelect) method selects all items within the control. The Select() method selects items based on the key. The Select method selects items based on the giving key, such as "Home", "PageUp", "ArrowUp", "ArrowDown", "PageDown" or "End". The Select() method selects only visible and selectable items. The Select() method is useful to select items by using shortcut keys, and it can be called once a key is pressed. The Select() method does not change the control's selection if there is no visible and selectable item based on the giving key. The SelectAll method selects all items within the control, and the UnselectAll method clears the control's selection. The RemoveSelection method deletes the selected-items. The Selection property gets or sets the control's selection. The Item.Selected property defines whether the item is selected. The onselchange event is raised when the selection is changed.

oTree.SelectAll("vis"); // selects the visible items only (for instance, it does not select items that does not match the filter)

The SetLockedItemsCount() method specifies the number of items fixed on the top or bottom side of the control. The Item.Lock property specifies or retrieves the section of the control where the item is placed - either locked at the top, scrollable, or locked at the bottom (@since 4.6). The locked/fixed items are not affected by sorting or grouping operations. The method adds or removes the locked items based on the specified value. If the value is less than the current number of locked items, then the method removes the extra locked items starting from the last locked item. If the value is greater than the current number of locked items, then the method adds new locked items at the end of the locked items collection. The SetLockedItemsCount() method returns the last locked-item as an object of Item type.

oTree.SetLockedItemsCount(false, 2); // specifies that there are 2 locked items on the top side of the control
  oTree.SetLockedItemsCount(true, 0);   // specifies that there is no locked item on the bottom side of the control

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. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.

oTree.Smooth(function()
 {
  // performs multiple changes to the control, such as removing or adding new items to the control
 })

The Soom() method zooms or/and scrolls the control's content. The Soom() method is used when the entire layout does not fit the control's client area, so zoom and/or scroll is required. The Soom() method can be used as a default action for double-click on the control's background or as a callback for a button to reset the zoom and scroll to default values. The ScrollPos property scrolls horizontally and/or vertically the control's default view. The onscroll event is fired when the user scrolls the view by mouse, touch or keyboard, or when the view's scroll is changed programmatically by ScrollPos property. The Zoom property defines the zoom factor of the control's content.

oTree.Soom(100, [0,0]), zooms to 100% and brings the origin (0,0) at its original position (Home)

The TreeView() method gets the tree-view by name (which was previously created by the AddTreeView() method). The RemoveTreeView() method removes a tree-view already created by AddTreeView() method. The TreeView("tree") returns the control's default-tree view, equivalent of oTV member.

oTree.TreeView("tree") {TV}, gets the control's default-tree view, equivalent of oTV member.
oTree.TreeView("2nd") {TV}, gets the tree-view named "2nd" previously created by AddTreeView() method.

The UnselectAll() method clears the control's selection. The SelectAll method selects all items within the control, and the UnselectAll method clears the control's selection. The RemoveSelection method deletes the selected-items. The Selection property gets or sets the control's selection. The Item.Selected property defines whether the item is selected. The onselchange event is raised when the selection is changed.

oTree.UnselectAll(); // clears the control's selection

The Update() method locks the control's paint during the callback, and invalidates the control once the method ends. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.

oTree.Update(function()
{
 // performs multiple changes to the control
});

The feC() method (short for forEachColumn) invokes the callback for each column of the control (enumerates the columns, as they were added). The Column() method returns the column based on its index or identifier/key. The feCU() method (short for forEachColumnUntil) invokes the callback for each column of the control, until the callback returns a truthy value (enumerates the columns, as they were added).

The following sample enumerates all columns of the control:

oTree.feC(function(oColumn)
{
  console.log(exontrol.ToString.Quote(oColumn));
})

The feCU() method (short for forEachColumnUntil) invokes the callback for each column of the control, until the callback returns a truthy value (enumerates the columns, as they were added). The feC() method (short for forEachColumn) invokes the callback for each column of the control (enumerates the columns, as they were added). The Column() method returns the column based on its index or identifier/key.

The feI() method (short for forEachItem) invokes the callback for each item of the control (unscrolled(top,bottom items) and scrolled items as well) (enumerates the items, as they were added). The Item() method returns the item based on its index or identifier/key. The FindItem() method searches for an item by its caption in a specified column. The feIU() method (short for forEachItemUntil) invokes the callback for each item of the control (unscrolled(top,bottom items) and scrolled items as well), until the callback returns a truthy value (enumerates the items, as they were added).

The following sample enumerates all items of the control:

oTree.feI(function(oItem, index)
{
 console.log(exontrol.ToString.Quote(oItem));
})

The feIU() method (short for forEachItemUntil) invokes the callback for each item of the control (unscrolled(top,bottom items) and scrolled items as well), until the callback returns a truthy value (enumerates the items, as they were added). The feI() method (short for forEachItem) invokes the callback for each item of the control (unscrolled(top,bottom items) and scrolled items as well) (enumerates the items, as they were added). The Item() method returns the item based on its index or identifier/key. The FindItem() method searches for an item by its caption in a specified column.

The following sample searches for the item with "10248" caption in the first column and displays it:

console.log(
  oTree.feIU(function(oItem, index)
  {
    return oItem.Cell(0) == "10248" && oItem
  })
);

The off() method removes a previously bound handler from a specified event, allowing you to stop listening for that event and prevent the associated actions from being executed. Also removes keyboard shortcuts previously defined using the on() method. The event name is case-insensitive and may or may not include the 'on' prefix. For example, 'click' is equivalent to 'onclick' and vice versa. If the event parameter is missing/empty/undefined, all event handlers are removed from the control. If the listener parameter is missing/empty/undefined, all handlers of the specified event are removed. If the method parameter is missing/empty/undefined, the listener[type]() function is used to compare and remove the handler(s).

The following example removes the click event handler from the control:

 oTree.off("click");

where oTree is an object of Tree type.

This sample is equivalent to:

 oTree.Listeners.Remove("onclick");

The following example removes all event handlers from the control:

 oTree.off();

where oTree is an object of Tree type.

This sample is equivalent to:

 oTree.Listeners.Clear();

or

 oTree.Listeners.Remove();

The on() method adds an event listener to the specified event or defines a keyboard shortcut. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts.

The following example logs event details when the control is clicked:

oTree.on("click", function(oEvent)
{
  console.log(oEvent);
});

where oTree is an object of Tree type.

This sample is quivalent of 

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

The onaddcolumn() method occurs once a new column has been added to the control. The Columns.Add method adds a new column to the control, and once the column is added, the onaddcolumn() method is called. You can use the onaddcolumn() method to be notified once a new column has been added to the control, and for instance, display the new column in your application.

The following samples display the column being added:

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

or

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

or

oTree.on("addcolumn", function (oEvent)
{
 console.log(oEvent);
})

where oTree is an object of Tree type

The onaddgroupitem() method notifies the control once a group-item is added. The GroupItem/GetGroupItem() method indicates a group-item if zero or positive (specifies the index of the column that has been grouped by). The AllowGroupBy property specifies whether the user can group by dragging a column's header into the control's sortbar. When the user groups by dragging a column's header into the control's sortbar, the onaddgroupitem event is triggered for each new group-item created as a result of grouping. For instance, if the user groups by a column that has three unique values, three group-items are created and added to the control's items collection, and consequently, the onaddgroupitem event is triggered three times, once for each new group-item added.

The following samples display the group-item being added:

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

or

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

or

oTree.on("addgroupitem", function (oEvent)
{
 console.log(oEvent);
})

where oTree is an object of Tree type

The onadditem() method notifies your application that a new item has been added to the control. The Items.Add method adds a new item to the control, and once the item is added, the onadditem() method is called. You can use the onadditem() method to be notified once a new item has been added to the control, and for instance, display the new item in your application. The Item.Add method adds a new child item to a specific item, and once the child-item is added, the onadditem() method is called. You can use the onadditem() method to be notified once a new child-item has been added to a specific item, and for instance, display the new child-item in your application.

The following samples display the item being added:

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

or

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

or

oTree.on("additem", function (oEvent)
{
 console.log(oEvent);
})

where oTree is an object of Tree type

The onerror() method occurs once the control encountered an error. The event may occur when Import method or Data property import data that is not well-formed, or when the control encounters an error while loading a file (e.g., due to CORS policy or invalid format). The onload event occurs once the control loads or imports data. The OnErrorChooseFile property specifies whether the control displays an input-file to let user choose a local filte to import, as soon as an error occurs.

The following samples display the error once it occurs:

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

or

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

or

oTree.on("error", function (oEvent)
{
 console.log(oEvent);
})

where oTree is an object of Tree type

The onfilter event notifies your application once the control's filter has been changed. The onfilter event is triggered when the user applies a new filter or clears the existing filter. The Column.Filter property specifies the filter applied on the column. The control's filter is applied by setting a value to the control's filter-bar (if enabled) or by calling the ApplyFilter() method. When the user applies a new filter or clears the existing filter, the onfilter event is triggered as a result of filtering. The Column.DisplayFilterButton property specifies whether the filter button is displayed within the column's header. The FilterBarVisible property specifies whether the control's filter-bar is visible to let the user apply a filter by setting a value to the filter-bar. The ApplyFilter() method applies a filter to the control. The ClearFilter() method clears the control's filter.

The following samples display a message once a filter is applied or cleared:

oTree.onfilter = function ()
{
 console.log("onfilter");
}

or

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

or

oTree.on("filter", function ()
{
 console.log("onfilter");
})

where oTree is an object of Tree type

The onload() method occurs once the control loads or imports data. The Import method or Data property may trigger the onload event once the control imports data, or when the control loads data from a file. The onload event is also triggered when the control is initialized with data (for instance, when the control is initialized with a non-empty Data property). The onload event is not triggered when the control's data is cleared (for instance, by calling the Clear() method). The onerror event may occur when Import method or Data property import data that is not well-formed, or when the control encounters an error while loading a file (e.g., due to CORS policy or invalid format). The onload event occurs once the control loads or imports data. The OnErrorChooseFile property specifies whether the control displays an input-file to let user choose a local filte to import, as soon as an error occurs.

The following samples display a message once the control loads or imports new data (for instance, the user drags and drops a file into the control):

oTree.onload = function ()
{
 alert("onload");
}

or

oTree.Listeners.Add("onload", function ()
{
 alert("onload");
})

or

oTree.on("load", function ()
{
 alert("onload");
})

where oTree is an object of Tree type

The onremovecolumn() method notifies your application that a column has been removed from the control. The Columns.Remove method removes a column from the control, and once the column is removed, the onremovecolumn() method is called. You can use the onremovecolumn() method to be notified once a column has been removed from the control, and for instance, remove the column from your application.

The following samples display the column being removed:

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

or

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

or

oTree.on("removecolumn", function (oEvent)
{
 console.log(oEvent);
})

where oTree is an object of Tree type

The onremoveitem() method occurs once an item has been removed from the Items collection. The Items.Remove method removes an item from the control. The Item.Remove method removes the item itself. The RemoveSelection method removes all selected items from the control, and once the items are removed. You can use the onremoveitem() method to be notified once an item has been removed from the control, and for instance, remove the item from your application.

The following samples display the item being removed:

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

or

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

or

oTree.on("removeitem", function (oEvent)
{
 console.log(oEvent);
})

where oTree is an object of Tree type

The onselchange() method notifies that the control's selection has been changed (items). The onselchange event is fired once the control's selection has been changed, and the event handler receives the control's selection as a parameter. The oEvent parameter of onselchange event handler holds the control's selection. The Selection property defines the control's selection, and the onselchange event is fired once the Selection property is changed. The onselchange event is fired even if the selection is changed by user interaction or programmatically. The Selected property defines whether the item is selected.

The following samples display the control's selection once it changes:

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

or

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

or

oTree.on("selchange", function (oEvent)
{
 console.log(oEvent);
})

where oTree is an object of Tree type

The onsort event notifies your application once a column gets sorted or grouped by. The Sorts property specifies the sort order of the columns. When the user clicks a column's header to sort by that column, the onsort event is triggered as a result of sorting. The onsort event notifies the control once the sort order has been changed for one or more columns, for instance, when a new column has been added to the sorter (Column.SortOrder method), a column has been removed from the sorter (Remove() method), a column changes its position within the sorter, or a column changes its sort-order. The AllowGroupBy property specifies whether the user can group by dragging a column's header into the control's sortbar. When the user groups by dragging a column's header into the control's sortbar, the onsort event is triggered as a result of grouping. The AllowSort property specifies whether the column is sortable.

The following samples display the sort-operation once the user sorts or group-by a column:

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

or

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

or

oTree.on("sort", function (oEvent)
{
 console.log(oEvent);
})

where oTree is an object of Tree type