XUL:treecol

From MDC

« XUL Reference home [ Examples | Attributes | Properties | Methods | Related ]

A column of a tree. It displays the column header and holds the size and other information about the column. You can also place splitter elements between the columns to allow column resizing. You should always place an id attribute on a treecol element to ensure that the column positioning is handled properly.

More information is available in the XUL tutorial.

Attributes: crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortActive, sortDirection, src, type, width

Properties: accessibleType

Style classes: treecol-image

[edit] Examples

This example shows a checkbox in the first column, requires the style below.

<tree flex="1">

  <treecols>
    <treecol label="Active" type="checkbox" editable="true"/>
    <treecol label="Name" flex="1" />
  </treecols>

  <treechildren>
    <treeitem>
      <treerow>
      	<treecell value="true"/>
        <treecell label="Alice"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell value="false"/>
        <treecell label="Bob"/>
      </treerow>
    </treeitem>
  </treechildren>

</tree>

To make the checkbox visible, the following needs to be added to the stylesheet (see treecol.type).

treechildren::-moz-tree-checkbox(checked){
    /* css for checked cells */
    list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif");
}

[edit] Attributes

Inherited from XUL element
align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortDirection, sortResource, sortResource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width

crop: Type: one of the values below; If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.

start: The text will be cropped on its left side.
end: The text will be cropped on its right side.
left: Deprecated The text will be cropped on its left side.
right: Deprecated The text will be cropped on its right side.
center: The text will be cropped in the middle, showing both the start and end of the text normally.
none: The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.

cycler: Type: boolean; If true, then the column is a cycler column. In the case, clicking on a cell in the column will alternate its state between on and off. This is used, for example, in a mail window, for a column that indicates that the message is read or unread with a small mark in the cell. If the cycler attribute is not set, the cell is a regular text cell.

dragging: Type: boolean; This attribute will be set to true if the column is being dragged. This attribute is set automatically; you shouldn't adjust it yourself.

editable: Type: boolean; Allows the contents of cells in the column to be changed, especially useful when type="checkbox". When the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell.

The tree must also be marked as editable in order for this to work. Individual treecell elements in the column may be marked editable="false" in order to disable editing.

fixed: Type: boolean; If true, the size of the column in the tree cannot be adjusted by the user. Any splitter to either side will resize those columns while keeping the fixed column at a constant size. If false or not specified, the user can adjust the size of the column, typically by dragging the column header with the mouse.

hidden: Type: boolean; If set to true, the element is not displayed. This is similar to setting the CSS display property to 'none'.

hideheader: Type: boolean; Set this to true to indicate that the tree column header should be displayed without any column header styling. If you don't set a label for that column either, the header is not displayed at all.

ignoreincolumnpicker: Type: boolean; If true, the column does not appear in the column picker.

label: Type: string; The label that will appear on the element. If this is left out, no text appears.

primary: Type: boolean; If set to true, the treecol will have indentation and twisties drawn to the left of it to indicate the hierarchy level of the rows. If no column has the primary attribute set to true, the tree may still contain nested rows, although no indication will be given to the user.

sort: Type: URI of an RDF predicate; Set this to a RDF property to have the data in the column sorted based on that property. The property will usually be the same as that of the cell label.

sortActive: Type: boolean; This should be set to true for the column which should be sorted by default.

sortDirection: Type: one of the values below; Set this attribute to set the direction that template-generated content is sorted. Use the sortResource attribute to specify the sort key.

ascending: The data is sorted in ascending order.
descending: The data is sorted in descending order.
natural: The data is sorted in natural order, which means the order that it is stored in.

src: Type: image URL; Set this attribute to have the treecol element use an image for the header instead of a label. You cannot have both an image and a label displayed in the header. Set this to the URL of an image to appear on the tree column header. If this attribute is left out, no image appears and the label is used instead. The class treecol-image must be used on the treecol element for the image to appear. You should still specify a label for use in the column picker if ignoreincolumnpicker is not true and hidecolumnpicker is not true on the tree.

type: Type: one of the values below; The type of tree column. The default is a text column that displays the content as text.

checkbox: The content of the columns are checkboxes.
progressmeter: The content of the columns are a progress meters. This is used in Mozilla's download manager window.
text: The content of the columns is text.

width: Type: string (representing an integer); The preferred width of the tree column. The value should not include a unit as all values are in pixels. Specifying widths for your columns causes Gecko to allow the tree to be scrolled horizontally if it is wider than the available space.

[edit] Properties

accessibleType: Type: integer; A value indicating the type of accessibility object for the element.

Inherited from XUL element
align, allowEvents, boxObject, builder, className, collapsed, contextMenu, controllers, currentItem, database, datasources, dir, flex, height, hidden, id, left, listBoxObject, maxHeight, maxWidth, menu, minHeight, minWidth, observes, ordinal, orient, pack, persist, ref, resource, statusText, style, tooltip, tooltipText, top, value, width

Inherited from DOM element
attributes, childNodes, cloneNode, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, tagName

[edit] Methods

Inherited from XUL element
blur, click, doCommand, focus, getElementsByAttribute

Inherited from DOM element
addEventListener, appendChild, dispatchEvent, getAttribute, getAttributeNode, getAttributeNodeNS, getAttributeNS, getElementsByTagName, getElementsByTagNameNS, hasAttribute, hasAttributeNS, hasAttributes, hasChildNodes, insertBefore, isSupported, normalize, removeAttribute, removeAttributeNode, removeAttributeNS, removeChild, removeEventListener, replaceChild, setAttribute, setAttributeNode, setAttributeNodeNS, setAttributeNS

[edit] Style classes

The following class may be used to style the element. This class should be used instead of changing the style of the element directly since it will fit more naturally with the user's selected theme.

treecol-image: Use this class to have an image appear on the tree column header. Specify the image using the src attribute.

[edit] Related

Elements: tree, treecols, treechildren, treeitem, treerow, treecell and treeseparator.
Interfaces: nsIAccessibleProvider

Retrieved from "http://developer.mozilla.org/en/docs/XUL:treecol"

Category: XUL Elements

Mozilla Developer Network

Navigation

Views

Toolbox

In other languages