JARCH SHOWCASE
JARCH SHOWCASE
DataGrid DataGrid displays data in a grid layout. Responsive mode is provided to optimize the display for different screen sizes.
Cars for Sale
9ad09a13
1990
c2896a33
1999
2b147877
1992
f894c1c7
1988
21308246
1968
53219049
1988
db7d886a
1992
88db27c5
1986
24afb9f1
1967
c9c4284e
1960
7f4920d7
1992
55c29390
1962
Car Info
<a:form id="form">
    <a:dataGrid var="car" value="#{dataGridView.cars}" columns="3" layout="grid"
        rows="12" paginator="true" id="cars"
        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="6,12,16">

        <f:facet name="header">
            Cars for Sale
        </f:facet>

        <a:panel header="#{car.id}" style="text-align:center">
            <h:panelGrid columns="1" style="width:100%">
                <a:graphicImage name="demo/images/car/#{car.brand}.gif"/>

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

                <a: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="#{dataGridView.selectedCar}" />
                </a:commandLink>
            </h:panelGrid>
        </a:panel>

    </a:dataGrid>

    <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 dataGridView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <a:graphicImage name="demo/images/car/#{dataGridView.selectedCar.brand}-big.gif"/>
                </f:facet>

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

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

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

                <h:outputText value="Price" />
                <h:outputText value="$#{dataGridView.selectedCar.price}" />
            </a:panelGrid>
        </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.