DataList

DataList displays data in a list layout.

Basic
  1. Honda, 1967
  2. Volvo, 1967
  3. Honda, 1993
  4. Renault, 1981
  5. Renault, 1975
  6. BMW, 2002
  7. Audi, 1965
  8. Volvo, 1966
  9. BMW, 1975
  10. Audi, 1986
Definition
Brand: Volkswagen, Year: 1969
Brand: Honda, Year: 1962
Brand: Honda, Year: 2008
Brand: Audi, Year: 2003
Brand: Audi, Year: 2003
Paginator
Car Info
<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 ui-icon-search" style="float:left;margin-right:10px">
            <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>