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

Basic OrderList

  • San Francisco
  • London
  • Paris
  • Istanbul
  • Berlin
  • Barcelona
  • Rome

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

Available
  • Afterdark
  • Afternoon
  • Afterwork
  • Aristo
  • Black-Tie
  • Blitzer
Cities
  • San Francisco
  • London
  • Paris
  • Istanbul
  • Berlin
  • Barcelona
  • Rome
Themes
Afterdark
Afternoon
Afterwork
Aristo
Black-Tie
Blitzer
<h:form>
    <p:growl id="msgs" showDetail="true" />
            
    <h3 style="margin-top: 0">Basic OrderList</h3>
    <p:orderList value="#{orderListView.cities}" var="city" controlsLocation="none" itemLabel="#{city}" itemValue="#{city}" />
    <p:commandButton value="Submit" update="displayCities" oncomplete="PF('cityDialog').show()" style="margin-top:5px" />

    <h3>Pojo Support with Clip Effect, Captions, Custom Content, Reorder Controls, Events and Responsive</h3>
    <p:orderList value="#{orderListView.themes}" var="theme" itemValue="#{theme}" converter="theme" controlsLocation="left" responsive="true">
        <p:ajax event="select" listener="#{orderListView.onSelect}" update="msgs"/>
        <p:ajax event="unselect" listener="#{orderListView.onUnselect}" update="msgs"/>
        <p:ajax event="reorder" listener="#{orderListView.onReorder}" update="msgs"/>

        <f:facet name="caption">Available</f:facet>

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

         <p:column>
            <h:outputText value="#{theme.displayName}" />
        </p:column>
    </p:orderList>
    <p:commandButton value="Submit" update="displayThemes" oncomplete="PF('themesDialog').show()" style="margin-top:5px" />

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

    <p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="themesDialog" header="Themes" width="200" id="dlgThemes">
        <h:panelGrid id="displayThemes" columns="2">
            <ui:repeat value="#{orderListView.themes}" var="theme">
                <h:outputText value="#{theme.displayName}" style="margin-right:5px" />
            </ui:repeat>
        </h:panelGrid>
    </p:dialog>
</h:form>
                
PrimeTek, Copyright © 2015
All rights reserved.
Running PrimeFaces-6.1-SNAPSHOT on Mojarra-2.2.8.