SelectManyMenu ((Un)SelectAll)
SelectManyMenu is used to choose multiple items from a list. These example show selectAll/unselectAll-functionality.
Documentation
<style type="text/css">
.ui-datalist .ui-datalist-content {
border:0 none
}
.ui-datalist ul {
padding:0px 10px 0 20px;
margin: 5px 0;
}
.label, .value {
vertical-align: top
}
.output {
font-weight: bold
}
.ui-selectmanymenu {
width: 175px;
}
</style>
<h:form>
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5" columnClasses="label, value">
<p:outputLabel for="basic" value="Basic:" />
<p:selectManyMenu id="basic" widgetVar="basic" value="#{selectManyView.selectedOptions}">
<f:selectItem itemLabel="Option 1" itemValue="1" />
<f:selectItem itemLabel="Option 2" itemValue="2" />
<f:selectItem itemLabel="Option 3" itemValue="3" />
</p:selectManyMenu>
<p:outputPanel></p:outputPanel>
<p:outputPanel>
<p:commandButton value="selectAll" onclick="PF('basic').selectAll()" />
<p:commandButton value="unselectAll" onclick="PF('basic').unselectAll()" />
</p:outputPanel>
<p:outputLabel for="basic2" value="Basic (with checkboxes):" />
<p:selectManyMenu id="basic2" widgetVar="basic2" value="#{selectManyView.selectedOptions2}" showCheckbox="true">
<f:selectItem itemLabel="Option 1" itemValue="1" />
<f:selectItem itemLabel="Option 2" itemValue="2" />
<f:selectItem itemLabel="Option 3" itemValue="3" />
</p:selectManyMenu>
<p:outputPanel></p:outputPanel>
<p:outputPanel>
<p:commandButton value="selectAll" onclick="PF('basic2').selectAll()" />
<p:commandButton value="unselectAll" onclick="PF('basic2').unselectAll()" />
</p:outputPanel>
<p:outputLabel for="advanced" value="Advanced:" />
<p:selectManyMenu id="advanced" widgetVar="advanced" value="#{selectManyView.selectedThemes}" converter="#{themeConverter}"
var="t" filter="true" filterMatchMode="contains">
<f:selectItems value="#{selectManyView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" />
<p:column>
<h:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{t.name}.png" alt="#{t.name}" styleClass="ui-theme" />
</p:column>
<p:column>
<h:outputText value="#{t.displayName}" />
</p:column>
</p:selectManyMenu>
<p:outputPanel></p:outputPanel>
<p:outputPanel>
<p:commandButton value="selectAll" onclick="PF('advanced').selectAll()" />
<p:commandButton value="unselectAll" onclick="PF('advanced').unselectAll()" />
</p:outputPanel>
<p:outputLabel for="advanced2" value="Advanced: (with checkboxes)" />
<p:selectManyMenu id="advanced2" widgetVar="advanced2" value="#{selectManyView.selectedThemes2}" converter="#{themeConverter}"
var="t" filter="true" filterMatchMode="contains" showCheckbox="true">
<f:selectItems value="#{selectManyView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" />
<p:column>
<h:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{t.name}.png" alt="#{t.name}" styleClass="ui-theme" />
</p:column>
<p:column>
<h:outputText value="#{t.displayName}" />
</p:column>
</p:selectManyMenu>
<p:outputPanel></p:outputPanel>
<p:outputPanel>
<p:commandButton value="selectAll" onclick="PF('advanced2').selectAll()" />
<p:commandButton value="unselectAll" onclick="PF('advanced2').unselectAll()" />
</p:outputPanel>
</h:panelGrid>
<p:separator />
<p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="pi pi-check" />
<p:dialog header="Selected Values" modal="true" showEffect="fade" widgetVar="dlg" resizable="false">
<p:panelGrid columns="2" id="display" columnClasses="label,output">
<h:outputText value="Basic:" />
<p:dataList value="#{selectManyView.selectedOptions}" var="option">
<h:outputText value="#{option}" />
</p:dataList>
<h:outputText value="Basic (with checkboxes):" />
<p:dataList value="#{selectManyView.selectedOptions2}" var="option">
<h:outputText value="#{option}" />
</p:dataList>
<h:outputText value="Advanced:" />
<p:dataList value="#{selectManyView.selectedThemes}" var="t">
<h:outputText value="#{t}" />
</p:dataList>
<h:outputText value="Advanced (with checkboxes):" />
<p:dataList value="#{selectManyView.selectedThemes2}" var="t">
<h:outputText value="#{t}" />
</p:dataList>
</p:panelGrid>
</p:dialog>
</h:form>
@Named
@RequestScoped
public class SelectManyView {
private List<String> selectedOptions;
private List<String> selectedOptions2;
private List<Theme> selectedThemes;
private List<Theme> selectedThemes2;
private List<Theme> themes;
@Inject
private ThemeService service;
@PostConstruct
public void init() {
themes = service.getThemes();
}
public List<Theme> getThemes() {
return themes;
}
public void setService(ThemeService service) {
this.service = service;
}
public List<String> getSelectedOptions() {
return selectedOptions;
}
public void setSelectedOptions(List<String> selectedOptions) {
this.selectedOptions = selectedOptions;
}
public List<Theme> getSelectedThemes() {
return selectedThemes;
}
public void setSelectedThemes(List<Theme> selectedThemes) {
this.selectedThemes = selectedThemes;
}
public List<String> getSelectedOptions2() {
return selectedOptions2;
}
public void setSelectedOptions2(List<String> selectedOptions2) {
this.selectedOptions2 = selectedOptions2;
}
public List<Theme> getSelectedThemes2() {
return selectedThemes2;
}
public void setSelectedThemes2(List<Theme> selectedThemes2) {
this.selectedThemes2 = selectedThemes2;
}
}
@Named
@ApplicationScoped
public class ThemeService {
private List<Theme> themes;
@PostConstruct
public void init() {
themes = new ArrayList<>();
themes.add(new Theme(0, "Nova-Light", "nova-light"));
themes.add(new Theme(1, "Nova-Dark", "nova-dark"));
themes.add(new Theme(2, "Nova-Colored", "nova-colored"));
themes.add(new Theme(3, "Luna-Blue", "luna-blue"));
themes.add(new Theme(4, "Luna-Amber", "luna-amber"));
themes.add(new Theme(5, "Luna-Green", "luna-green"));
themes.add(new Theme(6, "Luna-Pink", "luna-pink"));
themes.add(new Theme(7, "Omega", "omega"));
}
public List<Theme> getThemes() {
return themes;
}
}
public class Theme {
private int id;
private String displayName;
private String name;
public Theme() {}
public Theme(int id, String displayName, String name) {
this.id = id;
this.displayName = displayName;
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getDisplayName() {
return displayName;
}
public void setDisplayName(String displayName) {
this.displayName = displayName;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return name;
}
}
