coloring primefaces table cells depending on condition

Question

it's my first project with primefaces, and I can't find out why my cells are not colored. my XHTML file contains the following:

<h:head>
<title>Job Status Reporter</title>
<link rel="stylesheet" type="text/css" href="/jobstatusreport/colors.css" />
</h:head>

 ...

 <h:dataTable var="myJob" value="#{workPackage.jobs}"
    rowStyleClass="#{myJob.jobStatus == 'SUCCESS' ? 'green' : 
  (myJob.jobStatus == 'PARTIAL SUCCESS' ? 'yellow' : (myJob.jobStatus == 'FAILURE' ? 'red'   :'white'))}">
<h:column>
    <h:outputText value="#{myJob.jobId}" />
</h:column>
<h:column>
        <h:outputText value="#{myJob.jobType}" />
</h:column>
    <h:column>
    <h:outputText value="#{myJob.jobStatus}" />
    </h:column>
</h:dataTable>

and my colors.css file is created in WebContent/resources/css/ folder and defined as follow:

.green.ui-datatable { background: green;}

.red.ui-datatable {background: red;}

.yellow.ui-datatable {background: yellow;}

.white.ui-datatable {background: white;}

but I still get uncolored cells on my web browser, can anyone tell me what's the problem?

EDIT:

when I changed h:dataTable ... to p:dataTable ... I got the following message:

/globalReport.xhtml @32,169 rowStyleClass="#{myJob.jobStatus == 'SUCCESS' ? 'green' : (myJob.jobStatus == 'PARTIAL SUCCESS' ? 'yellow' : (myJob.jobStatus == 'FAILURE' ? 'red' : 'white'))}": Property 'jobStatus' not found on type org.hibernate.collection.internal.AbstractPersistentCollection$SetProxy

can anyone help, please?

maybe the path to css is wrong, do like this http://www.mkyong.com/jsf2/how-to-include-cascading-style-sheets-css-in-jsf/ — Leo, Mar 26 '14 at 13:37
possible duplicate of [Color the rows of datatable based a condition in JSF 2](http://stackoverflow.com/questions/8745017/color-the-rows-of-datatable-based-a-condition-in-jsf-2) — Danubian Sailor, Mar 26 '14 at 13:53
@Lukasz: please read my xhtml file the proposed solution already is done but not efficient, I get no positive results — Guizmoo03, Mar 26 '14 at 14:02
@Djedai40 oh sorry, they are using Tomahawk components, but the rule is the same, h:dataTable doesn't have such attribute — Danubian Sailor, Mar 26 '14 at 14:22

score 5 · Accepted Answer · answered Mar 26 '14 at 17:56

I've finally found a solution: In myJob class I added the below method:

    public String createLabel(){

    switch (jobStatus){

    case "SUCCESS":
        return "SUCCESS";

    case "PARTIAL SUCCESS":
        return "PARTIAL_SUCCESS";

    case "FAILURE":
        return "FAILURE";

    default: 
        return "DEFAULT";   
    }
}

and in my globalReport.xhtml I changed the following:

<h:head>
<title>Job Status Reporter</title>
<h:outputStylesheet library="css" name="colors.css" target="head" />
</h:head> 

....

<h:dataTable var="myJob" value="#{workPackage.jobs}">
    <h:column>
    <h:outputText value="#{myJob.jobId}"/>
</h:column>
    <h:column>
    <h:outputText value="#{myJob.jobType}"/>
</h:column>
    <h:column>
        <h:outputText value="#{myJob.jobStatus}" styleClass="#{myJob.createLabel()}"/>
</h:column>
</h:dataTable>

and my colors.css is :

.SUCCESS{
background-color : green !important;
}

.FAILURE{
background-color: red !important; 
}

.PARTIAL_SUCCESS{
background-color: yellow !important;
}

.DEFAULT{
background-color: white !important; 
}

and it works perfectly. many thanks @Lukasz for your precious help.

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

Your situation is similar as Color the rows of datatable based a condition in JSF 2. h:dataTable doesn't have such attribute, since you're using PrimeFaces, you should use their components, since they provide much more functionality.

Use <p:dataTable rowStyleClass="..." ... /> as well as <p:column../> within it.

It would be probably more readable and less error-prone if you'd generate the style class in the item, to prevent too long and complex EL expression.

You may note style differences because components rendered by PrimeFaces are using jQuery-UI CSS styles, but you may customize them as easy as "old" components from "h:" namespace.

edited May 23 '17 at 11:46

Community

1
1

answered Mar 26 '14 at 14:26

Danubian Sailor

1
38
145
223

Thanks, I didn't notice the , but it doesn't change anything but it worsens when I changed to , now I got the EDITED error message, do you have any idea about this matter? – Guizmoo03 Mar 26 '14 at 14:54
@Djedai40 it seems like your enum value, or something similar, not the JSF/PrimeFaces error message. Try the way I've proposed, generate the style class in your bean. Too long EL expressions are hard to debug and have poor performance. – Danubian Sailor Mar 26 '14 at 15:35
when I debug in browser I get 404 file not found error, it seems that it can't find the file, is it possible that I'm making mistake in declaring : – Guizmoo03 Mar 26 '14 at 15:42
@Djedai40 `myJob` is something that doesn't have method `getJobStatus`. Why do you have proxies in your collection, I don't know, and it's another question. You should simply debug what getJobs() method is returning... – Danubian Sailor Mar 26 '14 at 15:45
Please prevent also chameleon questions. The title is about coloring rows depending on condition, adding other errors will be distracting to future visitors. If 'something' is creating a proxy and debugging won't give you any hint, it's better to create a new question. – Danubian Sailor Mar 26 '14 at 15:50
the methods return the correct values because when I ignore coloring the cells I get all pieces of information, and all my getters and setters have been tested. the problem is in loading the css file, but I can't find a way to make it happen. – Guizmoo03 Mar 26 '14 at 15:51

coloring primefaces table cells depending on condition

2 Answers2