Tree

Introduction

The Tree control displays items in a hierarchical manner. The control can be used to develop structural views such as Navigators or Explorers. Each displayed item can have some children, and the user can expand and collapse these items. The Tree control comes in two flavors: full and transparent which can be set using the showHeader attribute of type boolean. In its full version, the Tree displays a header with a title and buttons that allow the user to expand or collapse all of the nodes at once (public API methods expandAll() and collapseAll()). In its transparent version, the Tree hides the header, and borders and background are made transparent. For the configuration of the Tree, the attributes of the TreeNode control can be used. A TreeNode can have a text and an icon. It is also possible to decide if a node shall have an expander (hasExpander), and if it shall be expanded or not at the first load (expanded). In order to create the data for the Tree, TreeNodes are created nested by using the addNode(TreeNode) method. The same method is used to add the root of the hierarchy.

Examples

Basic Tree

Transparent Tree


API Documentation

API documentation