DBTreeview

(part of package 'Servoy Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

A Servoy Extra Component that displays a database tree view.

This is a reference page; many components have detailed usage guides here.

Properties

allowDrag

Can be used to enable dragging of nodes. Can either be a boolean value or a clientfunction that is executed in browser. Default value is false. Type: Object

---

allowDrop

Can be used to enable dropping of nodes. Can either be a boolean value or a clientfunction that is executed in browser. Default value is false. Type: Object

---

autoRefresh

If true, component listens to foundset changes and updates itself while visible. Type: Boolean Default Value: true

---

enabled

Flag indicating whether the tree view is enabled for user interaction. Type: Boolean Default Value: true

---

responsiveHeight

Height of the treeview, set only in responsive forms. Type: Number Default Value: 0

---

showLoadingIndicator

Flag indicating whether a loading indicator is displayed while data is loading. Type: Boolean Default Value: true

---

styleClass

CSS style classes applied to the tree view component. Type: Styleclass

---

visible

Flag indicating whether the tree view is visible. Type: Boolean Default Value: true

---

Events

onDrop(sourceNodePkPath,targetNodePkPath,indexInParent,event)

Called when a node is dropped as a result of a drag-n-drop.

Parameters:

• {Array<String>} sourceNodePkPath The primary key path of the source node.

• {Array<String>} targetNodePkPath The primary key path of the target node.

• {Number} indexInParent The index at which the node is dropped within its parent.

• {JSEvent} event The event object associated with the drop action.

---

onReady(event)

Fired when the tree view is ready to be displayed.

Parameters:

• {JSEvent} event The event object associated with the ready event.

---

API

addRoots(root)

Add foundset to the list of foundsets used to create the tree's root nodes.

Example:

myElement.addRoots(foundset);

Parameters:

• {Foundsetref} root The foundset reference to be added as a root node in the tree structure.

---

createRelationInfo(label,nRelationName)

Create relation info object used to set multiple child relations for a tree node

Parameters:

• {String} label The label for the relation, typically used as the display name for the tree node.

• {String} nRelationName The name of the relation used to define the child relations for the tree node.

Returns: CustomType<servoyextra-dbtreeview.relationInfo> An object containing the relation information for setting child relations in the tree structure.

---

getCheckBoxValues(datasource)

Returns array of pk of nodes that are checked for the datasource

Example:

var arrayPkChecked = myElement.getCheckBoxValues(databaseManager.getDataSource('example_data', 'categories'));

Parameters:

• {String} datasource The datasource identifier, representing the foundset for which the checked nodes' primary keys are retrieved.

Returns: Array<String> An array of primary keys of the nodes that are checked for the specified datasource.

---

getSelectionPath()

Returns the path of the currently selected node in the tree.

Example:

var selection = myElement.getSelectionPath();
// selection might be an array like: [{ id: 1, name: 'Root' }, { id: 2, name: 'Child' }]

Returns: Array<Object> An array representing the path of the selected node in the tree.

---

isNodeExpanded(pk)

Returns expand state of a node.

Example:

var expanded = myElement.isNodeExpanded([22])

Parameters:

• {Array<Object>} pk Array of each level id

Returns: Boolean True if the specified node is expanded, false if it is collapsed.

---

refresh()

Refresh the tree display.

Example:

myElement.refresh()

---

removeAllRoots()

Clears all foundset roots of the tree.

Example:

myElement.removeAllRoots();

---

setActionsCallBack(actions)

Set callback info for specific actions.

Example:

myElement.setActionsCallBack([[datasource, function1, arg1, element1], [datasource, function2, arg2, element2]]);

Parameters:

• {Array<CustomType<servoyextra-dbtreeview.action>>} actions An array of action objects, each defining a datasource, a callback function, its arguments, and the associated tree element for which the action should be triggered.

---

setCallBackInfo(datasource,callbackfunction,param)

Set callback info for a datasource foundset display.

Example:

myElement.setCallBackInfo(databaseManager.getDataSource('example_data', 'categories'),'myfunction','arg');

Parameters:

• {String} datasource The datasource identifier, representing the foundset to be displayed.

• {Function} callbackfunction Callback function name
• {String} param The parameter to pass to the callback function when it is invoked.

---

setCheckBoxAutoselectsChildren(datasource,autoselect)

Set the nodes whose checkbox will automatically autoselect children.

Example:

myElement.setCheckBoxAutoselectsChildren(databaseManager.getDataSource('example_data', 'categories'),false);

Parameters:

• {String} datasource The datasource identifier, representing the foundset for which the checkbox behavior is set.

• {Boolean} autoselect A boolean value indicating whether the checkboxes should automatically select or deselect child nodes when a parent node is selected.

---

setCheckBoxValueDataprovider(datasource,checkboxvaluedataprovider)

Set dataprovider for the checkbox displayed for a datasource foundset.

Example:

myElement.setCheckBoxValueDataprovider(databaseManager.getDataSource('example_data', 'categories'),'enabled');

Parameters:

• {String} datasource The datasource identifier, representing the foundset for which the checkbox value dataprovider is being set.

• {String} checkboxvaluedataprovider Dataprovider of the displayed checkbox

---

setChildSortDataprovider(datasource,childsortdataprovider)

Set the dataprovider name to retrieve column name and sort order for the child nodes. The provided data must be a string of form : column_name_used_for_sort sort_order(asc or desc)

Example:

myElement.setChildSortDataprovider(databaseManager.getDataSource('example_data', 'companies'),'company_sort');

Parameters:

• {String} datasource The datasource identifier, representing the foundset for which the child nodes' sort dataprovider is being set.

• {String} childsortdataprovider Dataprovider of the sort text

---

setExpandNode(pk,state)

Sets expand state of a node.

Example:

myElement.setExpandNode([22],true)

Parameters:

• {Array<Object>} pk Array of each level

• {Boolean} state Expand state

---

setHasCheckBoxDataprovider(datasource,hascheckboxdataprovider)

Set relation for displaying a datasource foundset.

Example:

myElement.setNRelationName(databaseManager.getDataSource('example_data', 'categories'),'companies_to_categories');

Parameters:

• {String} datasource The datasource identifier, representing the foundset for which the checkbox dataprovider is being set.

• {String} hascheckboxdataprovider Relation name

---

setHasCheckBoxValue(datasource,pks)

Set the nodes that should have checkbox for a datasource when no hascheckboxdataprovider is used

Example:

myElement.setHasCheckBoxValue(databaseManager.getDataSource('example_data', 'categories'),["1", "3", "5"]);

Parameters:

• {String} datasource The datasource identifier, representing the foundset for which the checkboxes should be applied.

• {Array<String>} pks Array of primary keys that should have a checkbox associated with them.

---

setImageURLDataprovider(datasource,imageurldataprovider)

Set dataprovider for the image displayed in tree node for a datasource foundset.

Example:

myElement.setImageURLDataprovider(databaseManager.getDataSource('example_data', 'categories'),'mymedia');

Parameters:

• {String} datasource The datasource identifier, representing the foundset for which the image dataprovider is being set.

• {String} imageurldataprovider The dataprovider that specifies the URL or path to the image displayed in the tree node.

---

setInitialCheckBoxValues(datasource,pks)

Set intial checked checkboxes for a datasource foundset when no checkboxdataprovider is used

Example:

myElement.setInitialCheckBoxValues(databaseManager.getDataSource('example_data', 'categories'),["1", "3", "5"]);

Parameters:

• {String} datasource The datasource identifier, representing the foundset where checkboxes are applied.

• {Array<String>} pks Array of pks that should have the checkbox checked

---

setMethodToCallOnCheckBoxChange(datasource,callbackfunction,param)

Set callback info for a datasource foundset checkbox display.

Example:

myElement.setMethodToCallOnCheckBoxChange(databaseManager.getDataSource('example_data', 'categories'),'myfunction','arg');

Parameters:

• {String} datasource The datasource identifier, representing the foundset for which the checkbox change callback is being set.

• {Function} callbackfunction Callback function name
• {String} param A parameter to be passed to the callback function when the checkbox state changes.

---

setMethodToCallOnDoubleClick(datasource,callbackfunction,param)

Set callback info for a datasource foundset doubleclick event.

Example:

myElement.setMethodToCallOnDoubleClick(databaseManager.getDataSource('example_data', 'categories'),'myfunction','arg');

Parameters:

• {String} datasource The datasource identifier, representing the foundset for which the double-click callback is being set.

• {Function} callbackfunction The name of the function to be invoked when a double-click event occurs on a node.
• {String} param A parameter to be passed to the callback function during invocation.

---

setMethodToCallOnRightClick(datasource,callbackfunction,param)

Set callback info for a datasource foundset right click event.

Example:

myElement.setMethodToCallOnRightClick(databaseManager.getDataSource('example_data', 'categories'),'myfunction','arg');

Parameters:

• {String} datasource The datasource identifier, representing the foundset for which the right-click callback is being set.

• {Function} callbackfunction Callback function name
• {String} param A parameter to be passed to the callback function during invocation.

---

setNRelationInfos(datasource,relationInfos)

Set n-relation infos (array of RelationInfo objects created using tree.createRelationInfo() for having multiple child relations for one node)

Parameters:

• {String} datasource The datasource identifier, representing the foundset for which the relations are being set.

• {Array<CustomType<servoyextra-dbtreeview.relationInfo>>} relationInfos An array of objects, defining multiple child relations for a single node.

---

setNRelationName(datasource,nrelationname)

Set relation for displaying a datasource foundset.

Example:

myElement.setNRelationName(databaseManager.getDataSource('example_data', 'categories'),'companies_to_categories');

Parameters:

• {String} datasource The datasource identifier, representing the foundset to be displayed using the specified relation.

• {String} nrelationname The name of the relation used to link the datasource with its child nodes.

---

setNodeLevelVisible(level,visible)

Sets expanded state for a tree level. Expanding the tree may cause performance issues.

Example:

myElement.setNodeLevelVisible(2,true)

Parameters:

• {Number} level The level of the tree to set the expanded state for.

• {Boolean} visible A boolean indicating whether the specified tree level should be expanded (true) or collapsed (false).

---

setSelectionPath(pk)

Sets selection node of the tree.

Example:

myElement.setSelectionPath([22])

Parameters:

• {Array<Object>} pk Array of each level id

---

setTextDataprovider(datasource,textdataprovider)

Set dataprovider for the text displayed from a datasource foundset.

Example:

myElement.setTextDataprovider(databaseManager.getDataSource('example_data', 'categories'),'categoryname');

Parameters:

• {String} datasource The datasource identifier, representing the foundset for which the text dataprovider is being set.

• {String} textdataprovider The dataprovider that specifies the text to be displayed for each node in the tree.

---

setToolTipTextDataprovider(datasource,tooltiptextdataprovider)

Set dataprovider for the tooltip text displayed for a datasource foundset.

Example:

myElement.setToolTipTextDataprovider(databaseManager.getDataSource('example_data', 'categories'),'tooltip');

Parameters:

• {String} datasource The datasource identifier, representing the foundset for which the tooltip text dataprovider is being set.

• {String} tooltiptextdataprovider Dataprovider of the displayed checkbox

---

updateCheckBoxValues(datasource,pks,state)

Update checkbox state for nodes

Example:

myElement.updateCheckBoxValues(databaseManager.getDataSource('example_data', 'categories'),["1", "3", "5"], true);

Parameters:

• {String} datasource The datasource identifier, representing the foundset for which the checkbox states are being updated.

• {Array<String>} pks Array of primary keys of the nodes for which the checkbox state should be updated.

• {Boolean} state True to check the checkbox, false to uncheck it.

---

Types

action

Represents an action configuration for tree view events. scripting type: CustomType<servoyextra-dbtreeview.action>

• callbackfunction

  • The callback function to be executed for the action.

  • Type: function
• datasource

  • The datasource identifier related to the action.

  • Type: string

• name

  • The unique name identifier for the action.

  • Type: string

• param

  • The parameter to be passed to the callback function.

  • Type: string

binding

Represents binding configuration for tree view nodes. scripting type: CustomType<servoyextra-dbtreeview.binding>

• callbackinfo

  • Callback information for tree view actions.

  • Type: callback

• checkboxvaluedataprovider

  • The dataprovider for the checkbox value displayed in nodes.

  • Type: string

• childsortdataprovider

  • The dataprovider that defines sorting for child nodes.

  • Type: string

• datasource

  • The datasource identifier for the foundset.

  • Type: string

• hasCheckboxValue

  • Represents the nodes that have an associated checkbox.

  • Type: object[]

• hascheckboxdataprovider

  • The dataprovider for enabling checkboxes in nodes.

  • Type: string

• imageurldataprovider

  • The dataprovider specifying the image URL for a node.

  • Type: string

• initialCheckboxValues

  • Represents the initial checkbox values for nodes.

  • Type: object[]

• methodToCallOnCheckBoxChange

  • Callback information for checkbox change events.

  • Type: callback

• methodToCallOnDoubleClick

  • Callback information for double-click events on nodes.

  • Type: callback

• methodToCallOnRightClick

  • Callback information for right-click events on nodes.

  • Type: callback

• nRelationInfos

  • An array of relation information objects for defining multiple child relations.

  • Type: relationInfo[]

• nrelationname

  • The relation name used for linking child nodes.

  • Type: string

• textdataprovider

  • The dataprovider for the text displayed in a node.

  • Type: string

• tooltiptextdataprovider

  • The dataprovider for the tooltip text displayed for nodes.

  • Type: string

callback

Represents callback information used in tree view operations. scripting type: CustomType<servoyextra-dbtreeview.callback>

• f

  • The callback function to be executed.

  • Type: function
• param

  • The parameter to be passed to the callback function.

  • Type: string

levelVisibilityType

Represents the visibility settings for a tree level. scripting type: CustomType<servoyextra-dbtreeview.levelVisibilityType>

• level

  • The level of the tree.

  • Type: int

• value

  • The visibility state for the tree level.

  • Type: boolean

relationInfo

Represents relation information used for linking child nodes. scripting type: CustomType<servoyextra-dbtreeview.relationInfo>

• label

  • The label for the relation.

  • Type: string

• nRelationName

  • The name of the relation.

  • Type: string

---