Control.Treeview

Before proceeding you may want to read our getting started page.

What does this control do?

This control provides a simple way to show data nodes by hierarchy.

For an usage example check out our Control.Treeview demo.

How to use it

In order to be able to use this control, paste this line of javascript right at the beginning of your script tag:

Meteora.uses('Control.Treeview');

You may then be able to invoke the Treeview Widget

new Treeview(
 
  // ELEMENT
  // ID or object reference to a container element.
  'div_id',

  // NODE TREE
  [
    {
      'label': 'First level node i',
      'items': [
        {
          'label': 'Second level node',
          'items': [
            {
              'label': 'Third level node i'
            },
            {
              'label': 'Third level node ii'
            }
          ]
        }
      ]
    },
    {
      'label': 'AJAX node',
      'items': '/path/to/json/node'
    }
  ]
);

Node syntax

This is the basic node syntax:

[
  {
    'label': 'Main node',
    'items': [
      {
        'label': 'Child',
        'onSelect': 'doThat()'
      }
    ],
    'label': 'AJAX node',
    'items': '/path/to/json/node'
  }
]
Nodes loaded via AJAX follow the same syntax.

Options

expansionEvent

mousedown by default. Sets the event that will trigger expansion.

Methods

open(path)

Opens and selects the node found at the end of the path.

i.e.: example treeview.open(['First level node', 'Second level node', 'Third level node']);