JARCH SHOWCASE
JARCH SHOWCASE
DragDrop - DataGrid DragDrop components have special integration with data components. Drag the cars using the headers to the drop area.
AvailableCars
69aa4b60
b43b46f2
eb0a66b3
bac7f5bd
fac76ca6
5fc890bc
2a3f0e22
ab4ee675
8e6852f0
Selected Cars
!!!Drop here!!!
Car Detail
<script type="text/javascript">
    function handleDrop(event, ui) {
        var droppedCar = ui.draggable;

        droppedCar.fadeOut('fast');
    }
</script>

<a:form id="carForm">
    <a:fieldset id="availableCarsField" legend="AvailableCars">
        <a:dataGrid id="availableCars" var="car" value="#{dndCarsView.cars}" columns="3">
            <a:panel id="pnl" header="#{car.id}" style="text-align:center">
                <h:panelGrid columns="1" style="width:100%">
                    <a:graphicImage name="/demo/images/car/#{car.brand}.gif" />
                </h:panelGrid>
            </a:panel>

            <a:draggable for="pnl" revert="true" handle=".ui-panel-titlebar" stack=".ui-panel"/>
        </a:dataGrid>
    </a:fieldset>

    <a:fieldset id="selectedCars" legend="Selected Cars" style="margin-top:20px">
        <a:outputPanel id="dropArea">
            <h:outputText value="!!!Drop here!!!" rendered="#{empty dndCarsView.droppedCars}" style="font-size:24px;" />
            <a:dataTable id="selectedCarsTable" var="car" value="#{dndCarsView.droppedCars}" rendered="#{not empty dndCarsView.droppedCars}">
                <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">
                    <a:commandButton update=":carForm:display" oncomplete="PF('carDialog').show()" icon="ui-icon-search">
                        <f:setPropertyActionListener value="#{car}" target="#{dndCarsView.selectedCar}" />
                    </a:commandButton>
                </a:column>
            </a:dataTable>
        </a:outputPanel>
    </a:fieldset>

    <a:droppable for="selectedCars" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availableCars" onDrop="handleDrop">
        <a:ajax listener="#{dndCarsView.onCarDrop}" update="dropArea availableCars" />
    </a:droppable>

    <a:dialog header="Car Detail" widgetVar="carDialog" resizable="false" draggable="false"
              showEffect="fade" hideEffect="fade" modal="true">

        <a:outputPanel id="display">
            <h:panelGrid columns="2" cellpadding="5" rendered="#{not empty dndCarsView.selectedCar}">
                <f:facet name="header">
                    <a:graphicImage name="/demo/images/car/#{dndCarsView.selectedCar.brand}.gif"/>
                </f:facet>

                <h:outputText value="Id" />
                <h:outputText value="#{dndCarsView.selectedCar.id}" style="font-weight:bold"/>

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

                <h:outputText value="Brand" />
                <h:outputText value="#{dndCarsView.selectedCar.brand}" style="font-weight:bold"/>

                <h:outputText value="Color:" />
                <h:outputText value="#{dndCarsView.selectedCar.color}" style="font-weight:bold"/>
            </h: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.