Tree View

• Introduction
• Basic Example
• Real World Example

Allows users to view file/folder structure in expandable tree view.

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Tree View module.

YUI().use(
  'aui-tree-view',
  function(Y) {
    // code goes here
  }
);

Using Tree View

Create a HTML element:

<div id="myTreeView"></div>

Now create a new instance of Tree View component, then initialize a variable children which will store an array of the child files and folders to be supplied to Tree View. Then use the new TreeView constructor, passing our HTML element for boundingBox and our children variable for children. Finally, let's render it!

YUI().use(
  'aui-tree-view',
  function(Y) {
    var children = [
      {
        children: [
          {
            label: 'File X'
          },
          {
            label: 'File Y'
          },
          {
            label: 'File Z'
          }
        ],
        expanded: true,
        label: 'Root'
      }
    ];

    new Y.TreeView(
      {
        boundingBox: '#myTreeView',
        children: children
      }
    ).render();
  }
);

Configuring Tree View

There are some other options that you can pass to your Tree View instance.

For example, you can use an external file to populate the Tree View children using the io type. We'll pass io a sample content file called content.html, which contains an array of child objects just like our previous children variable. In your HTML file, be sure to wrap both option key and value in quotes! (IE: 'label': 'File1')

YUI().use(
  'aui-tree-view',
  function(Y) {
    var children = [
      {
        cache: true,
        id: 'root',
        io: 'assets/content.html',
        label: 'ROOT',
        type: 'io'
      }
    ];

    new Y.TreeView(
      {
        boundingBox: '#myTreeView',
        children: children
      }
    ).render();
  }
);

Also, you can use the createNode method to create a new child node for your Tree View. This method can be used in a separate function, such as an onClick event. First, we'll select the ROOT node we added earlier in our children var. Then, we'll use createNode to create a new file, and pass it the options radio for type and radioButton for id. Lastly, we'll append radioButton to ROOT using appendChild method.

YUI().use(
  'aui-tree-view',
  function(Y) {
    var children = [
      {
        cache: true,
        id: 'root',
        io: 'assets/content.html',
        label: 'ROOT',
        type: 'io'
      }
    ];

    var treeView = new Y.TreeView(
      {
        boundingBox: '#myTreeView',
        children: children
      }
    ).render();

    var ROOT = treeView.getNodeById('root');

    var radioButton = ROOT.createNode(
      {
        id: 'radioButton',
        label: 'Radio Button',
        type: 'radio'
      }
    );

    ROOT.appendChild(radioButton);
  }
);