Directory Tree with Empty Folders

Components, Ajax Framework, Utilities and More.
Post Reply
Posts: 9
Joined: 08 Dec 2010, 19:53
Location: Porto Alegre / Brazil

17 Jan 2011, 15:32

Just a little contribution for the community. I did not tested it with many browsers, but it worked FF 3.5/IE7/IE8.

The example given in the primefaces showcase of a directory tree does not consider empty directory nodes. The problem is that the CSS override only works for nodes with children, the others get no image.

So, to get empty trees you will these rules on your css:

Code: Select all

.locationTreeIcon {
    background-image: url("#{resource['images/tree:empty_location_icon.gif']}");
    background-repeat: no-repeat;
    padding-left: 20px !important;
/** populated directory nodes dont need the empty image */
td.ygtvtm+td.locationTreeIcon, td.ygtvtmh+td.locationTreeIcon,
td.ygtvlm+td.locationTreeIcon, td.ygtvlmh+td.locationTreeIcon,
td.ygtvlp+td.locationTreeIcon, td.ygtvlph+td.locationTreeIcon,
td.ygtvtp+td.locationTreeIcon, td.ygtvtph+td.locationTreeIcon {
    background-image: none;
    padding-left: 0 !important;
And a tree code example

Code: Select all

        <p:treeNode type="LOCATION" styleClass="locationTreeIcon">
            <h:outputText value="#{node.label}"/>
        <p:treeNode type="DEVICE" styleClass="deviceTreeIcon">
            <h:outputText value="#{node.label}" />
Now the nodes with type DIRECTORY also have empty directory image for nodes without children.

I like the idea of CSS power, but it would be easier if we could set in the component an expanded/collapse/default icon ;P

Anyway, hope this help anyone that needs the same feature or something similar.
  • Primefaces 2.2.RC2
    Sun Mojarra JSF 2
    Spring Web Flow 2.2.1.RELEASE
    Tomcat 6.0.24

Posts: 7
Joined: 19 Sep 2011, 13:38

21 Oct 2011, 11:50

Thx it helped me alot

Post Reply
  • Information
  • Who is online

    Users browsing this forum: Baidu [Spider], MarkWinton, RElliott and 27 guests