A container which can be used to hold a tabular or hierarchical set of rows of elements. The tree may contain any number of rows and any number of columns. Each row of the tree may contain child rows which are displayed indented from the parent. The contents of a tree are most commonly generated from an RDF datasource.

The example below creates a tree with two columns are three rows. In addition, a header bar is displayed.

Example:

    <tree id="menu" flex="1">
      <treehead>
        <treerow>
          <treecell value="Breakfast"/>
          <treecell value="Lunch"/>
        </treerow>
      </treehead>
      <treechildren>
        <treeitem>
          <treerow>
            <treecell value="Cheese Omelet"/>
            <treecell value="Ham Sandwich"/>
          </treerow>
        </treeitem>
        <treeitem>
          <treerow>
            <treecell value="Waffles"/>
            <treecell value="Caesar Salad"/>
          </treerow>
        </treeitem>
        <treeitem>
          <treerow>
            <treecell value="Grapefruit"/>
            <treecell value="Cheeseburger"/>
          </treerow>
        </treeitem>
      </treechildren>
    </tree>

Attributes inherited from XUL Element

Determines the horizontal alignment of the children of the tree.

• left: The elements are aligned on their left edges.
• center: The elements are centered.
• right: The elements are aligned on their right edges.

In the tree is placed inside a horizontally oriented box, autostretch determines whether the tree stretches vertically to fit the given space. For vertically oriented boxes, determines whether the tree stretches horizontally to fit the given space. Stetching in the opoosite direction is controlled with the flex attribute.

• never: The tree is never stretched and is displayed at the size specified by its width and height attributes or by the CSS width and height properties.
• always: The tree stretches to fill the given space.

If true, then the tree is collapsed and does not appear. It is equavalent to setting the CSS visibility property to collapsed.

If the label of the tree is too small to fit in its given space, the text will be cropped on the side specified by the crop attribute. An ellipsis will be placed in place of the cropped text.

• left: The text will be cropped on its left side.
• right: The text will be cropped on its right side.
• center: The text will be cropped on both sides.
• none: The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it too large. The side depends on the CSS text alignment.

If true, extra borders are drawn around the element and all its descendants. This can be used to determine orientation and where flexible elements are. If debug mode is enabled for a box, horizontal oriented boxes are displayed with a blue border and vertical boxes are displayed with a red border. The border above the element will be straight for non-flexible elements and wavy for flexible elements.

Indicates the flexibility of the tree. Flexible elements grow and shrink to fit their given space. The actual value is not relevant unless there are other flexible elements with-in the same container. Elements with larger flex values will grow more than elements with lower flex values, at the ratio determined by the two elements.

The height of the tree in pixels. It is recommended to use the CSS height property instead.

For elements placed within a bulletinboard, specifies the position of the left edge of the tree.

Used to specify whether the children of the tree element are oriented horizontally or vertically.

• horizontal: Child elements of the tree are placed next to each other in a row in the order that they appear in the XUL source.
• vertical: Child elements of the tree are placed under to each other in a column in the order that they appear in the XUL source.

For elements placed within a bulletinboard, specifies the position of the top edge of the tree.

Determines the vertical alignment of the children of the tree.

• top: Elements are aligned by their top edges.
• middle: Elements are centered vertically.
• bottom: Elements are aligned by their bottom edges.
• baseline: Elements are aligned by their text baseline.

The width of the tree in pixels. It is recommended to use the CSS width property instead.

Properties and Methods inherited from XUL Element

Adds the specified treeitem to the set of currently selected set of items.

Unselects any selected treeitems in the tree.

If the element in the tree is not currently visible to the user, the tree view is scrolled so that it is. If the treeitem is already visible, no scrolling occurs. If the element is not in the tree, nothing happens.

If the treeitem at the specified index is not currently visible to the user, the tree view is scrolled so that it is. If the treeitem is already visible, no scrolling occurs.

Returns the index of the first displayed row in the tree. This is not the same as the first row. If the view of the tree has been scrolled down, the function can be used to retrieve the index of the first row that the user can see.

Returns the zero-based position of the given treeitem item. Items are numbered starting from the first treeitem displayed in the tree. Child items are included in place as part of the count. That is, if the first treeitem contains three treeitems as children and the second treeitem contains five, there are a total of 10 treeitems. The first outer treeitem is numbered 0, its three children 1, 2 and 3, the second outer treeitem is numbered 4 and its 5 children are numbered 5 to 9.

An exception is thrown if the item is not in the tree.

Returns the treeitem node that is at the position specified by the parameter index in the tree.

This method returns a treeitem after another one. The parameter startItem is the treeitem and delta is the number of treeitems to count to.

getNextItem ( tItem, 2 );

This example, given a treeitem titem, will return the treeitem 2 items after it, or null if no such item exists.

Returns the number of rows of the tree that are currently visible to the user.

This method returns a treeitem before another one. The parameter startItem is the treeitem and delta is the number of treeitems to count to.

getPreviousItem ( tItem, 5 );

This example, given a treeitem titem, will return the treeitem 5 items before it, or null if no such item exists.

Removes the specified treeitem from the set of currently selected set of items. Thus, the item in unselected but other selected items remain selected.

Scrolls the tree view to the specified index. This is different than ensureIndexIsVisible because the view is always scrolled.

Selects the treeitem specified by item. All other items are unselected.

An array of the treeitems that are currently selected. If no items are selected, the array with have zero length.

If the specified treeitem is selected, it is unselected. If it is not selected, it is selected. Other items in the tree that are selected are not affected, and retain their selected state.