Can I change a XUL tree cell/row/item bg color with Javacript?

inor...@gmail.com

unread,

Nov 2, 2006, 10:32:37 AM11/2/06

to

Hi all,

I have the tree, in the tree there are rows, when a user right clicks
on a row they can choose some action from the context menu. One of the
actions in the context menu calls a js function that can take some
time. While that process is running I am getting the status back every
3 seconds via a timer. I would like the row that the person right
clicked on to change background color based on a specific status that I
receive from the timer.

Yeasterday I thought I had resolved my issue using rebuild(), it worked
fine for the first entry in the tree, but when I change the attributes
for a different item in the tree, based on the currentIndex, then do
rebuild the rows after the first do not change. I have checked and my
properties are being set but rebuild does nothing for them.

My questions is does tree.selectedIndex correspond to a item in the
collection of tree rows? Again, in the example and code below
tree.currentIndex works when its value is 0 but anything else has no
effect on the intended row. I even tried to use numeric values instead
of the currentIndex variable but still no effect...Am I missing
something?

document.getElementsByTagName('treerow')[tree.currentIndex].removeAttribute('properties');

The tree looks like:
<tree persist="height hidden" id="contactList"
context="contactListpopupmenu" tooltip="moretip"
datasources="abook.pl?func=sidebar&RDF=1&rand=$var{rand}"
ref="http://www.atmail.com/rdf" flex="1" hidecolumnpicker="true"

ondblclick="selectContact();">

</rule>
</template>
</tree>

I have tried a hundred different ways of addressing the tree
cell/row/item via javascript. The closest that I go to what I would
expect to work based on what I have read would be something like:

document.getElementsByTagName('treerow')[tree.currentIndex].removeAttribute('properties');
document.getElementsByTagName('treerow')[tree.currentIndex].setAttribute('properties',
value);

This does set the properties to the correct value, I can see it the
debugger. It does not however update the tree to show the cell in a
different background color. Please note that I have used both treerow
and treecell in the TagByName function. In my javascript above the
value variable is the name of the psudo style from my style sheet. I
know that the style sheet is correct because I can set the row to any
one of the properties before I render the page and it shows as I would
expect. My problem is that I have no idea how to change them
dynamically via javascript.

Below is my CSS:
[code]
treechildren:-moz-tree-row(selected) {
border-bottom: 0px;
background: #E4EEF8;
}

treechildren:-moz-tree-row(statusyellow) {
border-bottom: 0px;
background: #FFFF99;
}

treechildren:-moz-tree-row(statusgreen) {
border-bottom: 0px;
background: #99FF33;
}

treechildren:-moz-tree-row(statusred) {
border-bottom: 0px;
background: #FF6633;
}

.treered treechildren:-moz-tree-row(statusred) {
border-bottom: 0px;
background: #FF6633;
}

treechildren::-moz-tree-row(odd) {
background-color: #FCFCFC;
}

treechildren::-moz-tree-row(odd, selected) {
background-color: #E4EEF8;
}

Neil

unread,

Nov 3, 2006, 6:08:29 AM11/3/06

to

inor...@gmail.com wrote:

>My questions is does tree.selectedIndex correspond to a item in the collection of tree rows?
>

Try tree.view.getItemAtIndex(tree.currentIndex);

--
Warning: May contain traces of nuts.

inor...@gmail.com

unread,

Nov 3, 2006, 9:39:34 AM11/3/06

to

Neil wrote:
> inor...@gmail.com wrote:
>
> >My questions is does tree.selectedIndex correspond to a item in the collection of tree rows?
> >
> Try tree.view.getItemAtIndex(tree.currentIndex);
>

That does return a treeitem however how do I change the background
color/or somedisplay property and get it to redraw?

I tried three different ones below:

selectedtreeitem = tree.view.getItemAtIndex(tree.currentIndex);

selectedtreeitem.setAttributes('className', 'statusred')
selectedtreeitem.setAttributes('style', 'background: #FF0000')
selectedtreeitem.setAttributes('properties', 'statusredmoz')

/*This one is the is psudo moz style I defined in my css

treechildren:-moz-tree-row(statusredmoz) {
border-bottom: 0px;
background: #FF6633;
}

*/

Neil

unread,

Nov 3, 2006, 12:35:21 PM11/3/06

to

inor...@gmail.com wrote:

>I tried three different ones below:
>
>selectedtreeitem = tree.view.getItemAtIndex(tree.currentIndex);
>
>selectedtreeitem.setAttributes('className', 'statusred')
>selectedtreeitem.setAttributes('style', 'background: #FF0000')
>selectedtreeitem.setAttributes('properties', 'statusredmoz')
>
>/*This one is the is psudo moz style I defined in my css
>
>treechildren:-moz-tree-row(statusredmoz) {
>border-bottom: 0px;
>background: #FF6633;
>}
>
>*/
>
>

The first two attributes won't have any effect, but it looks like your
problem with the properties attribute is that you need to set it on the
treerow, not the treeitem. Try
selectedtreeitem.firstChild.setAttribute('properties', 'statusredmoz');