expandtreebranch
This article is about the expandtreebranch UDB event handler.
expandtreebranch
The expandtreebranch event may be called from web pages developed in Web Designer and processed by a USoft page engine service.
| Event | Applies to | Occurs when |
|---|---|---|
expandtreebranch | Tree node elements of a Tree control | After a tree branch's child nodes have been rendered and the branch has been expanded |
This event is triggered on a tree node's own <li> element by the openfolder click handler of the TreeControl class (defined in controls/tree-control.js, a subclass of DataControl). TreeControl registers this click handler, delegated through the selector li.tree-node div.tree-node-expand, so a single click handler defined on TreeControl reacts to clicks on the expand icon of any node (rendered by TreeNodeControl) in the tree. The trigger fires once the branch's child nodes have finished loading and rendering, right before the node's open/closed CSS classes are toggled. The source code marks this trigger with the comment //WebDesigner event, confirming it is an intentional, designed hook for Web Designer event scripting.
Purpose
You can use this event to run code right after a tree branch has been opened and its children are present in the DOM, for example to auto-select a child node, scroll the branch into view, or apply custom styling to the newly rendered nodes.
How to use
Find or create an Event Listener object with Event Type = expandtreebranch. Event Listeners are in the Web Designer Controls catalog:
Insert the event listener into the Tree control (or the tree node object whose branches you want to react to). Insert a callClientScript action into the event listener. Use this action's Script property to code the behaviour that you want to see when the event occurs.
You are implicitly associating the event with an event handler function. This function has an options parameter. For available options, see the Options section at the end of this help topic:
function(*evt*, *options*){ ... }
Or you can create the event handler more explicitly by attaching a jQuery handler on the control's element.
No options object is passed to the event handler function; the event is a plain notification that the branch has been expanded.