Dynamically change CSS style of cell in <h:dataTable> column

Question

how to calculate cell values of B column and how to change their css style dynamically how to calculate the values of column B and how to change his color

my java object :

public class MyObject{
   private Date date;
   private int A;
   private int C;

   //Getters & Setters
}

my managed bean :

public class MyBean(){
    List<MyObject> List = myObjectDao.FindAll();

    //Getters & Setters
}

my jsf code :

<p:dataTable id="idList" var="list" value="#{myBean.list}" >
    <p:column headerText="DATE">
        <h:outputText value="#{list.date}"  />
    </p:column>
        <p:column headerText="A">
        <h:outputText value="#{list.A}"  />
    </p:column>
        <p:column headerText="B">
        <h:outputText value="????????" style="???????"  //>
    </p:column>
        <p:column headerText="C">
        <h:outputText value="#{list.C} />
    </p:column>
</p:dataTable>

BalusC · Accepted Answer · 2012-10-23 10:13:30Z

14

You can just use the conditional operator ?: in EL.

E.g.

<c:set var="B" value="#{(list.A / list.C) * 100}" />
<h:outputText value="#{B}" style="display: block; background-color: #{B lt 50 ? 'red' : (B lt 90 ? 'blue' : 'green')}" />

If B is also used elsewhere in the model or controller, then you could add a public int getB() method which just contains return (A/C) * 100; and then use #{list.B} instead of #{B}.

Note that proper design is to use a CSS class instead. E.g.

<h:outputText value="#{B}" styleClass="percentage #{B lt 50 ? 'poor' : (B lt 90 ? 'average' : 'good')}" />

with

td .percentage {
    display: block;
}

.percentage.poor {
    background-color: red;
}

.percentage.average {
    background-color: blue;
}

.percentage.good {
    background-color: green;
}

You can of course also perform the determination of CSS style/class in a getter method as suggested by the other answer, but that's a poor separation of concerns.

edited Oct 23, 2012 at 10:13

answered Oct 22, 2012 at 15:58

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Karim Oukara Over a year ago

thank you for your answer. but the result of <c:set var="B" value="#{(list.A / list.C) * 100}" scope="request" /> is always =0 ????

BalusC Over a year ago

Sorry, remove scope="request".

Karim Oukara Over a year ago

but i have this warning "Could not make numeric conversion for less than operation", caused by #{B lt 50 ? 'red' : (B lt 90 ? 'blue' : 'green')}"

BalusC Over a year ago

EL syntax validation in the average IDE is poor. I have turned it off in Eclipse. If it was invalid, it would surely have thrown an exception during runtime.

BalusC Over a year ago

That's not possible this way. It's exactly the reason why I've set the output text to display: block so that it spans the entire cell. If you have another content which you'd also like to put in same cell with the same background color, then better replace <h:outputText> by <div> on which the style class is set and put everything therein (and now you can remove display:block style because the <div> is that already by default).

|

gtgaxiola · Accepted Answer · 2012-10-22 16:08:22Z

1

I would recommend doing the logic within your MyObject class

So I would call it in JSF like this:

<p:column headerText="B">
    <h:outputText value="#{list.calculateB()}" styleClass="list.createLabel()">
</p:column>

Inside MyObject

public double calculateB() {
   return (A/C)*100;
}


public String createLabel() {
   if(calculateB() > 90) {
       return "GREEN";
   //DO YOUR LOGIC

}

in CSS

.GREEN {
background-color: #00FF00 !important;

}

edited Oct 22, 2012 at 16:08

answered Oct 22, 2012 at 15:51

gtgaxiola

9,3165 gold badges47 silver badges67 bronze badges

Comments

Roman Marusyk · Accepted Answer · 2016-11-28 09:58:10Z

-1

Below code has resolved my issue.

style="#{event.eventStatusDesc eq 'Completed' ? 'color: #32cd32;font-weight: bold;':(event.eventStatusDesc eq 'Rescheduled till Further Notice' ? 'color: blue;font-weight: bold;' : 'color: black;')}" />

edited Nov 28, 2016 at 9:58

Roman Marusyk

24.8k27 gold badges83 silver badges127 bronze badges

answered Nov 28, 2016 at 9:41

user3514526

93 bronze badges

Collectives™ on Stack Overflow

Dynamically change CSS style of cell in <h:dataTable> column

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related