Reputation: 27909
I'm displaying checkboxes using <p:selectManyCheckbox>
as follows.
<p:selectManyCheckbox id="colourList" value="#{productColourManagedBean.colours}" layout="grid" columns="4">
<f:selectItems var="colour"
value="#{productColourManagedBean.colourList}"
itemLabel="#{colour.colourHex}"
itemValue="#{colour.colourId}"/>
</p:selectManyCheckbox>
It displays a list of checkboxes in a grid layout based on the list - List<Colour>
supplied from its corresponding JSF managed bean.
It shows colourHex
as checkbox label. I need to display the actual colour as checkbox label so that the list can appear something like the following.
This can be achieved by using a container tag like <div>
something like the following.
<div style="background-color:##{colour.colourHex}"
title="name : #{colour.colourName} Hex : #{colour.colourHex}">
</div>
But how can this be achieved by using <p:selectManyCheckbox>
or something else?
Upvotes: 2
Views: 6025
Reputation: 1109865
You can achieve this with a <p:selectManyMenu>
with var
and showCheckbox
attributes set. The var
attribute allows defining custom content by a nested <p:column>
. The showCheckbox
attribtue can be set to true
to get a checkbox column. See also the "advanced" example in its showcase.
Here's a kickoff example (with hints how you should actually be naming those properties, there's no need to repeat the entity's name in the property name):
<p:selectManyMenu value="#{bean.selectedColors}" var="color" showCheckbox="true" converter="omnifaces.SelectItemsConverter">
<f:selectItems value="#{bean.availableColors}" var="c" itemValue="#{c}" itemLabel="#{c.name}" />
<p:column>
<div style="width: 100px; height: 20px; background-color:##{color.hex}; border: 1px solid black;"
title="Name: #{color.name} Hex: #{color.hex}" />
</p:column>
</p:selectManyMenu>
Bean is rather straightforward:
private List<Color> selectedColors;
private List<Color> availableColors;
// ...
Here's how it look like for me with 5 basic colors:
Upvotes: 3