TreeView

Treeview

This is a component for hierarchical data. It can show plan text data, an icon, an additional checkbox, and handle several selection operations.

User can select (activate) an element, set the checked stay (multiple elements), and collapse on any level.

It receives an object of type AcTreeNode. The component interacts by firing the following events:

  • nodeClick
  • checkChanged
  • selectedChanged
  • collapseChanges

The same events are being fired by any node separately. They bubble up the tree.

A single node implements the base class AcTreeNode. AcTreeNode has these properties:

  • options: A set of options to control the appearance, type AcTreeNodeOptions
  • parent: The parent node, if any
  • children: An array with the children, if any
  • name: The name used as a readable identifier
  • id: The id, used as an additional identifier in event handlers

Tree Node Options

The class AcTreeNodeOptions controls how the nodes appear. The class has these properties:

  • collapsable: boolean: Show the expand icons
  • icon: string: An additional icon, must be a fontawesome class
  • iconColor: string: An additional icon’s primary color
  • selectedIcon: string: An additional icon on select
  • color: string: Color of text
  • backColor: string: Color of background
  • href: string: A hyperlink the node will invoke
  • selectable: boolean: Whether the node is selectable
  • checkable: boolean: Whether the node is checkable

Note: If an hyperlink is used to invoke immediate action it doesn’t make sense to use either ‘selecteble’ nor ‘checkable’.

Tree Node States

Each node reports its state, defined in the enum AcTreeNodeState:

  • undefined
  • checked
  • disabled
  • expanded
  • selected

Usage

In a form one can use the TreeView like this:

<ac-tree [nodes]="treeData"></ac-tree>

Create options in the component like this:

let options: AcTreeNodeOptions = new AcTreeNodeOptions();
option.backColor = 'yellow';
option.checkable = true;
option.color = 'red';
option.collapsable = true;
option.selectable = true;

Now create the tree using this option:

this.treeData = new AcTextTreeNode('Root node', options, [
 new AcTextTreeNode('Child node #1', options),
 new AcTextTreeNode('Child node #2', options),
 new AcTextTreeNode('Child node #3', options),
 new AcTextTreeNode('Child node #4', options, [
 new AcTextTreeNode('Hello', options),
 new AcTextTreeNode('Ahoy', optionsc, [
 new AcTextTreeNode('Child deep A', options),
 new AcTextTreeNode('Child deep B', options),
 new AcTextTreeNode('Child deep C', options)
 ]),
 new AcTextTreeNode('Hola', optionsc),
 ]),
 new AcTextTreeNode('Child node #5', options),
]);