SUI.TreeView
SUI.TreeView is an asynchronious tree control. In a tree control a set of items is displayed in a hierarchical manner, allowing the user to expand sections to dig deeper into the hierarchy. This control is always loaded with server side data, so it will not work on your desktop alone.
Extends
SUI.Box
Defined in:
TreeView.js
| Attr. | Name / Description |
|---|---|
| public |
SUI.TreeView(see, arg) Create a treeview contol. If you want to do your own xhr because of extra error handling f.i. you can pass in your own function. |
| Attr. | Type | Name | Description |
|---|---|---|---|
| private | SUI.Border |
The box's border. |
|
| private | int |
The bottom position of the box. |
|
| private | HTMLElementNode |
The box's element node. |
|
| private | int |
The height of the box. |
|
| private | int |
The left position of the box. |
|
| private | int |
The listeners array. |
|
| private | int |
The maximum height of the box. |
|
| private | int |
The maximum width of the box. |
|
| private | int |
The minimum height of the box. |
|
| private | int |
The minimum width of the box. |
|
| private | SUI.Padding |
The box's padding. |
|
| private | SUI.Box |
The box's parent element. |
|
| private | int |
The right position of the box. |
|
| private | int |
The top position of the box. |
|
| private | int |
The width of the box. |
|
| public |
Size of the icon (and the indent) |
||
| public |
Top and bottom border row width of a node |
||
| public |
Height of a node row (CSS, thus including borders and padding) |
||
| public |
Height of a node row (CSS, thus including borders) |
||
| public |
Left padding of the text in a node row |
||
| public |
Right padding of the text in a node row |
| Attr. | Type | Name / Description |
|---|---|---|
| public |
absPos() Get the absolute position (top/left) of this box on the page. Note: You can only use this function if the HTML content of the page is fully rendered. |
|
| public |
addClass(cls) Add a CSS class name to the class list of the HTML element associated with the box. |
|
| public |
addListener(type, listener) Add/register a listener function. This way it is possible to register more than one listener function on one target. |
|
| public | SUI.Border |
border(b) Get or set the border definition of the box. |
| public | int |
bottom(b) Get or set the bottom of the box. |
| public |
callListener(type) Call a listener function. Execute the default and additional listener functions. Note: the framework should not execute the default listeners directly but always through this method to ensure the execution of additional listener functions. |
|
| public | int |
Get the client height of the box. The client height is the height of the box minus the top and bottom border and padding width. |
| public | int |
Get the client width of the box. The client width is the width of the box minus the left and right border and padding width. |
| public | Object |
Return the data that was selected at the last context menu selection. Note that this data persist after the context menu is removed and stays there till the next context menu is requested. |
| public |
display() Display the box. Set the CSS positions of the element's box(es) and of the children of the box. |
|
| public |
draw() Draw the box on the screen. It executes a two phase process: a layout phase in which the size and positions of the box (and of it's contents, for more complex derivatives) is calculated and a display phase in which the CSS size and position of the box's (and possible it's child elements) is set. |
|
| public | HTMLElementNode |
el() Get the HTML element node of the box. |
| public | int |
height(h) Get or set the height of the box. |
| public |
iconFunction(fn) Set a custom function for the icons to uses. It operates on the type set in the data. |
|
| public |
layOut() Lay out the box. Calculate the position of the box and its contents. The layOut function of a simple box does nothing, but it's important for more complex objects extended from SUI.Box. The layOut mechanism will set the size and position of the child boxes of the box based on the on the available space and within the restrictions of the box's minimum and maximum width and height. So the job of the overridden layOut method is to recalculate the size and position of all the child elements of the box when the layout manager sets the size of the box and calls the box's layOut method. |
|
| public | int |
left(l) Get or set the left of the box. |
| public |
loadData(arg) Load the data into the tree control |
|
| public | int |
maxHeight(mh) Get or set the maximum height of the box. |
| public | int |
maxWidth(mw) Get or set the maximum width of the box. |
| public | int |
minHeight(mh) Get or set the minimum height of the box. |
| public | int |
minWidth(mw) Get or set the minimum width of the box. |
| public |
onContextMenu(x, y) onContextMenu event handler: is executed when the user uses the context menu click on a node. |
|
| public |
onSelect() onSelect event handler: is executed when the user uses selects a node. Use this to add an action to your selection. |
|
| public |
onSelectionChange event handler: is executed when the selection changes to another node. Use this to update your GUI (like enabling buttons) |
|
| public | SUI.Padding |
padding(p) Get or set the padding definition of the box. |
| public | SUI.Box |
parent(p) Get or set the parent box of the box. When setting the parent the box's element node will be appended to the parent box's HTML element node. |
| public |
Remove a box from the DOM tree. |
|
| public |
removeClass(cls) Remove a CSS class name from the class list of the HTML element associated with the box. |
|
| public | int |
right(r) Get or set the right of the box. |
| public |
Transfer the tree selection to the node that was selected by the context menu. This will also execute the onSelect handler. |
|
| public | Object |
Return the data that is currently selected. |
| public |
setDim() Set the CSS dimensions of this box and it's borders and padding. This is typically used in display functions to display boxes at the size and position that was calculated during layout. |
|
| public |
setPos() Set the CSS postion of this box. This is typically used in display functions to display boxes at position that was calculated during layout. Note: use setDim if you want to set the position and size of the box. |
|
| public |
setRect(t, l, w, h) Set the top, left, width and height of a box in one go. |
|
| public | int |
top(t) Get or set the top of the box. |
| public | int |
width(w) Get or set the width of the box. |
Constructor
- public SUI.TreeView(see, object arg)
-
Create a treeview contol. If you want to do your own xhr because of extra error handling f.i. you can pass in your own function.
Parameters:
Name Type Description see base class Function arg.xhr User supplied xml http request function in the form of function({String} url, {Function} fn) (optional) String arg.dataUrl Url to load the root node(s) View source: TreeView.js, line 57
Members
- private SUI.Border _border
-
The box's border.
Inherited From: SUI.Box#_border
- private int _bottom
-
The bottom position of the box.
Inherited From: SUI.Box#_bottom
- private HTMLElementNode _el
-
The box's element node.
Inherited From: SUI.Box#_el
- private int _height
-
The height of the box.
Inherited From: SUI.Box#_height
- private int _left
-
The left position of the box.
Inherited From: SUI.Box#_left
- private int _listeners
-
The listeners array.
Inherited From: SUI.Box#_listeners
- private int _maxHeight
-
The maximum height of the box.
Inherited From: SUI.Box#_maxHeight
- private int _maxWidth
-
The maximum width of the box.
Inherited From: SUI.Box#_maxWidth
- private int _minHeight
-
The minimum height of the box.
Inherited From: SUI.Box#_minHeight
- private int _minWidth
-
The minimum width of the box.
Inherited From: SUI.Box#_minWidth
- private SUI.Padding _padding
-
The box's padding.
Inherited From: SUI.Box#_padding
- private SUI.Box _parent
-
The box's parent element.
Inherited From: SUI.Box#_parent
- private int _right
-
The right position of the box.
Inherited From: SUI.Box#_right
- private int _top
-
The top position of the box.
Inherited From: SUI.Box#_top
- private int _width
-
The width of the box.
Inherited From: SUI.Box#_width
- public ICONS_SIZE
-
Size of the icon (and the indent)
View source: TreeView.js, line 107
- public ROW_BORDER_WIDTH
-
Top and bottom border row width of a node
View source: TreeView.js, line 92
- public ROW_HEIGHT
-
Height of a node row (CSS, thus including borders and padding)
View source: TreeView.js, line 82
- public ROW_PADDING_TOP
-
Height of a node row (CSS, thus including borders)
View source: TreeView.js, line 87
- public TEXT_PADDING_LEFT
-
Left padding of the text in a node row
View source: TreeView.js, line 97
- public TEXT_PADDING_RIGHT
-
Right padding of the text in a node row
View source: TreeView.js, line 102
Methods
- public absPos()
-
Get the absolute position (top/left) of this box on the page. Note: You can only use this function if the HTML content of the page is fully rendered.
Inherited From: SUI.Box#absPos
- public addClass( String cls)
-
Add a CSS class name to the class list of the HTML element associated with the box.
Parameters:
Name Type Description String cls the CSS class name to add Inherited From: SUI.Box#addClass
- public addListener( String type, Function listener)
-
Add/register a listener function. This way it is possible to register more than one listener function on one target.
Parameters:
Name Type Description String type The listener type (i.e. "onClick", "onOK", etc). Function listener The listener function. Inherited From: SUI.Box#addListener
- public SUI.Border border( SUI.Border b)
-
Get or set the border definition of the box.
Parameters:
Name Type Argument Description SUI.Border b <optional>
The new border definition (or none to use this method as a getter). Returns:
SUI.Border the border definition of the box (or null if this method was used as a setter).
Inherited From: SUI.Box#border
- public int bottom( int b)
-
Get or set the bottom of the box.
Parameters:
Name Type Argument Description int b <optional>
The new bottom of the box (or none to use this method as a getter). Returns:
int The bottom of the box (or null if this method was used as a setter).
Inherited From: SUI.Box#bottom
- public callListener( String type)
-
Call a listener function. Execute the default and additional listener functions. Note: the framework should not execute the default listeners directly but always through this method to ensure the execution of additional listener functions.
Parameters:
Name Type Description String type The listener type (i.e. "onClick", "onOK", etc). Inherited From: SUI.Box#callListener
- public int clientHeight()
-
Get the client height of the box. The client height is the height of the box minus the top and bottom border and padding width.
Returns:
int The client height of the box.
Inherited From: SUI.Box#clientHeight
- public int clientWidth()
-
Get the client width of the box. The client width is the width of the box minus the left and right border and padding width.
Returns:
int The client width of the box.
Inherited From: SUI.Box#clientWidth
- public Object contextMenuData()
-
Return the data that was selected at the last context menu selection. Note that this data persist after the context menu is removed and stays there till the next context menu is requested.
Returns:
Object a An object with the current node data (a node from the xhr request)
View source: TreeView.js, line 116
- public display()
-
Display the box. Set the CSS positions of the element's box(es) and of the children of the box.
Inherited From: SUI.Box#display
- public draw()
-
Draw the box on the screen. It executes a two phase process: a layout phase in which the size and positions of the box (and of it's contents, for more complex derivatives) is calculated and a display phase in which the CSS size and position of the box's (and possible it's child elements) is set.
Inherited From: SUI.Box#draw
- public HTMLElementNode el()
-
Get the HTML element node of the box.
Returns:
HTMLElementNode the HTML element node of the box.
Inherited From: SUI.Box#el
- public int height( int h)
-
Get or set the height of the box.
Parameters:
Name Type Argument Description int h <optional>
The new height of the box (or none to use this method as a getter). Returns:
int The height of the box (or null if this method was used as a setter).
Inherited From: SUI.Box#height
- public iconFunction( Function fn)
-
Set a custom function for the icons to uses. It operates on the type set in the data.
Parameters:
Name Type Description Function fn An function that returns the location of the icon, this function has one parameter indicating the icon's type. View source: TreeView.js, line 126
- public layOut()
-
Lay out the box. Calculate the position of the box and its contents. The layOut function of a simple box does nothing, but it's important for more complex objects extended from SUI.Box. The layOut mechanism will set the size and position of the child boxes of the box based on the on the available space and within the restrictions of the box's minimum and maximum width and height. So the job of the overridden layOut method is to recalculate the size and position of all the child elements of the box when the layout manager sets the size of the box and calls the box's layOut method.
Inherited From: SUI.Box#layOut
- public int left( int l)
-
Get or set the left of the box.
Parameters:
Name Type Argument Description int l <optional>
The new left of the box (or none to use this method as a getter). Returns:
int The left of the box (or null if this method was used as a setter).
Inherited From: SUI.Box#left
- public loadData( Object arg)
-
Load the data into the tree control
Parameters:
Name Type Description Object arg Object in which the follow entries can be set - {int[]|string[]} openNodes An object array containing the (data) ids of the nodes that are initially open - {String} dataUrl Url to load the initial node(s) - {int|string} selected (Data) id of the currently selected node View source: TreeView.js, line 138
- public int maxHeight( int mh)
-
Get or set the maximum height of the box.
Parameters:
Name Type Argument Description int mh <optional>
The new maximum height of the box (or none to use this method as a getter). Returns:
int The maximum height of the box (or null if this method was used as a setter).
Inherited From: SUI.Box#maxHeight
- public int maxWidth( int mw)
-
Get or set the maximum width of the box.
Parameters:
Name Type Argument Description int mw <optional>
The new maximum width of the box (or none to use this method as a getter). Returns:
int The maximum width of the box (or null if this method was used as a setter).
Inherited From: SUI.Box#maxWidth
- public int minHeight( int mh)
-
Get or set the minimum height of the box.
Parameters:
Name Type Argument Description int mh <optional>
The new minimum height of the box (or none to use this method as a getter). Returns:
int The minimum height of the box (or null if this method was used as a setter).
Inherited From: SUI.Box#minHeight
- public int minWidth( int mw)
-
Get or set the minimum width of the box.
Parameters:
Name Type Argument Description int mw <optional>
The new minimum width of the box (or none to use this method as a getter). Returns:
int The minimum width of the box (or null if this method was used as a setter).
Inherited From: SUI.Box#minWidth
- public onContextMenu( int x, int y)
-
onContextMenu event handler: is executed when the user uses the context menu click on a node.
Parameters:
Name Type Description int x The x location of the click int y The y location of the click View source: TreeView.js, line 172
- public onSelect()
-
onSelect event handler: is executed when the user uses selects a node. Use this to add an action to your selection.
View source: TreeView.js, line 178
- public onSelectionChange()
-
onSelectionChange event handler: is executed when the selection changes to another node. Use this to update your GUI (like enabling buttons)
View source: TreeView.js, line 184
- public SUI.Padding padding( SUI.Padding p)
-
Get or set the padding definition of the box.
Parameters:
Name Type Argument Description SUI.Padding p <optional>
The new padding definition (or none to use this method as a getter). Returns:
SUI.Padding The padding definition of the box (or null if this method was used as a setter).
Inherited From: SUI.Box#padding
- public SUI.Box parent( SUI.Box p)
-
Get or set the parent box of the box. When setting the parent the box's element node will be appended to the parent box's HTML element node.
Parameters:
Name Type Description SUI.Box p The parent box for this box (or none to use this method as a getter). Returns:
SUI.Box The parent box of the box (or null if this method was used as a setter).
Inherited From: SUI.Box#parent
- public removeBox()
-
Remove a box from the DOM tree.
Inherited From: SUI.Box#removeBox
- public removeClass( String cls)
-
Remove a CSS class name from the class list of the HTML element associated with the box.
Parameters:
Name Type Description String cls The CSS class name to remove. Inherited From: SUI.Box#removeClass
- public int right( int r)
-
Get or set the right of the box.
Parameters:
Name Type Description int r The new right of the box (or none to use this method as a getter). Returns:
int The right of the box (or null if this method was used as a setter).
Inherited From: SUI.Box#right
- public selectContextMenuNode()
-
Transfer the tree selection to the node that was selected by the context menu. This will also execute the onSelect handler.
View source: TreeView.js, line 190
- public Object selectedData()
-
Return the data that is currently selected.
Returns:
Object a An object with the current node data (a node from the xhr request)
View source: TreeView.js, line 199
- public setDim()
-
Set the CSS dimensions of this box and it's borders and padding. This is typically used in display functions to display boxes at the size and position that was calculated during layout.
Inherited From: SUI.Box#setDim
- public setPos()
-
Set the CSS postion of this box. This is typically used in display functions to display boxes at position that was calculated during layout. Note: use setDim if you want to set the position and size of the box.
Inherited From: SUI.Box#setPos
- public setRect( int | SUI.Box t, int l, int w, int h)
-
Set the top, left, width and height of a box in one go.
Parameters:
Name Type Argument Description int | SUI.Box t The new top of the box or another reference box to copy the values from. int l <optional>
The new left of the box (if the t parameter wasn't a reference Box). int w <optional>
The new width of the box (if the t parameter wasn't a reference Box). int h <optional>
The new length of the box (if the t parameter wasn't a reference Box). Inherited From: SUI.Box#setRect
- public int top( int t)
-
Get or set the top of the box.
Parameters:
Name Type Argument Description int t <optional>
The new top of the box (or none to use this method as a getter). Returns:
int The top of the box (or null if this method was used as a setter).
Inherited From: SUI.Box#top
- public int width( int w)
-
Get or set the width of the box.
Parameters:
Name Type Argument Description int w <optional>
The new width of the box (or none to use this method as a getter). Returns:
int The width of the box (or null if this method was used as a setter).
Inherited From: SUI.Box#width
