DataGrid

DataGrid displays a collection of data in grid layout. Ajax Pagination is a built-in feature and paginator UI is fully customizable via various options like paginatorTemplate, rowsPerPageOptions, pageLinks and more.

45f8d93a
1968
8dd12497
1964
438f47bb
1979
93c6f0cf
2007
8a9a6587
1960
32f916c0
1962
c867c4c6
1969
477b336e
2006
64c6cc45
1997
850341e8
2003
f9ed2753
2006
f91e8e99
2003
Car Detail

Source

<h:form id="form">

	<p:dataGrid var="car" value="#{tableBean.cars}" columns="3"
		rows="12" paginator="true"
		paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
		rowsPerPageTemplate="9,12,15">

        <p:panel header="#{car.model}" style="text-align:center">
            <h:panelGrid columns="1" style="width:100%">
                <p:graphicImage value="/images/cars/#{car.manufacturer}.jpg"/> 

                <h:outputText value="#{car.year}" />

                <p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail">
                    <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" /> 
                    <f:setPropertyActionListener value="#{car}" 
                            target="#{tableBean.selectedCar}" />
                </p:commandLink>
            </h:panelGrid>
        </p:panel>

	</p:dataGrid>
	
	<p:dialog header="Car Detail" widgetVar="carDialog" modal="true">
		<p:outputPanel id="carDetail" style="text-align:center;">
		
			<p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
			
			<h:panelGrid  columns="2" cellpadding="5">
				<h:outputLabel for="modelNo" value="Model No: " />
				<h:outputText id="modelNo" value="#{tableBean.selectedCar.model}" />
				
				<h:outputLabel for="year" value="Year: " />
				<h:outputText id="year" value="#{tableBean.selectedCar.year}" />
				
				<h:outputLabel for="color" value="Color: " />
				<h:outputText id="color" value="#{tableBean.selectedCar.color}" style="color:#{tableBean.selectedCar.color}"/>
			</h:panelGrid>
		</p:outputPanel>
	</p:dialog>

</h:form>