| FoxitPDFSDKforWeb v11.0.5 Archives Foxit PDF SDK for Web

Public Member Functions | List of all members
TreeComponent Class Reference
UIExtension » components » widgets

The class that defines the tree component The component is used via the following code snippet: More...

Inheritance diagram for TreeComponent:

## Public Member Functions
| getNodeById (id)
| Obtains the tree node via the given node id. More...
| getNodeByIdAsync (id)
| Obtains the tree node via the given node ID. This method listens for tree nodes being mounted and resolves the promise with the node that matches the specified ID. More...
| getSelectedNode ()
| Obtains the selected node. More...
| isDragging ()
| Checks if the tree component is currently in a dragging state. More...
| select (treeNode)
| Selects the specified tree node. More...
| setData (data)
| Sets the data for the tree component. More...
| setDraggable (draggable)
| Sets whether the tree component is draggable or not. More...
| setEditable (editable)
| Sets whether the tree component is editable or not. More...
| setLazyMode (lazyMode)
| Sets the lazy loading mode for the tree component. More...
| setSelectable (selectable)
| Sets whether the tree component is selectable or not. More...
| unselect (treeNode)
| Unselects the specified tree node. More...
Public Member Functions inherited from ContainerComponent
| append (child, fragments)
| Append a component or a template into this container component. More...
| childAt (index)
| Get the specific child component at the given zero-based `index`. Returns `undefined` if the index is out of range. More...
| children ()
| Get all children of this container component. More...
| childrenCount ()
| Returns the number of children in this container component. More...
| empty ()
| Remove all children of this component.
| first ()
| Get the first child fom this container component, if there is no children, null will returned. More...
| indexOf (child)
| Get the index of an child component. More...
| insert (child, index, fragments)
| Inserts a component instance or component template. Example: pdfui.getComponentByName('home-tab-group-hand') .then(function(groupComponent) { groupComponent.insert( '<xbutton icon-class="fv__icon-toolbar-hand" name="insert-button-name"></xbutton>', 0, [{ target: 'insert-button-name', config: { callback: function() { alert('button clicked'); } } }] ); }) . More...
| insertAll (children, index)
| Inserts a set of components to the specified index. More...
| last ()
| Get the last child from this container component. More...
| prepend (child, fragments)
| Prepend a component or a template into this container component. More...
| removeChild (child)
| Remove a child from this component and trigger UIExtension.UIConsts.COMPONENT_EVENTS.REMOVED event;. More...
| size ()
| The number of children in this container component. More...
Public Member Functions inherited from Component
| active ()
| Actives the component, and set `isActive` property to true, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.ACTIVE event. More...
| addDestroyHook (...hooks)
| Add a function to destroyHooks list, which will be called during destroy. More...
| after (component, fragments)
| Inserts this component after the specified component. More...
| attachEventToElement (element, types, listener, options)
| Binds single or more DOM events of the specified type to the specified element. This or these events are automatically removed when the element component is destroyed. More...
| before (component, fragments)
| Insert this component before the specified component. More...
| deactive ()
| Deactives the component, and set `isActive` property to false, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.DEACTIVE event. More...
| destroy ()
| Destroy the component and remove from its parent. this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.DESTROYED event. More...
| disable ()
| To disable the component, and set `disabled` property to true, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.DISABLE event. More...
| enable ()
| Enables component, and set `disabled` property to false, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.ENABLE event. More...
| findClosestComponent (callback)
| Find the first ancestor in the component tree which passed the testing of callback. More...
| getClosestComponentByName (name)
| Find the first ancestor in the component tree which name is equal to the passing value. More...
| getClosestComponentByType (type)
| Find the first ancestor in the component tree which type is equal to the passing value. More...
| getComponentByName (name)
| This method returns an Component object representing the component whose name property matches the specified string. If there are more than one components matched, only the first one is taken. More...
PDFUI | getPDFUI ()
| Get PDFUI instance, PDFUI instance is passing into a component after constructed. So that an undefined value will be returned in constructoring lifecycle. More...
| getRoot ()
| Get root component of this component tree. More...
| hide ()
| Hide component and set `isVisible` property to false, this method UIExtension.UIConsts.COMPONENT_EVENTS.HIDDEN event. More...
| index ()
| Get the index of this component in parent. More...
| isContainer ()
| Method used to detect whether a component is a container. More...
| isStateKept (kind=KeepStateKind.VISIBILITY)
| Check if state is kept or not. More...
| keepState (kind=KeepStateKind.VISIBILITY)
| This method is used to keep the current state of the component unchanged. After the state is kept, the show/hide methods of the component will no longer take effect unless the keep-state is revoked. More...
| localize (localizer=this.localizer)
| Localize message with the value of the data-i18n attribute above the DOM element of component recursively. More...
| nextSiblings ()
| This method returns the component immediately following this component's parent children list, or returns null if this component is the last in that list. More...
| off (eventName, listener)
| Unregister event handler of a geven event type, if no handler function specified, all handler of this given event type will be removed. More...
| on (eventName, listener)
| Registers an event handler to a specific event type on the component. More...
| once (eventName, listener)
| Registers an event handler to a specific event type on the component, but difference from Component#on, this event handler will be triggered only once. More...
| postlink ()
| Lifecycle method: postlink. The postlink method is called after all of the children are parsed. More...
| prelink ()
| Lifecycle method: prelink. The prelink method is called after component is rendered. More...
| previousSiblings ()
| This method returns the component immediately preceding this component's parent children list, or returns null if this component is the first in that list. More...
| querySelector (selector)
| Queries the first result returned from `querySelectorAll`. More...
| querySelectorAll (selectors)
| Returns all components that match the specified selector string. selector syntax: More...
| remove ()
| Remove component from its parent, and triggers UIExtension.UIConsts.COMPONENT_EVENTS.REMOVED event. More...
| removeElement ()
| Remove element from DOM tree.
| revokeKeepState (kind=KeepStateKind.VISIBILITY)
| Revoke keep-state and makes the show/hide methods back to normal. More...
| show (showParams)
| Shows up component, and set `isVisible` property to true, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.SHOWN event. More...
| trigger (eventName,...data)
| Calls each of the listeners registered for a given event type. More...

