JARCH SHOWCASE
JARCH SHOWCASE
DataTable - Selection There are various ways to select rows from the datatable.
Basic
IdYearBrandColor
da94b6dd1988VolvoRed
88fd90b92009AudiGreen
7f76ef1c2006JaguarRed
ac0b80f42009AudiMaroon
93c3148a1974JaguarGreen
c6c2049a1993FordGreen
a12a1c3e1973BMWGreen
484606431974VolvoWhite
47ad11721993JaguarYellow
a72ec2b71964FordSilver
Single with Row Click
IdYearBrandColor
Select Events
IdYearBrandColor
Multiple with Meta and Shift keys
IdYearBrandColor
RadioButton
IdYearBrandColor
Checkbox
IdYearBrandColor
Car Info
Selected Cars
<a:form id="form">
    <a:growl id="msgs" showDetail="true" />

    <a:dataTable id="basicDT" var="car" value="#{dtSelectionView.cars1}">
        <f:facet name="header">
            Basic
        </f:facet>
        <a:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </a:column>
        <a:column style="width:32px;text-align: center">
             <a:commandButton update=":form:carDetail" oncomplete="PF('carDialog').show()" icon="ui-icon-search" title="View">
                <f:setPropertyActionListener value="#{car}" target="#{dtSelectionView.selectedCar}" />
            </a:commandButton>
        </a:column>
    </a:dataTable>

    <a:dataTable id="singleDT" var="car" value="#{dtSelectionView.cars2}" selectionMode="single" selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}">
        <f:facet name="header">
            Single with Row Click
        </f:facet>
        <a:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </a:column>
        <f:facet name="footer">
            <a:commandButton process="singleDT" update=":form:carDetail" icon="ui-icon-search" value="View" oncomplete="PF('carDialog').show()" />
        </f:facet>
    </a:dataTable>

    <a:dataTable id="eventsDT" var="car" value="#{dtSelectionView.cars3}" selectionMode="single" selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}">
        <f:facet name="header">
            Select Events
        </f:facet>
        <a:ajax event="rowSelect" listener="#{dtSelectionView.onRowSelect}" update=":form:msgs" />
        <a:ajax event="rowUnselect" listener="#{dtSelectionView.onRowUnselect}" update=":form:msgs" />
        <a:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </a:column>
    </a:dataTable>

    <a:dataTable id="multipleDT" var="car" value="#{dtSelectionView.cars4}" selectionMode="multiple" selection="#{dtSelectionView.selectedCars}" rowKey="#{car.id}">
        <f:facet name="header">
            Multiple with Meta and Shift keys
        </f:facet>
        <a:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </a:column>
        <f:facet name="footer">
            <a:commandButton process="multipleDT" update=":form:multiCarDetail" icon="ui-icon-search" value="View" oncomplete="PF('multiCarDialog').show()" />
        </f:facet>
    </a:dataTable>

    <a:dataTable id="radioDT" var="car" value="#{dtSelectionView.cars5}" selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}">
        <f:facet name="header">
            RadioButton
        </f:facet>
        <a:column selectionMode="single" style="width:16px;text-align:center"/>
        <a:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </a:column>
        <f:facet name="footer">
            <a:commandButton process="radioDT" update=":form:carDetail" icon="ui-icon-search" value="View" oncomplete="PF('carDialog').show()" />
        </f:facet>
    </a:dataTable>

    <a:dataTable id="checkboxDT" var="car" value="#{dtSelectionView.cars6}" selection="#{dtSelectionView.selectedCars}" rowKey="#{car.id}" style="margin-bottom:0">
        <f:facet name="header">
            Checkbox
        </f:facet>
        <a:column selectionMode="multiple" style="width:16px;text-align:center"/>
        <a:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </a:column>
        <f:facet name="footer">
            <a:commandButton process="checkboxDT" update=":form:multiCarDetail" icon="ui-icon-search" value="View" oncomplete="PF('multiCarDialog').show()" />
        </f:facet>
    </a:dataTable>

    <a:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <a:outputPanel id="carDetail" style="text-align:center;">
            <a:panelGrid  columns="2" rendered="#{not empty dtSelectionView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <a:graphicImage name="demo/images/car/#{dtSelectionView.selectedCar.brand}-big.gif"/>
                </f:facet>

                <h:outputText value="Id:" />
                <h:outputText value="#{dtSelectionView.selectedCar.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{dtSelectionView.selectedCar.year}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{dtSelectionView.selectedCar.color}" style="color:#{dtSelectionView.selectedCar.color}"/>

                <h:outputText value="Price" />
                <h:outputText value="$#{dtSelectionView.selectedCar.price}" />
            </a:panelGrid>
        </a:outputPanel>
    </a:dialog>

    <a:dialog header="Selected Cars" widgetVar="multiCarDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" width="220">
        <a:outputPanel id="multiCarDetail" style="text-align:center;">
            <ui:repeat value="#{dtSelectionView.selectedCars}" var="car">
                <h:outputText value="#{car.id} - #{car.brand}" style="display:block"/>
            </ui:repeat>
        </a:outputPanel>
    </a:dialog>
</a:form>
                
JARCH, Copyright © 2022 All rights reserved. Running JARCH 24.3.0-SNAPSHOT on PrimeFaces-12.0.0 on Mojarra-2.3.13.