Index

How do I add an image to a treecell?

There are several ways in which you can add an image into a cell of a tree. The simplest is to just add a src attribute to a treecell. This will cause an image to appear in the corresponding cell. If there is a label and an image, the image will appear to the left of the label.

Here is an example tree with images:

View
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="treeImage" title="Tree With Images"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<tree flex="1" width="350" height="200">
  <treecols>
    <treecol id="name" label="Name" primary="true" flex="1"/>
    <treecol id="emotion" label="Emotion" flex="1"/>
  </treecols>
  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="Jim Richards"/>
        <treecell label="Happy" src="happy.png"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="Mary Sandman"/>
        <treecell label="Happy" src="happy.png"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="Lindsey Waters"/>
        <treecell label="Unknown"/>
      </treerow>
    </treeitem>
  </treechildren>
</tree>
</window>

The CSS background property can also be used to set an image on a cell, row or column. However, you need to use a special syntax for trees, since the body of the tree is not made up of real elements. Only the treechildren is displayed and the rows and cell are drawn by it.

First, add a properties attribute to the cell, row or column that you wish to add an image to. Set it to a name, likely something meaningful. For example, if the image appears on rows where something is enabled, you might call the property 'enabled'.

<treecell properties="enabled"/>

Add the property on each cell that you want to have the image appear. You can also add a properties attribute to a treerow or treecol element, although it will apply to the entire row or column.

To set the style, use syntax like the following:

treechildren:-moz-tree-cell(enabled) {
  background: url('enabled.png') no-repeat;
}

The example above will display a backgound image on all enabled cells, or all cells with the enabled property. The 'no-repeat' is needed otherwise the background image would repeat across the cell. Remove it if that is what is desired.

You can also replace -moz-tree-cell with -moz-tree-row or -moz-tree-column to set images for a row or column.

Copyright © 1999 - 2005 XULPlanet.com