CODEWITHSUNDEEP
jsfprimefaces
ethanjyx
ethanjyx

Reputation: 2067

Primefaces treetable different background colors for rows of different hierarchy

enter image description here

Is there any chance that the background colors can be different on different hierarchies?

For example, in the above picture, make the rows of Documents, Pictures, Movies green and their children yellow.

Thank you!

Upvotes: 1

Views: 5351

Answers (3)

Stefan
Stefan

Reputation: 11

In your data for your treeNode, have a function such as String getRowStyle() which returns a class in your css.

Then in your xhtml have something like:

<p:treeTable
    value="#{manager.rootNode}"
    var="treeNode"
    rowStyleClass="#{treeNode.getRowStyle()}"
    >

If you don't see the effect clear your browser cache to refresh the css.

Upvotes: 1

andrea
andrea

Reputation: 1

Yes, you can add conditions based on #{document.type} inside styleClass (or style) attributes of p:column tags.

A quick example could be as follows: 

<p:column style="width:150px;background-color:#{document.type=='Folder' ? 'green' : (document.type=='Word Document' ? 'yellow' : '')};">
    <f:facet name="header">
        Name
    </f:facet>
    <h:outputText value="#{document.name}" />
</p:column>

However, in order to implement what you asked for you need to modify the Java Bean and specify different types for the desired DefaultTreeNode objects (for example 'Folder1' for [Documents, Pictures, Movies] and 'Folder2' for [Work,PrimeFaces]), as follows:

TreeNode documents = new DefaultTreeNode(new Document("Documents", "-", "Folder1"), root);  
TreeNode pictures = new DefaultTreeNode(new Document("Pictures", "-", "Folder1"), root);  
TreeNode music = new DefaultTreeNode(new Document("Music", "-", "Folder1"), root);  

TreeNode work = new DefaultTreeNode(new Document("Work", "-", "Folder2"), documents);  
TreeNode primefaces = new DefaultTreeNode(new Document("PrimeFaces", "-", "Folder2"), documents);

and modify the JSF page by adding the following in each p:column:

<p:column styleClass="#{document.type=='Folder1' ? 'greenClass' : (document.type=='Folder2' ? 'yellowClass' : 'normalColumnClass')};">

and then define the CSS classes: greenClass, yellowClass and normalColumnClass.

Upvotes: 0

Rafael Oltra
Rafael Oltra

Reputation: 1239

You can specify on a given UITreeNode (that's used to represent a node within a Tree) the style by using the the setStyleClass method.

Upvotes: 0

Related Questions