Treecol

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 about treecol

The treecol element implements the following interfaces:

nsIAccessibleProvider  

Attributes:

crop cycler dragging fixed hidden
hideheader ignoreincolumnpicker label primary sort
sortActive sortDirection src type

Style Classes:

treecol-image

Properties and Methods:

accessible

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
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 treecol 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 used in place of the cropped text. If the box direction is reversed, the cropping is reversed.

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.

fixed

Type: boolean

If true, the size of the column in the tree cannot be adjusted by the user. Any splitters 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

This attribute, when set to true, hides the column. The user can show the column by selecting it from a drop-down at the end of the column header row.

hideheader

Type: boolean

Set this to true to indicate that the tree column header should be displayed without any column header styling.

ignoreincolumnpicker

Type: boolean

If true, the column does not appear in the column picker.

label

Type: string

The label that will appear on the treecol. If this is left out, no text appears.

primary

Type: boolean

If set to true, the column 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 the column is sorted. The user may change the sort direction by clicking the column headers.

src

Type: image URL

Set this attribute to have the tree column use an image for the header instead of a label. 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 cannot have both an image and a label.

type

Type: one of the values below

The type of tree column. The default is a text column that displays the content as text.


Style Classes:

The following classes may be used to style the element. These classes should be used instead of changing the style of the element directly since they 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.


Properties and Methods:

accessible

Type: nsIAccessible

Returns the accessibility object for the treecol.

Inherited from XUL Element:

align allowEvents blur boxObject boxObject.element
boxObject.getLookAndFeelMetric boxObject.height boxObject.screenX boxObject.screenY boxObject.width
boxObject.x boxObject.y builder className click
collapsed contextMenu controllers database datasources
dir doCommand flex focus getElementsByAttribute
height hidden id left maxHeight
maxWidth menu minHeight minWidth observes
ordinal orient pack persist ref
resource statusText style tooltip tooltipText
top width

Inherited from Element:

addEventListener
appendChild
attributes
childNodes
cloneNode
dispatchEvent
firstChild
getAttribute
getAttributeNS
getAttributeNode
getAttributeNodeNS
getElementsByTagName
getElementsByTagNameNS
hasAttribute
hasAttributeNS
hasAttributes
hasChildNodes
insertBefore
isSupported
lastChild
localName
namespaceURI
nextSibling
nodeName
nodeType
nodeValue
normalize
ownerDocument
parentNode
prefix
previousSibling
removeAttribute
removeAttributeNS
removeAttributeNode
removeChild
removeEventListener
replaceChild
setAttribute
setAttributeNS
setAttributeNode
setAttributeNodeNS
tagName
Add a note User Contributed Notes
November 6, 2005, 10:47 am tiago at xul dot com dot br
To sort work, you have to put flags="dont-build-content" on the tree element.
June 2, 2005, 1:39 am xulplanet at schumann dot cx
Note that the sort column of <treecol/> needs to be referenced in the template set. You cannot just use arbitrary rdf columns for sorting. There must be a reference to the sort column such as this:

<treecol sort="rdf:foo#SORT" id="LABEL"/>
...
<template>
...
<treecell dummyattr="rdf:foo#SORT" label="rdf:foo#LABEL"/>
...
</template>

Without the dummyattr, sorting will not work. You do NOT need to use the sort column for anything useful within the template set, but make sure that it is referenced.
May 25, 2005, 2:41 am mv_van_rantwijk at yahoo dot com
Don't forget to add something like;

<tree id="..." persist="sortActive sortDirection"...
<treecols>
<treecol id="..." sortActive="false" sortDirection="natural"...

to start the initial display of the tree in the right order!
January 6, 2005, 3:11 pm onemen at walla dot com
you can sort Custom Tree Views by three steps:
1. insert the data to array.
2. sort the array with the myArray.sort() method.
3. insert the data from the array to the Tree view with
getCellText( row , column) {myArray[row];}
September 9, 2004, 9:09 am monstrous at mpowernet dot com
i don't think there is any way to sort the treecol object without an rdf. that is a problem for those that are generating their xul via javascript without rdf

Copyright © 1999 - 2005 XULPlanet.com