CODEWITHSUNDEEP
cssjsf-2primefaces
Guizmoo03
Guizmoo03

Reputation: 660

coloring primefaces table cells depending on condition

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?

Upvotes: 7

Views: 18796

Answers (2)

Guizmoo03
Guizmoo03

Reputation: 660

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.

Upvotes: 5

Cjxcz Odjcayrwl
Cjxcz Odjcayrwl

Reputation: 22877

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.

Upvotes: 0

Related Questions