new Tree(client, oOptionsopt)
The ExTree/JS component allows you to display and edit hierarchical-data. Features include:
- Multiple-Columns
- Multiple-Views
- Drag and Drop
- Group-By
- Filter-Prompt
- Conditional-Format
- Total Fields
- and much more
Every option of the Tree.Options type has associated a property of the control. For instance, the option:
allowActions {string}, customizes the actions the user can perform once the user clicks or touches the controlis associated with the property:
AllowActions {string}, customizes the actions the user can perform once the user clicks or touches the controlwhich means that the following statements are equivalent:
oTree.Options = {allowActions: "scroll"}where oTree is an object of Tree type
oTree.SetOptions({allowActions: "scroll"})
oTree.AllowActions = "scroll"
oTree.SetAllowActions("scroll")
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
client |
any | The client parameter indicates the control's client area as:
|
|
oOptions |
object |
<optional> |
An object of Tree.Options type that defines different options to display the control. |
Requires:
- module:exontrol.commmon.min.js
- module:exontrol.menu.min.js
Requires
- module:exontrol.commmon.min.js
- module:exontrol.menu.min.js
Classes
Members
Listeners :exontrol.Lts
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 Events section lists the events the component supports.
Type:
- exontrol.Lts
Example
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);
});
where oTree is an object of Tree type
Listeners
Shortcuts :exontrol.Sts
The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. 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.
Type:
- exontrol.Sts
Example
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
Shortcuts
oTV :TV
The oTV field defines the base tree-view of control. 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.
Type:
(static, readonly) ColumnsFloatBarVisibleEnum :number
The Tree.ColumnsFloatBarVisibleEnum type indicates the type of columns, the columns floatbar can display.
Type:
- number
Properties:
Name | value | Type | Description |
---|---|---|---|
exColumnsFloatBarHidden |
0 |
number | The columns floatbar is hidden |
exColumnsFloatBarVisible |
1 |
number | The columns floatbar is visible (inside and anchored to the right-side of the control) |
exColumnsFloatBarVisibleIncludeGroupByColumns |
1 |
number | The columns floatbar is visible, and it displays dragable (AllowDragging property) and groupable (AllowGroupBy property) columns of the control. |
exColumnsFloatBarVisibleIncludeCheckColumns |
2 |
number | The columns floatbar is visible, and it displays dragable (AllowDragging property), and a check-box for each Column to update its Visible property. |
exColumnsFloatBarVisibleIncludeHiddenColumns |
4 |
number | The columns floatbar is visible, and it displays dragable (AllowDragging property) and hidden (Visible property) columns of the control. |
exColumnsFloatBarFloat |
256 |
number | The columns floatbar is visible (shows as floated) |
(static, readonly) FilterBarVisibleEnum :number
The Tree.FilterBarVisibleEnum type defines whether the control's filter-bar is visible or hidden.
Type:
- number
Properties:
Name | value | Type | Description |
---|---|---|---|
exFilterBarHidden |
0 |
number | No filter bar is shown while there is no filter applied. The control's filter bar is automatically displayed as soon a a filter is applied. |
exFilterBarPromptVisible |
1 |
number | The exFilterBarPromptVisible flag specifies that the control's filter bar displays the filter prompt. The exFilterBarPromptVisible, exFilterBarVisible, exFilterBarCaptionVisible flag , forces the control's filter-prompt, filter bar or filter bar description ( even empty ) to be shown. If missing, no filter prompt is displayed. The FilterBarPrompt property to specify the HTML caption being displayed in the filter bar when the filter pattern is missing. |
exFilterBarVisible |
2 |
number | The exFilterBarVisible flag forces the control's filter bar to be shown, no matter if any filter is applied. If missing, no filter bar is displayed while the control has no filter applied. |
exFilterBarCaptionVisible |
4 |
number | The exFilterBarCaptionVisible flag forces the control's filter bar to display the FilterBarCaption property. |
exFilterBarSingleLine |
16 |
number | The exFilterBarSingleLine flag 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 |
number | The exFilterBarToggle flag specifies that the user can close the control's filter bar ( resets 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. The exFilterBarToggle flag must be combined with exFilterBarPromptVisible, exFilterBarVisible or exFilterBarCaptionVisible. |
exFilterBarShowCloseIfRequired |
512 |
number | The exFilterBarShowCloseIfRequired flag indicates that the close button of the control's filter bar is displayed only if the control has any currently filter applied. |
exFilterBarShowCloseOnRight |
1024 |
number | The exFilterBarShowCloseOnRight flag specifies that the close button of the control's filter bar should be displayed on the right side. |
exFilterBarCompact |
2048 |
number | The exFilterBarCompact flag 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 |
number | The exFilterBarShort flag specifies that the control's filter bar is displayed only on the default-view (has effect if the control displays multiple views) |
(static, readonly) FilterIncludeEnum :number
The Tree.FilterIncludeEnum indicates the type of columns, the columns floatbar can display.
Type:
- number
Properties:
Name | value | Type | Description |
---|---|---|---|
exItemsWithoutChilds |
0 |
number | Items (and parent-items) that match the filter are shown (no child-items are included) |
exItemsWithChilds |
1 |
number | Items (parent and child-items) that match the filter are shown |
exRootsWithoutChilds |
2 |
number | Only root-items (excludes child-items) that match the filter are displayed |
exRootsWithChilds |
3 |
number | Root-items (and child-items) that match the filter are displayed |
exMatchingItemsOnly |
4 |
number | Shows only the items that matches the filter (no parent or child-items are included) |
exMatchIncludeParent |
240 |
number | 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 |
(static, readonly) FilterListEnum :number
The Tree.FilterListEnum type specifies the type of items being included in the column's drop down list filter.
Type:
- number
Properties:
Name | value | Type | Description |
---|---|---|---|
exAllItems |
0 |
number | The filter's list includes all items in the column. |
exVisibleItems |
1 |
number | The filter's list includes only visible (filtered) items from the column. The visible items include child items of collapsed items. |
exNoItems |
2 |
number | The filter's list includes no item from the column. |
exLeafItems |
3 |
number | The filter's list includes the leaf items only. A leaf item is an item with no child items. |
exRootItems |
4 |
number | The filter's list includes the root items only. A root item has no parent item. |
exSortItemsDesc |
16 |
number | Sorts descending the items of the filter's list. If none of the exSortItemsAsc or exSortItemsDesc is present, the list is built as the items are displayed in the control. |
exSortItemsAsc |
32 |
number | Sorts ascending the items of the filter's list. If none of the exSortItemsAsc or exSortItemsDesc is present, the list is built as the items are displayed in the control. |
exShowCheckBox |
256 |
number | Displays a check-box for each item within the filter's list. |
exShowExclude |
8192 |
number | Shows or hides the Exclude field. The exFilterExclude flag excludes programmatically the selected items in the drop down filter panel. |
exShowBlanks |
16384 |
number | The filter's list includes (Blanks) and (NonBlanks) items |
(static, readonly) FilterPromptEnum :number
The Tree.FilterPromptEnum type specifies the type of filter-prompt.
Type:
- number
Properties:
Name | value | Type | Description |
---|---|---|---|
exFilterPromptContainsAll |
1 |
number | The list includes the items that contains all specified sequences in the filter. Can be combined with exFilterPromptCaseSensitive, exFilterPromptStartWords, exFilterPromptEndWords or exFilterPromptWords |
exFilterPromptContainsAny |
2 |
number | 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 |
number | 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 |
number | 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 |
number | The filter indicates a pattern that may include wild characters to be used to filter the items in the list. The FilterBarPromptPattern property 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 The exFilterPromptPattern flag can be combined with exFilterPromptCaseSensitive only |
exFilterPromptCaseSensitive |
256 |
number | Filtering the list is case sensitive. Can be combined with exFilterPromptContainsAll, exFilterPromptContainsAny, exFilterPromptStartWith, exFilterPromptEndWith or exFilterPromptPattern. |
exFilterPromptStartWords |
4608 |
number | The list includes the items that starts with specified words, in any position. Can be combined with exFilterPromptContainsAll, exFilterPromptContainsAny, exFilterPromptStartWith or exFilterPromptEndWith. |
exFilterPromptEndWords |
8704 |
number | The list includes the items that ends with specified words, in any position. Can be combined with exFilterPromptContainsAll, exFilterPromptContainsAny, exFilterPromptStartWith or exFilterPromptEndWith. |
exFilterPromptWords |
12800 |
number | The filter indicates a list of words. Can be combined with exFilterPromptContainsAll, exFilterPromptContainsAny, exFilterPromptStartWith or exFilterPromptEndWith. |
(static, readonly) FilterTypeEnum :number
The Tree.FilterTypeEnum type defines the type of filter applies to a column.
Type:
- number
Properties:
Name | value | Type | Description |
---|---|---|---|
exAll |
0 |
number | No filter is applied |
exBlanks |
1 |
number | Includes only blank/empty items |
exNonBlanks |
2 |
number | Includes only non blank/empty items |
exPattern |
3 |
number | Includes only items that match the pattern. The Filter property defines the pattern. A pattern may contain the wild card characters '?' for any single character, '*' for zero or more occurrences of any character, '#' for any digit character, and [chars] indicates a group of characters. If any of the *, ?, # or | characters are preceded by a \ ( escape character ) it masks the character itself. Can be combined with exFilterDoCaseSensitive flag |
exDate |
4 |
number | Includes only items that fit the date interval. The Filter property of the Column object defines the interval of dates being used to filter items. The interval of dates should be as [dateFrom] to [dateTo]. If the dateFrom value is missing, the control includes only the items before the dateTo date, if the dateTo value is missing, the control includes the items after the dateFrom date. If both dates ( dateFrom and dateTo ) are present, the control includes the items between this interval of dates. For instance, the "2/13/2004 to" includes all items after 2/13/2004 inclusive, or "2/13/2004 to Feb 14 2005" includes all items between 2/13/2004 and 2/14/2004. |
exNumeric |
5 |
number | Includes only items of numeric type that check the expression. The expression supports operators like <, <=, =, <>, >= or > and numbers to define rules. For instance, the "> 10 < 100" filter indicates all numbers greater than 10 and less than 100. |
exCheck |
6 |
number | Includes only checked-items, while Filter property is "1" or unchecked-items if Filter is "0" |
exImage |
10 |
number | Includes only items that match the images within the Filter property. |
exFilter |
240 |
number | Includes only items that match the Filter property. Can be combined with exFilterDoCaseSensitive flag |
exFilterDoCaseSensitive |
256 |
number | By default, the column's filter is case-insensitive. Specifies a case-sensitive column's filter. Can be combined with exPattern or exFilter flag |
exFilterExclude |
512 |
number | The flag indicates that the Exclude field of the column is checked. The flag indicates that the items that match the filter are excluded from the list. |
(static, readonly) GridLinesEnum :number
The Tree.GridLinesEnum type defines the control's grid lines.
Type:
- number
Properties:
Name | value | Type | Description |
---|---|---|---|
exNoLines |
0 |
number | The control displays no grid lines. |
exAllLines |
-1 |
number | The control displays vertical and horizontal grid lines. |
exRowLines |
-2 |
number | The control shows grid lines for existing rows only. |
exHLines |
1 |
number | The control displays only the horizontal grid lines. |
exVLines |
2 |
number | The control displays only the vertical grid lines. |
(static, readonly) HeaderVisibleEnum :number
The Tree.HeaderVisibleEnum type specifies whether the control's header is visible or hidden.
Type:
- number
Properties:
Name | value | Type | Description |
---|---|---|---|
exHeaderHidden |
0 |
number | The control's header is hidden. |
exHeaderVisible |
-1 |
number | The control's header is visible. |
exHeaderVisibleExtendLevels |
1 |
number | The control's header is visible, and each column's header is extended to cover all levels of the header |
(static, readonly) LinesAtRootEnum :number
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.
Type:
- number
Properties:
Name | value | Type | Description |
---|---|---|---|
exNoLinesAtRoot |
0 |
number | No lines at root items |
exLinesAtRoot |
-1 |
number | The control links the root items |
exGroupLinesAtRoot |
1 |
number | The control shows no links between roots, and divides them as being in the same group |
exGroupLines |
2 |
number | The lines between root items are no shown, and the links show the items being included in the group |
exGroupLinesInside |
3 |
number | The lines between root items are no shown, and the links are shown between child only |
exGroupLinesInsideLeaf |
4 |
number | The lines between root items are no shown, and the links are shown for first and last visible child item |
exGroupLinesOutside |
5 |
number | The lines between root items are no shown, and the links are shown for first and last visible child item. A parent item that contains flat child items only, does not indent the child part. By a flat child we mean an item that does not contain any child item |
(static, readonly) SingleSelEnum :number
The Tree.SingleSelEnum type defines flags the singleSel/SetSingleSel/GetSingleSel method uses.
Type:
- number
Properties:
Name | value | Type | Description |
---|---|---|---|
exDisableSel |
0 |
number | The exDisableSel value specifies that the control's selection is disabled. |
exEnableSel |
1 |
number | The exEnableSel flag specifies that the control's selection is enabled (multiple-selection, unless the exSingleSel is set ). |
exSingleSel |
2 |
number | The exSingleSel flag specifies that the user can select a item only. |
exToggleSel |
4 |
number | The exToggleSel flag specifies that the item's selection state is toggled once the user clicks a item. |
exDisableCtrlSel |
8 |
number | The exDisableCtrlSel flag disables toggling the item's selection state when user clicks a item, while CTRL modifier key is pressed. |
exDisableShiftSel |
16 |
number | The exDisableShiftSel flag disables selecting items using the SHIFT key. |
exDisableDrag |
32 |
number | The exDisableDrag flag disables selecting items by drag. |
(static, readonly) SortOnClickEnum :number
The Tree.SortOnClickEnum type specifies the action that control takes when the user clicks the column's header.
Type:
- number
Properties:
Name | value | Type | Description |
---|---|---|---|
exNoSort |
0 |
number | The column is not sorted when user clicks the column's header. |
exDefaultSort |
-1 |
number | The column gets sorted when user the clicks the column's header. |
exUserSort |
1 |
number | The control displays the sort icons, but it doesn't sort the column (not supported) |
(static, readonly) SortOrderEnum :number
The Tree.SortOrderEnum type specifies the column's sort order.
Type:
- number
Properties:
Name | value | Type | Description |
---|---|---|---|
exSortNone |
0 |
number | The column is not sorted. |
exSortAscending |
1 |
number | The column is sorted ascending. |
exSortDescending |
2 |
number | The column is sorted descending. |
(static, readonly) SortTypeEnum :number
The Tree.SortTypeEnum type specifies the types of sort-as the column supports.
Type:
- number
Properties:
Name | value | Type | Description |
---|---|---|---|
exSortString |
0 |
number | The column's content is sorted as string (by default). |
exSortNumeric |
1 |
number | The column's content is sorted as numbers. |
exSortDate |
2 |
number | The column's content is sorted as dates. |
exSortByValue |
16 |
number | The column gets sorted by cell's value rather than cell's caption (the cell's caption include formatting) |
exSortByState |
32 |
number | The column gets sorted by cell's state (checked, unchecked) rather than cell's caption (the cell's caption include formatting) |
exSortByImage |
48 |
number | The column gets sorted by cell's image rather than cell's caption (the cell's caption include formatting) |
(static) type :string
The type field defines the full-name of the object (the constructor.name does not give the same name for minimized forms).
The Tree.type member always returns "Tree"
Type:
- string
- Since:
- 1.8
(static) version :string
The version field defines the version of the control.
The current version is 3.2
Type:
- string
Methods
AddTreeView(name, attributesopt) → {TV}
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.
Parameters:
Name | Type | Attributes | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
name |
string | defines the name of the tree-view to be created. It must be an unique name. The "tree" defines the control's default-tree view, and it is reserved. If missing, the "tree.split" is used instead | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
attributes |
exontrol.W.Options |
<optional> |
A exontrol.W.Options that defines the attributes of the window
Properties
|
Returns:
Returns the newly created view as an object of TV type. Returns null, in case there is already a window with specified name.
- Type
- TV
Example
oTree.AddTreeView("2nd",{Background: "black", Foreground: "white", Dock: 3}), adds a new tree-view panel, docked to the left-size, with a black-background and a white-foreground
AddTreeView
ApplyFilter()
The ApplyFilter() method (re-)applies the control's filter (if any)
BeginUpdate()
The BeginUpdate() method suspends the control's render until the EndUpdate() method is called. It maintains performance, while multiple changes occurs within the control. You can use the Update() method to perform multiple changes at once.
Cell(item, column) → {Cell}
The Cell() method returns the cell based on the item and column.
Parameters:
Name | Type | Description |
---|---|---|
item |
any | The item parameter could be any of the following:
|
column |
any | The column parameter could be any of the following:
|
Returns:
Returns null or an object of Cell type
- Type
- Cell
ChooseFile(error) → {object}
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
Parameters:
Name | Type | Description |
---|---|---|
error |
object | Specifies a string (message) or an object of DOMException (or any other) type that holds defines the error to display |
Returns:
Returns an object of {i,s} type that holds:
- i {HTMLInputElement}, specifies the "input-file" element to let user selects a local file to import into the control
- s {HTMLSpanElement}, indicates the "span" element that displays the error
- Type
- object
Clear()
The Clear() method clears the control's data (columns, items and filter)
ClearFilter()
The ClearFilter() method clears the control's filter (if any)
CollapseAll()
The CollapseAll() method collapses all items
Column(column) → {Column}
The Column() method returns the column based on its index or identifier/key. The Column(id) method is equivalent with Item(id) method of the Column object.
Parameters:
Name | Type | Description |
---|---|---|
column |
any | The column parameter could be any of the following:
|
Returns:
Returns null or an object of Column type
- Type
- Column
ConditionalFormat(id) → {ConditionalFormat}
The ConditionalFormat() method gets the conditional format by index, key or reference
Parameters:
Name | Type | Description |
---|---|---|
id |
any | The id parameter could be any of the following:
|
Returns:
Returns null(the conditional format is not found), or an object of ConditionalFormat type, if the conditional formats collection contains the giving id.
- Type
- ConditionalFormat
EndUpdate()
The EndUpdate() method resumes the control's render, after it is suspended by the BeginUpdate() method.
ExpandAll(bExpand)
The ExpandAll() method expands all items
Parameters:
Name | Type | Description |
---|---|---|
bExpand |
boolean | Specifies whether all items are expanded or collapsed (true if missing/empty/undefined) |
Export(exportOptsopt) → {any}
The Export() method exports the control's data as an array or CSV format. The GetData() method is equivalent with Export() method.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
exportOpts |
object |
<optional> |
Indicates the options to export control's data. The exportOpts object can include any of the following fields:
|
Returns:
Returns an array of [[value]] type or the control's data as as string in CSV format (only if the exportOpts.format field is "CSV")
- Type
- any
FindItem(caption, column, start) → {Item}
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.
Parameters:
Name | Type | Description |
---|---|---|
caption |
string | Specifies the caption to look for |
column |
any | Indicates the column being searched as any of the following:
|
start |
any | Specifies the item to start seraching from, as one of the following:
|
- Since:
- 3.3
Returns:
Returns undefined if not item is being found, or the reference to the item being found as an Item object
- Type
- Item
Example
FindItem(10248) {Item}, returns undefined if 10248 is not found in the first column, or returns the item
FindItem('Filimon', 'Name', 10) {Item}, searches the 'Name' column for the exact caption 'Filimon' starting after the item with index 10, and returns the item or undefined if not found
FindItem
GetCanvas() → {HTMLCanvasElement}
The GetCanvas() method returns the HTMLCanvasElement object where the control is currently running on.
- Since:
- 3.0
Returns:
Returns the HTMLCanvasElement object where the control is currently running on.
- Type
- HTMLCanvasElement
GetColumns() → {Columns}
The GetColumns() method returns the control's columns.
Returns:
Returns an object of Columns type
- Type
- Columns
Example
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
GetColumns
GetConditionalFormats() → {ConditionalFormats}
The GetConditionalFormats() method returns the control's conditional formats.
Returns:
Returns an object of ConditionalFormats type.
- Type
- ConditionalFormats
Example
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
GetConditionalFormats
GetData() → {any}
The GetData() method exports the control's data as an array or CSV format. The GetData() method is equivalent with Export() method. The ExportOptions type defines the default options to export data.
Returns:
Returns an array of [[value]] type or the control's data as as string in CSV format (only if the ExportOptions.format field is "CSV")
- Type
- any
GetItems() → {Items}
The GetItems() method returns the control's items.
Returns:
Returns an object of Items type.
- Type
- Items
Example
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
GetItems
GetLayout(oOptsopt) → {string}
The GetLayout() method saves the UI layout of the object to an encoded string. The layout can be restored using the SetLayout() method. 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
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
oOpts |
object |
<optional> |
An object of {iMask,eMask,base64,equal,eol} type that defines options to serialize the properties of the container as explained bellow:
|
Returns:
Returns a string that encodes the current UI layout for the entire object
- Type
- string
Example
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
GetLayout
GetSelection() → {array}
The GetSelection() method gets the control's selection.
Returns:
The GetSelection can return one of the following:
- null, indicates that the control has no selected-items
- {Item}, indicates a single-selected item (while the control support single-selection only)
- {Item[]}, defines a collection of selected-items within the control
- Type
- array
Example
The following statements are equivalents:
oTree.GetSelection(), gets the control's selection
oTree.Selection, gets the control's selection
where oTree is an object of Tree type
GetSelection
GetSingleSel() → {Tree.SingleSelEnum}
The GetSingleSel() method specifies whether the control supports single, multiple, toggle selection.
Returns:
Returns an OR combination of Tree.SingleSelEnum flags that specifies how to select items
- Type
- Tree.SingleSelEnum
GetStatistics() → {string}
The GetStatistics() method gives statistics data of objects being hold by the control
Returns:
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
- Type
- string
Example
The following statements are equivalents:
oTree.GetStatistics(), gives statistics data of objects being hold by the control
oTree.Statistics, gives statistics data of objects being hold by the control
where oTree is an object of Tree type
GetStatistics
Import(source, importOptsopt)
The Import() method imports data from CSV/XML format. The SetData(value) method is equivalent with Import(value) method.
Parameters:
Name | Type | Attributes | Description | |||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
source |
any | The source parameter may be one of the following:
|
||||||||||||||||||||||||||||||||||
importOpts |
object |
<optional> |
The importOpts parameter specifies options to import data into the control as object of ImportOptions type.
Properties
|
Example
"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)
Import
Item(item) → {Item}
The Item() method returns the item based on its index or identifier/key. The Item(id) method is equivalent with Item(id) method of the Items object
Parameters:
Name | Type | Description |
---|---|---|
item |
any | The item parameter could be any of the following:
|
Returns:
Returns null or an object of Item type
- Type
- Item
LoadXML(source)
The LoadXML() method loads an XML document (previously saved by an exontrol component)
Parameters:
Name | Type | Description |
---|---|---|
source |
any | The source parameter may be one of the following:
|
Refresh()
The Refresh() method refreshes the control
RemoveSelection() → {number}
The RemoveSelection() method deletes the selected-items.
Returns:
Returns the number of the items being deleted
- Type
- number
RemoveTreeView(name)
The RemoveTreeView() method removes the view already created by the AddTreeView() method
Parameters:
Name | Type | Description |
---|---|---|
name |
string | defines the name of the tree-view to be removed. The "tree" defines the control's default-tree view, and it can not be removed. |
Select(key)
The Select() method selects items based on the key.
Parameters:
Name | Type | Description |
---|---|---|
key |
string | Specifies a key which determines what Select method does:
|
- Since:
- 1.6
SelectAll(toSelect)
The SelectAll(toSelect) method selects all items within the control.
Parameters:
Name | Type | Description |
---|---|---|
toSelect |
any | Specifies the items to select within the control as one of the following values:
|
Example
SelectAll("vis"), selects the visible items only (for instance, it does not select items that does not match the filter)
SelectAll
SetData(value)
Imports data from CSV or XML files. The SetData(value) method is equivalent with Import(value) method. The ImportOptions type defines default options to import data.
Parameters:
Name | Type | Description |
---|---|---|
value |
any | Indicates the source of the data, as one of the following:
|
Example
"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)
SetData
SetLayout(layout, oOptsopt)
The SetLayout() method restores the UI layout of the object from an encoded string, previously returned by the GetLayout() method. 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
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
layout |
string | A string expression that defines the UI layout to apply | |
oOpts |
object |
<optional> |
An object of {iMask,eMask,base64,equal,eol} type that defines options to serialize the UI layout as explained bellow:
|
SetSelection(value)
The SetSelection() method sets the control's selection.
Parameters:
Name | Type | Description |
---|---|---|
value |
any | The value can be any of the following:
|
SetSingleSel(value)
The SetSingleSel() method changes the control's selection to single, multiple or toggle
Parameters:
Name | Type | Description |
---|---|---|
value |
Tree.SingleSelEnum | An OR combination of Tree.SingleSelEnum flags to specify how user can select items |
Example
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.
SetSingleSel
TreeView(name) → {TV}
The TreeView() method gets the tree-view by name (which was previously created by the AddTreeView() method)
Parameters:
Name | Type | Description |
---|---|---|
name |
string | defines the name of the tree-view to request ("tree" defines the control's default-tree view) |
- Since:
- 1.1
Returns:
Returns null or the an object of TV type associated with the name
- Type
- TV
UnselectAll()
The UnselectAll() method clears the control's selection.
Update(callback, thisArgopt)
The Update() method locks the control's paint during the callback, and invalidates the control once the method ends.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
callback |
callback | Indicates a callback to perform changes within the control | |
thisArg |
any |
<optional> |
Specifies the value of "this" keyword during the callback. If missing/empty/undefined the thisArg points to the control itself, as an object of Tree type |
feC(callback, thisArgopt)
The feC/forEachColumn() method invokes the callback for each column of the control (enumerates the columns, as they were added)
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
callback |
callback | A function of callback(oColumn) type that's called for every column, where oColumn is:
|
|
thisArg |
any |
<optional> |
Indicates the value of "this" keyword during the callback. If missing/empty/undefined the thisArg points to the control itself, as an object of Tree type. |
- Since:
- 3.3
feCU(callback, thisArgopt) → {any}
The feCU/forEachColumnUntil() method invokes the callback for each column of the control, until the callback returns a truly value (enumerates the columns, as they were added)
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
callback |
callback | A function of callback(oItem) {any} type that's called for every item, where oItem is
|
|
thisArg |
any |
<optional> |
Indicates the value of "this" keyword during the callback. If missing/empty/undefined the thisArg points to the control itself, as an object of Tree type. |
- Since:
- 3.3
Returns:
Returns the last-value of the callback
- Type
- any
feI(callback, thisArgopt)
The feI/forEachItem() method 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)
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
callback |
callback | A function of callback(oItem) type that's called for every item, where oItem is:
|
|
thisArg |
any |
<optional> |
Indicates the value of "this" keyword during the callback. If missing/empty/undefined the thisArg points to the control itself, as an object of Tree type. |
feIU(callback, thisArgopt) → {any}
The feIU/forEachItemUntil() method invokes the callback for each item of the control (unscrolled(top,bottom items) and scrolled items as well), until the callback returns a truly value (enumerates the items, as they were added)
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
callback |
callback | A function of callback(oItem) {any} type that's called for every item, where oItem is
|
|
thisArg |
any |
<optional> |
Indicates the value of "this" keyword during the callback. If missing/empty/undefined the thisArg points to the control itself, as an object of Tree type. |
Returns:
Returns the last-value of the callback
- Type
- any
Events
onaddcolumn
The onaddcolumn() method occurs once a new column has been added to the control
Parameters:
Name | Type | Description |
---|---|---|
oEvent |
Column | Indicates an object of Column type being added |
Example
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);
})
where oTree is an object of Tree type
onaddcolumn
onaddgroupitem
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)
Parameters:
Name | Type | Description |
---|---|---|
oEvent |
Item | Indicates the new group-item being created and added, as an object of Item type. |
Example
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);
})
where oTree is an object of Tree type
onaddgroupitem
onadditem
The onadditem() method notifies your application that a new item has been added to the control
Parameters:
Name | Type | Description |
---|---|---|
oEvent |
Item | Indicates an object of Item type being added |
Example
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);
})
where oTree is an object of Tree type
onadditem
onerror
The onerror() method occurs once the control encountered an error.
Parameters:
Name | Type | Description |
---|---|---|
oEvent |
object | Specifies an object of DOMException (or any other) type that holds information about the error |
Example
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);
})
where oTree is an object of Tree type
onerror
onfilter
The onfilter() method notifies your application once the control's filter has been changed
Example
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");
})
where oTree is an object of Tree type
onfilter
onload
The onload() method occurs once the control loads or imports data
Example
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");
})
where oTree is an object of Tree type
onload
onremovecolumn
The onremovecolumn() method notifies your application that a column has been removed from the control
Parameters:
Name | Type | Description |
---|---|---|
oEvent |
Column | Indicates an object of Column type being removed |
Example
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);
})
where oTree is an object of Tree type
onremovecolumn
onremoveitem
The onremoveitem() method occurs once an item has been removed from the Items collection
Parameters:
Name | Type | Description |
---|---|---|
oEvent |
Item | Indicates an object of Item type being removed |
Example
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);
})
where oTree is an object of Tree type
onremoveitem
onselchange
The onselchange() method notifies that the control's selection has been changed (items).
Parameters:
Name | Type | Description |
---|---|---|
oEvent |
object | holds the control's selection, as explained: |
Example
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);
})
where oTree is an object of Tree type
onselchange
onsort
The onsort() method notifies your application once a column gets sorted or grouped by.
Parameters:
Name | Type | Description |
---|---|---|
oEvent |
number | defines the sort-operation it occured as a combination of one or more flags:
|
Example
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);
})
where oTree is an object of Tree type
onsort