Close

PrimeFaces - SelectManyMenu Example

[Last Updated: Oct 5, 2017]

This example shows how to use SelectManyMenu.

JSF page

src/main/webapp/index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
<style type="text/css">
.ui-selectlistbox-listcontainer{
 overflow: initial !important;
}
</style>
</h:head>

<h:body>
    <h2>SelectManyMenu Example</h2>
    <h:form>
        <p:selectManyMenu value="#{empSelectBean.selectedEmployees}"
                          converter="empConverter"
                          var="s"
                          filter="true" filterMatchMode="contains"
                          showCheckbox="true"
                          style="width:300px;">
            <f:selectItems value="#{empSelectBean.employees}" var="emp"
                           itemLabel="#{emp.name}" itemValue="#{emp}"/>
            <p:column>
                <h:outputText value="#{s.name}"/>
            </p:column>
            <p:column>
                <h:outputText value="#{s.dept}"/>
            </p:column>
        </p:selectManyMenu>
        <p:commandButton value="Submit" update="selectedEmpPanel"/>

        <h3>Selected Employees:</h3>
        <h:panelGrid id="selectedEmpPanel" columns="1">
            <ui:repeat value="#{empSelectBean.selectedEmployees}" var="emp">
                <h:outputText value="#{emp.name} (#{emp.dept})"/>
                <br/>
            </ui:repeat>
        </h:panelGrid>
    </h:form>
</h:body>

</html>

The managed bean

@ManagedBean(name = "empSelectBean")
@ViewScoped
public class EmployeeSelectionBean {

  private List<Employee> selectedEmployees;

  public void setSelectedEmployees(List<Employee> selectedEmployees) {
      this.selectedEmployees = selectedEmployees;
  }

  public List<Employee> getSelectedEmployees() {
      return selectedEmployees;
  }

  public List<Employee> getEmployees() {
      return EmployeeService.Instance.getAllEmployees();
  }
}
public class Employee {
  private String id;
  private String name;
  private String dept;
    .............
}
@FacesConverter(value = "empConverter")
public class EmployeeConverter implements Converter {
  @Override
  public Object getAsObject(FacesContext fc, UIComponent comp, String value) {
     Employee e = EmployeeService.Instance.getEmployeeById(value);
      return e;
  }

  @Override
  public String getAsString(FacesContext fc, UIComponent comp, Object value) {
      return ((Employee) value).getId();
  }
}

To try examples, run embedded tomcat (configured in pom.xml of example project below):

mvn tomcat7:run-war

Output

Example Project

Dependencies and Technologies Used:

  • primefaces 6.1 primefaces
  • jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
  • jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
  • JDK 1.8
  • Maven 3.3.9

PrimeFaces SelectManyCheckbox Example Select All Download
  • many-menu-example
    • src
      • main
        • java
          • com
            • logicbig
              • example
        • webapp
          • index.xhtml

    See Also