The <rich:orderingList> is a component for ordering items in a list. This component provides possibilities to reorder a list and sort it on the client side.

Figure 6.173.  <rich:orderingList> component

The <rich:orderingList> component consists of

The "value" and "var" attributes are used to access the values of a list.

Controls rendering is based on the "controlsType" attribute. Possible types are button or none.

The information about the "converter" attribute is here.

The "selection" attribute stores the collection of items selected by you. In the example below after submitting the form the current collection is placed in the object's property and then <rich:dataTable> with selected items is shown.

Example:

...

<h:form>

        <rich:orderingList value="#{bean.simpleItems}" var="item" selection="#{bean.selection}" controlsType="button">

                <rich:column>

                    <f:facet name="header">

                            <h:outputText value="Cars" />

                    </f:facet>

                    <h:outputText value="#{item}" />

                </rich:column>

        </rich:orderingList>

        <rich:dataTable id="infoPanelID" value="#{bean.info}" var="info" rendered="true">

                <rich:column>

                            <h:outputText value="#{info}" />

                </rich:column>

        </rich:dataTable>

        <a4j:commandButton value="reRender" reRender="infoPanelID" />

</h:form>

...

The <rich:orderingList> component allows to use "caption" facet. A caption could be also defined with "captionLabel" attribute.

Simple example is placed below.

Example:

...

<rich:orderingList value="#{bean.simpleItems}" var="item" controlsType="button" selection="#{bean.selection}">

        <f:facet name="caption">

                <h:outputText value="Caption Facet" />

        </f:facet>

        <rich:column>

                <f:facet name="header">

                <h:outputText value="Cars" />

                </f:facet>

                <h:outputText value="#{item.name}" />

        </rich:column>

        <rich:column>

                <f:facet name="header">

                <h:outputText value="Price" />

                </f:facet>

                <h:outputText value="#{item.price}" />

        </rich:column>

</rich:orderingList>

...

The <rich:orderingList> component provides the possibility to use ordering controls set, which performs reordering. Every control has possibility to be disabled.

An ordering controls set could be defined with "topControlLabel" , "bottomControlLabel" , "upControlLabel" , "downControlLabel" attributes.

It is also possible to use "topControl" , "topControlDisabled" , "bottomControl" , "bottomControlDisabled" , "upControl" , "upControlDisabled" , "downControl" , "downControlDisabled" facets in order to replace the default controls with facets content.

Example:

...

<rich:orderingList value="#{bean.simpleItems}" var="item" controlsType="button" selection="#{bean.selection}">

        <f:facet name="topControl">

                <h:outputText value="Move to top" />

        </f:facet>

        <f:facet name="upControl">

                <h:outputText value="Move up" />

        </f:facet>

        <f:facet name="downControl">

                <h:outputText value="Move down" />

        </f:facet>

        <f:facet name="bottomControl">

                <h:outputText value="Move to bottom" />

        </f:facet>

<rich:orderingList>

...

The position of the controls relatively to a list could be customized with:

The <rich:orderingList> component has a possibility to hide any of the controls by pairs using following attributes:

The <rich:orderingList> component allows to use internationalization method to redefine and localize the labels. You could use application resource bundle and define RICH_SHUTTLES_TOP_LABEL, RICH_SHUTTLES_BOTTOM_LABEL, RICH_SHUTTLES_UP_LABEL, RICH_SHUTTLES_DOWN_LABEL there.

You could also pack org.richfaces.renderkit.orderingList resource bundle with your JARs defining the same properties.

Table of <rich:orderingList> attributes.

On RichFaces LiveDemo page you can see an example of <rich:orderingList> usage and sources for the given example.