SelectManyCheckbox
SelectManyCheckbox is used to choose multiple items from a collection.
Documentation
<style type="text/css">
.ui-datalist ul {
padding: 0px 10px 0 20px;
margin: 5px 0;
}
.ui-datalist {
margin-bottom: 10px
}
.ui-noborder tr.ui-widget-content {
background: none;
}
</style>
<h:form>
<h3 style="margin-top:0px">Basic Layout</h3>
<p:selectManyCheckbox id="basic" value="#{checkboxView.selectedConsoles}">
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectManyCheckbox>
<h3>Grid Layout</h3>
<p:selectManyCheckbox id="grid" value="#{checkboxView.selectedCities}" layout="grid" columns="3">
<f:selectItems value="#{checkboxView.cities}" var="city" itemLabel="#{city}" itemValue="#{city}" />
</p:selectManyCheckbox>
<h3>Responsive</h3>
<p:selectManyCheckbox id="grid2" value="#{checkboxView.selectedCities2}" layout="responsive" columns="3">
<f:selectItems value="#{checkboxView.cities}" var="city" itemLabel="#{city}" itemValue="#{city}" />
</p:selectManyCheckbox>
<h3>Custom Layout</h3>
<p:outputPanel id="customPanel" style="margin-bottom:20px">
<p:selectManyCheckbox id="custom" value="#{checkboxView.selectedConsoles2}" layout="custom">
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectManyCheckbox>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-4" style="text-align:center">
<h:outputLabel for="opt1" value="Xbox One" style="display:block;margin-bottom: 8px"/>
<p:checkbox id="opt1" for="custom" itemIndex="0" />
</div>
<div class="ui-grid-col-4" style="text-align:center">
<h:outputLabel for="opt2" value="PS4" style="display:block;margin-bottom: 8px"/>
<p:checkbox id="opt2" for="custom" itemIndex="1" />
</div>
<div class="ui-grid-col-4" style="text-align:center">
<h:outputLabel for="opt3" value="Wii U" style="display:block;margin-bottom: 8px"/>
<p:checkbox id="opt3" for="custom" itemIndex="2" />
</div>
</div>
</div>
</p:outputPanel>
<h3>Grouped</h3>
<p:selectManyCheckbox id="grid3" value="#{checkboxView.selectedCars}" layout="pageDirection" columns="1">
<f:selectItems value="#{checkboxView.cars}" var="car" itemLabel="#{car}" itemValue="#{car}" />
</p:selectManyCheckbox>
<p:separator />
<p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="pi pi-check" />
<p:dialog header="Values" modal="true" showEffect="clip" widgetVar="dlg" resizable="false">
<p:outputPanel id="display">
<p:dataList value="#{checkboxView.selectedConsoles}" var="console">
<f:facet name="header">
Basic
</f:facet>
#{console}
</p:dataList>
<p:dataList value="#{checkboxView.selectedCities}" var="city">
<f:facet name="header">
Grid
</f:facet>
#{city}
</p:dataList>
<p:dataList value="#{checkboxView.selectedCities2}" var="city">
<f:facet name="header">
Grid
</f:facet>
#{city}
</p:dataList>
<p:dataList value="#{checkboxView.selectedConsoles2}" var="console">
<f:facet name="header">
Custom
</f:facet>
#{console}
</p:dataList>
<p:dataList value="#{checkboxView.selectedCars}" var="car">
<f:facet name="header">
Cars
</f:facet>
#{car}
</p:dataList>
</p:outputPanel>
</p:dialog>
</h:form>
@Named
@RequestScoped
public class CheckboxView {
private String[] selectedConsoles;
private String[] selectedConsoles2;
private String[] selectedCities;
private String[] selectedCities2;
private List<String> cities;
private List<SelectItem> cars;
private String[] selectedCars;
@PostConstruct
public void init() {
cities = new ArrayList<String>();
cities.add("Miami");
cities.add("London");
cities.add("Paris");
cities.add("Istanbul");
cities.add("Berlin");
cities.add("Barcelona");
cities.add("Rome");
cities.add("Brasilia");
cities.add("Amsterdam");
cars = new ArrayList<>();
SelectItemGroup germanCars = new SelectItemGroup("German Cars");
germanCars.setSelectItems(new SelectItem[] {
new SelectItem("BMW", "BMW"),
new SelectItem("Mercedes", "Mercedes"),
new SelectItem("Volkswagen", "Volkswagen")
});
SelectItemGroup americanCars = new SelectItemGroup("American Cars");
americanCars.setSelectItems(new SelectItem[]{
new SelectItem("Chrysler", "Chrysler"),
new SelectItem("GM", "GM"),
new SelectItem("Ford", "Ford")
});
cars.add(germanCars);
cars.add(americanCars);
}
public String[] getSelectedConsoles() {
return selectedConsoles;
}
public void setSelectedConsoles(String[] selectedConsoles) {
this.selectedConsoles = selectedConsoles;
}
public String[] getSelectedCities() {
return selectedCities;
}
public void setSelectedCities(String[] selectedCities) {
this.selectedCities = selectedCities;
}
public String[] getSelectedCities2() {
return selectedCities2;
}
public void setSelectedCities2(String[] selectedCities2) {
this.selectedCities2 = selectedCities2;
}
public String[] getSelectedConsoles2() {
return selectedConsoles2;
}
public void setSelectedConsoles2(String[] selectedConsoles2) {
this.selectedConsoles2 = selectedConsoles2;
}
public List<String> getCities() {
return cities;
}
public List<SelectItem> getCars() {
return cars;
}
public void setCars(List<SelectItem> cars) {
this.cars = cars;
}
public String[] getSelectedCars() {
return selectedCars;
}
public void setSelectedCars(String[] selectedCars) {
this.selectedCars = selectedCars;
}
public void onItemUnselect(UnselectEvent event) {
FacesContext context = FacesContext.getCurrentInstance();
FacesMessage msg = new FacesMessage();
msg.setSummary("Item unselected: " + event.getObject().toString());
msg.setSeverity(FacesMessage.SEVERITY_INFO);
context.addMessage(null, msg);
}
}
