PDA

View Full Version : Tree folder becomes leaf



seldon
5 Jan 2007, 3:31 PM
Hi,

I'm wondering how to prevent that a node which has no children, but has a folder class, becomes a leaf after expanding it. In other words, how to be able to have empty folders?

Thanks,

Seldon

In the tree examples a similar effect can be seen if one drags all childs out of a folder, then the folder suddenly becomes a leaf instead of just an empty folder.

jack.slocum
6 Jan 2007, 6:58 AM
In the tree css I applied a global style to all leaf/folder nodes. You can easily override those by providing a cls attribute on your node attributes.

Defaults:

/* some default icons for leaf/folder */
.ytree-node-collapsed .ytree-node-icon{
background:transparent url(../images/default/tree/folder.gif);
}
.ytree-node-expanded .ytree-node-icon{
background:transparent url(../images/default/tree/folder-open.gif);
}
.ytree-node-leaf .ytree-node-icon{
background:transparent url(../images/default/tree/leaf.gif);
}

A leaf is any node with no children (the leaf attribute is only there to force it to stay a leaf, probably confusing).

But you could add any class you want to the nodes to make them always have a certain icon. The tree "organizer" does just that.

seldon
6 Jan 2007, 8:04 AM
Well, not sure yet how to do it. For i want all folder nodes to always remain folders (and hence have the appropriate icons when collapsed and expanded). But in the html a node has both the folder class and the expanded class at the same level. So i cannot force something like


.folder .ytree-node-collapsed .ytree-node-icon {}

and


.folder .ytree-node-expanded .ytree-node-icon{

Actually i dont see from the html why and empty expanded folder node gets the leaf icon. Perhaps Im missing something...

Sorry for asking again for help :oops:

Seldon

seldon
6 Jan 2007, 8:14 AM
Ah from the code i see that when a node has no children after an expansion, you do:


YAHOO.util.Dom.replaceClass(this.elNode, 'ytree-node-expanded', 'ytree-node-leaf');

I guess i must comment out this line. For i still want to be able to distinguis between an empty expanded/collapsed folder. Or do you see any pure css solution? (perhaps a node config option, folder=true, to force empty folders to remain folders would help?)

Thanks again,

Seldon

jack.slocum
6 Jan 2007, 3:08 PM
.folder .ytree-node-icon {
background-image:url(folder.gif);
}

.ytree-node-expanded .ytree-node-icon {
background-image:url(folder-open.gif) !important;
}

jack.slocum
6 Jan 2007, 3:13 PM
I just looked at tree example 2 (two-tress.html) and it has:


.folder .ytree-node-icon{
background:transparent url(../../resources/images/default/tree/folder.gif);
}
.ytree-node-expanded .ytree-node-icon{
background:transparent url(../../resources/images/default/tree/folder-open.gif);
}

So it appears the !important isn't required.

seldon
6 Jan 2007, 4:38 PM
Ah yes,

This indeed works. Thanks again!