DataList

DataList displays data in a list layout.

Documentation
Basic
  1. Fiat, 1966
  2. Volkswagen, 2001
  3. Volkswagen, 2005
  4. Fiat, 1991
  5. Fiat, 1962
  6. Volvo, 2004
  7. Ford, 1973
  8. BMW, 1971
  9. Ford, 1970
  10. Fiat, 1988
Definition
Brand: Volvo, Year: 1995
Brand: Ford, Year: 1964
Brand: Honda, Year: 2000
Brand: Fiat, Year: 2008
Brand: Jaguar, Year: 1997
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>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.