Different colors of options in selectOneMenu (Primefaces)
I need to display different colors of options in Primefaces.
I have a selectOneMenu with dynamical items (List)
<p:selectOneMenu id="carMenu" style="margin-top:4px;"
value="#{Bean.selectedCar}" effect="fade"
autoupdate="true">
<f:selectItems id="carsId"
value="#{myBean.allCars}" var="carItems"
itemLabel="#{carItems.name}" itemValue="#{carItems}" />
</p:selectOneMenu>
private List<Cars> allCars;
If the car is sold, I need to display the background of the option RED otherwise BLACK. In my Model I got an attribute which gives me the value (boolean sold) back if the car is sold or not.
How can I set the colors in my selectOneMenu?
Answer
The solution is to use the 'advanced' way of displaying this in PrimeFaces 4.0 and newer.
You can combine f:selectItems tag with p:column tags for p:selectOneMenu (see the showcase), with an iteration var for the columns themselves, like you do in tables.
Then the ideal thing would be to set the styleClass to the entire column depending on the condition, but unfortunatelly it doesn't work. Luckily, adding some Javascript/jQuery code you can achieve your goal, check out this SSCCE:
XHTML Page
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" style="height: 400px;">
<h:head>
<style type="text/css">
red-background {
//Empty, used just as a reference to set the style with jQuery
}
</style>
</h:head>
<h:body>
<h:form>
<p:commandButton action="#{bean.send}" value="Send" ajax="false" />
<p:selectOneMenu id="carMenu" style="margin-top:4px;"
value="#{bean.selectedCar}" effect="fade" autoupdate="true" var="car"
converter="omnifaces.SelectItemsConverter" onchange="setSelectionColor();">
<f:selectItems id="carsId" value="#{bean.allCars}" var="carItem"
itemLabel="#{carItem.name}" itemValue="#{carItem}" />
<p:column>
<h:outputText value="#{car.name}"
styleClass="#{car.sold ? 'red-background' : ''}" />
</p:column>
</p:selectOneMenu>
</h:form>
<script>
$(document).ready(function() {
//Set red background for the options (not for td, but for its parent tr)
$(".red-background").parent().css( "background-color", "red" );
setSelectionColor();
});
function setSelectionColor(){
//Check if the selected value has a red background
//(active and red-background styles altogether),
//if true, set the selectonemenu label to red too
if($(".ui-state-active .red-background").size() > 0){
$(".ui-selectonemenu-label").css( "background-color", "red" );
}else{
$(".ui-selectonemenu-label").css( "background-color", "white" );
}
}
</script>
</h:body>
</html>
Bean.java
@ManagedBean
@ViewScoped
public class Bean implements Serializable {
public class Car implements Serializable {
String name;
boolean sold;
public Car(String name, boolean sold) {
this.name = name;
this.sold = sold;
}
public String getName() {
return name;
}
public boolean isSold() {
return sold;
}
}
private List<Car> allCars = Arrays.asList(new Car("Audi", true), new Car(
"Mercedes", false));
public List<Car> getAllCars() {
return allCars;
}
private Car selectedCar;
public Car getSelectedCar() {
return selectedCar;
}
public void setSelectedCar(Car selectedCar) {
this.selectedCar = selectedCar;
}
public void send() {
System.out.println("Sent " + selectedCar.name);
}
}
You might also be interested in setting only the font color and not the background:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<style type="text/css">
.red-font {
color: red;
}
</style>
</h:head>
<h:body>
<h:form>
<p:commandButton action="#{bean.send}" value="Send" ajax="false" />
<p:selectOneMenu id="carMenu" style="margin-top:4px;"
value="#{bean.selectedCar}" effect="fade" autoupdate="true"
var="car"
converter="omnifaces.SelectItemsConverter">
<f:selectItems id="carsId" value="#{bean.allCars}" var="carItems"
itemLabel="#{carItems.name}" itemValue="#{carItems}" />
<p:column>
<h:outputText styleClass="#{car.sold ? 'red-font' : ''}"
value="#{car.name}" />
</p:column>
</p:selectOneMenu>
</h:form>
</h:body>
</html>