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
7395e348
1999
4f4dcf3a
2006
cc06ca27
1996
ab94b2e7
1977
d03d453d
2008
554edce5
2002
dda3bde5
1967
b1e5834a
1962
52114ae1
2007
6f762716
1993
f46c2681
1967
ba739967
1983
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.