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.

c0eab000
2000
c5187461
1985
18d8a462
1998
31ae2bd8
1977
891c20d7
1994
2b6983dd
1965
46106036
1974
9e0f4854
2005
28d477c5
1984
1a67b0a8
1998
6f62280d
1997
bd620e5a
1991
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>