DataTable - Row Selection

This examples demonstrates how to select a row using a PrimeFaces commandButton and standard setPropertyActionListener.

ModelYearManufacturerColor
f6d4bf821970AudiBlack
4e485c942007BMWMaroon
ed9f65aa2008FordBlack
99bfee981982OpelRed
66a19b911987MercedesSilver
8d98c35b1994FordMaroon
9f0431aa1992VolkswagenSilver
940db64b1980AudiGreen
b06ac9b91990FerrariSilver
Car Detail
Model:
Year:
Manufacturer:
Color:

Source

<h:form id="form">

    <p:growl id="msgs" showDetail="true" />

    <p:dataTable id="cars" var="car" value="#{tableBean.carsSmall}">

        <p:column headerText="Model" style="width:24%">
            <h:outputText value="#{car.model}" />
        </p:column>

        <p:column headerText="Year" style="width:24%">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Manufacturer" style="width:24%">
            <h:outputText value="#{car.manufacturer}" />
        </p:column>

        <p:column headerText="Color" style="width:24%">
            <h:outputText value="#{car.color}" />
        </p:column>

        <p:column style="width:4%">
                <p:commandButton id="selectButton" update=":form:display" oncomplete="PF('carDialog').show()" icon="ui-icon-search" title="View">
                <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
            </p:commandButton>
        </p:column>

    </p:dataTable>

    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" id="carDlg"
                showEffect="fade" hideEffect="explode" modal="true">

        <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">

            <f:facet name="header">
                <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
            </f:facet>

            <h:outputText value="Model:" />
            <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold"/>

            <h:outputText value="Year:" />
            <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>


            <h:outputText value="Manufacturer:" />
            <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>

            <h:outputText value="Color:" />
            <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>

        </h:panelGrid>

    </p:dialog>

</h:form>