## Additional Inherited Members
Static Public Member Functions inherited from Component
static | extend (name, def, statics={})
static | getName ()
| This method returns a string identifies as the name of a component type that you can use this string as the tag name in the template. Each component must override this static method so that the template can get this component class. More...
Public Attributes inherited from Component
boolean | canBeDisabled
| Whether or not this component can be disabled. All of the component can be disabled by default unless you manually set the value of this property to true. More...
Controller | controller
| The controller instanceof of this component. The controller is specified externally and that contains the business logic of this component. More...
boolean | disabled
| Whether or not this component is enabled. Components are enabled by default, and must be enable to recieve user inut or generate events. More...
HTMLElement | element
| The root DOM element object of this component. More...
boolean | isActive
| Whether or not this component is active.Active is a complicated state, it can prepresent different interaction states in different component. More...
boolean | isVisible
| Whether or not this component is visible. Expect for layers, Most components are initially visible. More...
string | name
| The name of this component. More...
ContainerComponent | parent
| The parent of this component. More...
Protected Member Functions inherited from ContainerComponent
| doInsert (child, index)
| Insert component into this container component at the specified index. More...
| doInsertAll (children, index)
| Insert components array into this container component at the specified index. More...
| getContainerElement ()
| rerenderChildren ()
| Rerender all children of this container component, it's called after children removed or added,.
Protected Member Functions inherited from Component
| constructor (options, module, localizer)
| createDOMElement ()
| This method creates a HTMLElement as the root element for this component. More...
| doActive ()
| This method is called after the component is activated. It is used to update the rendering effect after the component is activated. It is usefull to override this method to customize the rendering.
| doDeactive ()
| This method is called after the component is deactivated. It is used to update the rendering effect after the component is deactivated. It is usefull to override this method to customize the rendering.
| doDestroy ()
| This method is called to destroy the component, You should override this method for your custom component to write your customize destroy logic.
| doDisable (reason='')
| This method is called after the component is disabled. It is used to update the rendering effect after the component is disabled. It is usefull to override this method to customize the rendering.
| doEnable (reason='')
| This method is called after the component is enabled. It is used to update the rendering effect after the component is enabled. It is usefull to override this method to customize the rendering.
| doHidden ()
| This method is called to hide the DOM element of this component. It is usefull to override this method to customize the hidding logic.
| doShown ()
| This method is called to show the DOM element of this component. It is usefull to override this method to customize the showing logic.
| mounted ()
| Lifecycle method: mounted. The mounted method is called after the element of component is appended into the DOM tree. More...
| render ()
| Lifecycle method: render. The render method is always been called to create DOM element of the component, it's called after createDOMElement called and before calling prelink. More...

## Detailed Description

The class that defines the tree component The component is used via the following code snippet:

<tree
draggable="true"
editable="true"
lazy-mode="none|passive"
@setter.data="treeNodeData" // Indicates that the setData method is called to synchronize tree data to the tree component.
></tree>

