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, responsive layout and more.

Basic PickList

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

Available
Starting
Source: San FranciscoLondonParisIstanbulBerlinBarcelonaRome
Target:
Source: afterdarkafternoonafterworkaristoblack-tie
Target:
<h:form>
    <p:growl id="msg" showDetail="true" escape="false" />

    <h3 style="margin-top: 0">Basic PickList</h3>
    <p:pickList id="pickList" value="#{pickListView.cities}" var="cities" itemLabel="#{cities}" itemValue="#{cities}" />

    <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 Events and Responsive</h3>
    <p:pickList id="PojoPickList" value="#{pickListView.themes}" var="theme" effect="bounce"
                itemValue="#{theme}" itemLabel="#{theme.displayName}" showSourceControls="true" showTargetControls="true" showCheckbox="true" responsive="true"
                showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains" converter="theme">

        <f:facet name="sourceCaption">Available</f:facet>
        <f:facet name="targetCaption">Starting</f:facet>

        <p:ajax event="transfer" listener="#{pickListView.onTransfer}" update="msg" />
        <p:ajax event="select" listener="#{pickListView.onSelect}" update="msg" />
        <p:ajax event="unselect" listener="#{pickListView.onUnselect}" update="msg" />
        <p:ajax event="reorder" listener="#{pickListView.onReorder}" update="msg" />

        <p:column style="width:10%">
            <h:outputText styleClass="ui-theme ui-theme-#{theme.name}" />
        </p:column>

        <p:column style="width:90%;">
            <h:outputText value="#{theme.displayName}" />
        </p:column>
    </p:pickList>

    <p:commandButton id="pojoSubmit" value="Submit" update="displayThemes" oncomplete="PF('themesDialog').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="#{pickListView.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="#{pickListView.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="themesDialog">
        <h:panelGrid id="displayThemes" columns="2">
            <h:outputText value="Source: " style="font-weight:bold" />
            <ui:repeat value="#{pickListView.themes.source}" var="theme">
                <h:outputText value="#{theme.name}" style="margin-right:5px" />
            </ui:repeat>

            <h:outputText value="Target: " style="font-weight:bold" />
            <ui:repeat value="#{pickListView.themes.target}" var="theme">
                <h:outputText value="#{theme.name}" style="margin-right:5px" />
            </ui:repeat>
        </h:panelGrid>
    </p:dialog>
</h:form>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.1.4 on Mojarra-2.2.10.