PickList

PickList is a dual list input component featuring Drag and Drop based reordering, transition effects, pojo support, theming filtering, captions, checkbox selection, client-server callbacks and more.

Basic PickList

  • Istanbul
  • Ankara
  • Izmir
  • Antalya
  • Bursa

    PickList on Steroids: Pojo Support with Effect, Captions, Custom Content, Reordering, Filtering, Checkboxes and Ajax Transfer

    Available
    • Messi
    • Iniesta
    • Villa
    • Alves
    • Xavi
    • Puyol
    Starting
      Source: IstanbulAnkaraIzmirAntalyaBursa
      Target:
      Source: MessiIniestaVillaAlvesXaviPuyol
      Target:

      Source

      <h:form>
                      
          <p:growl id="msg" showDetail="true" escape="false" />
      
          <h3 style="margin-top:0">Basic PickList</h3>
      
          <p:pickList id="pickList" value="#{pickListBean.cities}" var="city" 
                      itemLabel="#{city}" itemValue="#{city}" />
      
          <p:commandButton id="citySubmit" value="Submit" update="displayCities" oncomplete="PF('cityDialog').show()" style="margin-top:5px"/>
      
          <h3>PickList on Steroids: Pojo Support with Effect, Captions, Custom Content, Reordering, Filtering, Checkboxes and Ajax Transfer</h3>
          <p:pickList id="pojoPickList" value="#{pickListBean.players}" var="player" effect="bounce"
                          itemValue="#{player}" itemLabel="#{player.name}" converter="player"
                          showSourceControls="true" showTargetControls="true" showCheckbox="true"
                          showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains" >
      
              <f:facet name="sourceCaption">Available</f:facet>
              <f:facet name="targetCaption">Starting</f:facet>
      
              <p:ajax event="transfer" listener="#{pickListBean.onTransfer}" update="msg" />
      
              <p:column style="width:25%">
                  <p:graphicImage value="/images/barca/#{player.photo}" width="30" height="40" />
              </p:column>
      
                  <p:column style="width:75%;">
                  #{player.name}
              </p:column>
      
          </p:pickList>
      
          <p:commandButton id="pojoSubmit" value="Submit" update="displayPlayers" oncomplete="PF('playerDialog').show()" style="margin-top:5px"/>
      
          <p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="cityDialog">
              <h:panelGrid id="displayCities" columns="2">
                  <h:outputText value="Source: " style="font-weight:bold"/>
                      <ui:repeat value="#{pickListBean.cities.source}" var="item">
                      <h:outputText value="#{item}" style="margin-right:5px" />
                  </ui:repeat>
      
                  <h:outputText value="Target: " style="font-weight:bold"/>
                  <ui:repeat value="#{pickListBean.cities.target}" var="item">
                      <h:outputText value="#{item}" style="margin-right:5px" />
                  </ui:repeat>
              </h:panelGrid>
          </p:dialog>
      
          <p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="playerDialog">
              <h:panelGrid id="displayPlayers" columns="2">
                  <h:outputText value="Source: " style="font-weight:bold"/>
                  <ui:repeat value="#{pickListBean.players.source}" var="player">
                      <h:outputText value="#{player.name}" style="margin-right:5px" />
                  </ui:repeat>
      
                  <h:outputText value="Target: " style="font-weight:bold"/>
                  <ui:repeat value="#{pickListBean.players.target}" var="player">
                      <h:outputText value="#{player.name}" style="margin-right:5px" />
                  </ui:repeat>
              </h:panelGrid>
          </p:dialog>
      
      </h:form>