Tree component events
Event name | Parameters | Brief | Template Example | JS API Example
--- | --- | --- | --- | ---
expand | $args[0].isExpand: boolean - Indicates a tree node is expanded or collapsed $args[0].targetNodeId: string - Indicates a tree node id | An event triggered when use click on the tree node and toggled the collapse/expand state | @on.expand="$args[0].isExpand ? onExpandEventHandler($args[0].targetNodeId) : onCollapseEventHandler($args[0].targetNodeId)" | function example(tree) { tree.on('expand', (evt) => { }) }
confirm-edit | $args[0].nodeId: string - Indictes the tree node id $args[0].newTitle: string - Indicates the new text of the tree node | An event triggered when the user completes the edit operation. | @on.confirm-edit="onConfirmEditEventHandler($args[0])" * | function example(tree) { tree.on('confirm-edit', (evt) => { }) }
click-node | $args[0]: string - Indicates the tree node id. | An event triggered when the user clicks on the tree node. | @on.click="onClickTreeNodeEventHandler($args[0]) * | function example(tree) { tree.on('click', treeNodeId => { }) }
dragend | $args[0].draggedNodeData: BookmarkTreeNodeData - Indicates the data of the dragged tree node. $args[0].targetNodeId: string - Indicates the id of the dragged tree node $args[0].dragOverType: DragTreeNodeType - Indicates where the dragged tree node will be inserted relative to the target node. | Event triggered when a valid drag operation ends | @on.dragend="onDragEndEventHandler($args[0]) | function example(tree) { tree.on('dragend', (evt) => { }) }
select | $args[0]: string - Indicates the id of the selected tree node | Event triggered when a tree node is selected. | @on.select="onSelectEventHandler($args[0]) | function example(tree) { tree.on('select', treeNodeId => { }) }
create-tree-node | $args[0]: TreeNodeComponent - | Event triggered during the construction of a component's DOM element. Here you can modify the DOM structure of the tree node component | @on.create-tree-node="onRenderTreeNode($args[0])" | function example(tree) { tree.on('create-tree-node', treeNodeComponent => { }) }
destroy-tree-node | $args[0]: TreeNodeComponent - | Event triggered after the tree node component has been destroyed. | @on.destroy-tree-node="onRenderTreeNode($args[0])" | function example(tree) { tree.on('destroy-tree-node', treeNodeComponent => { }) }

Since
  10.0.0

## Member Function Documentation

## ◆ getNodeById()

TreeComponent::getNodeById | ( |  | id | ) |
| inline

Obtains the tree node via the given node id.

Parameters

  id | string - The id of the tree node.

Returns
  TreeNodeComponent|undefined - The tree node with the given id, or undefined if the id is not found.

Since
  10.0.0

## ◆ getNodeByIdAsync()

TreeComponent::getNodeByIdAsync | ( |  | id | ) |
| inline

Obtains the tree node via the given node ID. This method listens for tree nodes being mounted and resolves the promise with the node that matches the specified ID.

Parameters

  id | string - The ID of the tree node to retrieve.

Returns
  Promise<TreeNodeComponent> - A promise that resolves to the TreeNodeComponent corresponding to the provided ID.

Since
  11.0.0

## ◆ getSelectedNode()

TreeComponent::getSelectedNode | ( |  | ) |
| inline

Obtains the selected node.

Returns
  TreeNodeComponent - The selected tree node or undefined if no tree node is selected.

Since
  10.0.0

## ◆ isDragging()

TreeComponent::isDragging | ( |  | ) |
| inline

Checks if the tree component is currently in a dragging state.

Returns
  boolean - True if the tree is currently being dragged, false otherwise.

Since
  10.0.0

## ◆ select()

TreeComponent::select | ( |  | treeNode | ) |
| inline

Selects the specified tree node.

Parameters

  treeNode | TreeNodeComponent - The tree node to be selected.

Returns
  void

Since
  10.0.0

## ◆ setData()

TreeComponent::setData | ( |  | data | ) |
| inline

Sets the data for the tree component.

Parameters

  data | TreeNodeData[] -The data to be set

Returns
  void -

Since
  10.0.0

## ◆ setDraggable()

TreeComponent::setDraggable | ( |  | draggable | ) |
| inline

Sets whether the tree component is draggable or not.

Parameters

  draggable | boolean - True if the tree is draggable, false otherwise.

Returns
  void

Since
  10.0.0

## ◆ setEditable()

TreeComponent::setEditable | ( |  | editable | ) |
| inline

Sets whether the tree component is editable or not.

Parameters

  editable | boolean - True if the tree is editable, false otherwise.

Returns
  void

Since
  10.0.0

## ◆ setLazyMode()

TreeComponent::setLazyMode | ( |  | lazyMode | ) |
| inline

Sets the lazy loading mode for the tree component.

Parameters

  lazyMode | 'none'|'passive' - The lazy loading mode for the tree. 'none': Disables lazy loading, loads all nodes eagerly. 'passive': Child nodes are loaded when they are scrolled into the visible area, suitable for scenarios with a large number of child nodes.

Returns
  void

Since
  10.0.0

## ◆ setSelectable()

TreeComponent::setSelectable | ( |  | selectable | ) |
| inline

Sets whether the tree component is selectable or not.

Parameters

  selectable | boolean - True if the tree is selectable, false otherwise.

Returns
  void

Since
  10.0.0

## ◆ unselect()

TreeComponent::unselect | ( |  | treeNode | ) |
| inline

Unselects the specified tree node.

Parameters

  treeNode | TreeNodeComponent - The tree node to be unselected.

Returns
  void

Since
  10.0.0

@2025 Foxit Software Incorporated. All rights reserved.