Mirage LIVE PREVIEW

DragDrop - DataTable

DragDrop components have special integration with data components. Drag the cars using the drag icon to the drop area.

Documentation
Available Cars
IdYearBrandColor
2dc6b4bd1990BMWGreen
8e1119cd1985MercedesMaroon
34908c481986JaguarSilver
e30c2ce71982MercedesRed
dc88d6e91961BMWWhite
6fc24e682006BMWOrange
bbb1115d1998FiatWhite
4a7273a42003RenaultYellow
c8cfc6f51983FiatBlue
Selected Cars
!!!Drop here!!!
Car Detail
<script type="text/javascript">
    function handleDrop(event, ui) {
        var droppedCar = ui.draggable;

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


<h:form id="carForm">
    <p:fieldset id="availableCarsField" legend="Available Cars">
        <p:dataTable id="availableCars" var="car" value="#{dndCarsView.cars}">
            <p:column style="width:20px">
                <h:outputText id="dragIcon" styleClass="ui-icon pi pi-plus" />
                <p:draggable for="dragIcon" revert="true" helper="clone"/>
            </p:column>

            <p:column headerText="Id">
                <h:outputText value="#{car.id}" />
            </p:column>

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

            <p:column headerText="Brand">
                <h:outputText value="#{car.brand}" />
            </p:column>

            <p:column headerText="Color">
                <h:outputText value="#{car.color}" />
            </p:column>
        </p:dataTable>
    </p:fieldset>

    <p:fieldset id="selectedCars" legend="Selected Cars" style="margin-top:20px">
        <p:outputPanel id="dropArea">
            <h:outputText value="!!!Drop here!!!" rendered="#{empty dndCarsView.droppedCars}" style="font-size:24px;" />
            <p:dataTable id="selectedCarsTable" var="car" value="#{dndCarsView.droppedCars}" rendered="#{not empty dndCarsView.droppedCars}">
                <p:column headerText="Id">
                    <h:outputText value="#{car.id}" />
                </p:column>

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

                <p:column headerText="Brand">
                    <h:outputText value="#{car.brand}" />
                </p:column>

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

                <p:column style="width:32px">
                    <p:commandButton update=":carForm:display" oncomplete="PF('carDialog').show()" icon="pi pi-search">
                        <f:setPropertyActionListener value="#{car}" target="#{dndCarsView.selectedCar}" />
                    </p:commandButton>
                </p:column>
            </p:dataTable>
        </p:outputPanel>
    </p:fieldset>

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

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

        <p:outputPanel id="display">
            <h:panelGrid columns="2" cellpadding="4" rendered="#{not empty dndCarsView.selectedCar}">
                <f:facet name="header">
                    <p: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>
        </p:outputPanel>
    </p:dialog>
</h:form>