DataList

DataList displays data in a list layout.

Basic
  1. Audi, 1985
  2. Volkswagen, 1967
  3. Renault, 1997
  4. BMW, 1966
  5. Mercedes, 1992
  6. Audi, 1984
  7. Volkswagen, 1964
  8. Volvo, 2006
  9. Mercedes, 1995
  10. Ford, 2009
Definition
Brand: Fiat, Year: 1962
Brand: Renault, Year: 1998
Brand: Volkswagen, Year: 1982
Brand: Mercedes, Year: 2005
Brand: Honda, Year: 2001
Paginator
Car Info
<style type="text/css">
    .ui-datalist {
        width:300px;
        margin-bottom: 20px;
    }

    .ui-datalist-item {
        padding:3px;
    }

    .paginated .ui-datalist-data {
        padding-left: 20px;
    }
</style>


<h:form id="form">
    <p:dataList value="#{dataListView.cars1}" var="car" type="ordered">
        <f:facet name="header">
            Basic
        </f:facet>
        #{car.brand}, #{car.year}
    </p:dataList>

    <p:dataList value="#{dataListView.cars2}" var="car" type="definition">
        <f:facet name="header">
            Definition
        </f:facet>
        Brand: #{car.brand}, Year: #{car.year}
        <f:facet name="description">
            <p:graphicImage name="demo/images/car/#{car.brand}.gif"/> 
        </f:facet>
    </p:dataList>

    <p:dataList value="#{dataListView.cars3}" var="car" type="unordered" itemType="none" paginator="true" rows="10" styleClass="paginated">
        <f:facet name="header">
            Paginator
        </f:facet>
        <p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail" styleClass="ui-icon pi pi-search" style="float:left;margin-right:10px;margin-top:3px; color:#333333">
            <f:setPropertyActionListener value="#{car}" target="#{dataListView.selectedCar}" />
            <h:outputText value="#{car.brand}, #{car.year}" />
        </p:commandLink>
        <h:outputText value="#{car.brand}, #{car.year}" style="display:inline-block"/>
    </p:dataList>

    <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="blind" hideEffect="explode" resizable="false">
        <p:outputPanel id="carDetail" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="#{not empty dataListView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{dataListView.selectedCar.brand}-big.gif"/> 
                </f:facet>

                <h:outputText value="Id:" />
                <h:outputText value="#{dataListView.selectedCar.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{dataListView.selectedCar.year}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{dataListView.selectedCar.color}" style="color:#{dataListView.selectedCar.color}"/>

                <h:outputText value="Price" />
                <h:outputText value="$#{dataListView.selectedCar.price}" />
            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>
</h:form>