OrderList

OrderList is used to sort a collection via Drag and Drop based reordering, transition effects, pojo support, theme support and more.

Basic OrderList

  • Istanbul
  • Ankara
  • Izmir
  • Antalya
  • Bursa

Pojo Support with Clip Effect, Captions, Custom Content and Reorder Controls

Available
  • Messi - 10
  • Iniesta - 8
  • Villa - 7
  • Xavi - 6
Cities
  • Istanbul
  • Ankara
  • Izmir
  • Antalya
  • Bursa
Players
Messi - 10
Iniesta - 8
Villa - 7
Xavi - 6

Source

<h:form id="form">

    <h3 style="margin-top:0">Basic OrderList</h3>
    <p:orderList value="#{orderListBean.cities}" var="city" controlsLocation="none"
                 itemLabel="#{city}" itemValue="#{city}" id="basicList"/>

    <p:commandButton value="Submit" update="displayCities" oncomplete="PF('cityDialog').show()" style="margin-top:5px" id="btnCitySubmit"/>

    <h3>Pojo Support with Clip Effect, Captions, Custom Content and Reorder Controls</h3>
    <p:orderList value="#{orderListBean.players}" var="player"
                    itemValue="#{player}" converter="player" controlsLocation="left" id="customList">
        <f:facet name="caption">Available</f:facet>

        <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} - #{player.number}
        </p:column>
    </p:orderList>

    <p:commandButton value="Submit" update="displayPlayers" oncomplete="PF('playerDialog').show()" style="margin-top:5px" id="btnPlayerSubmit"/>

    <p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="cityDialog" header="Cities" width="200" id="dlgCities">
        <p:dataList id="displayCities" value="#{orderListBean.cities}" var="city">
            <h:outputText value="#{city}"  />
        </p:dataList>
    </p:dialog>

    <p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="playerDialog" header="Players" width="200" id="dlgPlayers">
        <h:panelGrid id="displayPlayers" columns="2">
            <ui:repeat value="#{orderListBean.players}" var="player">
                <h:outputText value="#{player.name} - #{player.number}" style="margin-right:5px" />
                <br />
            </ui:repeat>
        </h:panelGrid>
    </p:dialog>

</h:form>