DataGrid - Drag and Drop
Drag and Drop components have special integration with data components, this example demonstrates DataTable integration. Drag cars using headers to the drop area.
Source
<h:form id="carForm">
<p:fieldset legend="Available Cars">
<p:dataTable id="availableCars" var="car" value="#{tableBean.carsSmall}">
<p:column style="width:20px">
<h:outputText id="dragIcon"
styleClass="ui-icon ui-icon-arrow-4" />
<p:draggable for="dragIcon" revert="true" />
</p:column>
<p:column headerText="Model">
<h:outputText value="#{car.model}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Manufacturer">
<h:outputText value="#{car.manufacturer}" />
</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 tableBean.droppedCars}"
style="font-size:24px;" />
<p:dataTable var="car" value="#{tableBean.droppedCars}"
rendered="#{not empty tableBean.droppedCars}">
<p:column headerText="Model">
<h:outputText value="#{car.model}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Manufacturer">
<h:outputText value="#{car.manufacturer}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
<p:column style="width:32px">
<p:commandButton update=":carForm:display"
oncomplete="carDialog.show()"
icon="ui-icon-search">
<f:setPropertyActionListener value="#{car}"
target="#{tableBean.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="#{tableBean.onCarDrop}" update="dropArea availableCars" />
</p:droppable>
<p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" draggable="false"
width="200" showEffect="fade" hideEffect="fade" modal="true">
<h:panelGrid id="display" columns="2" cellpadding="4">
<f:facet name="header">
<p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
</f:facet>
<h:outputText value="Model:" />
<h:outputText value="#{tableBean.selectedCar.model}"/>
<h:outputText value="Year:" />
<h:outputText value="#{tableBean.selectedCar.year}"/>
<h:outputText value="Manufacturer:" />
<h:outputText value="#{tableBean.selectedCar.manufacturer}"/>
<h:outputText value="Color:" />
<h:outputText value="#{tableBean.selectedCar.color}"/>
</h:panelGrid>
</p:dialog>
</h:form>
package org.primefaces.examples.view;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
import org.primefaces.examples.domain.Car;
public class TableBean implements Serializable {
static {
colors = new String[10];
colors[0] = "Black";
colors[1] = "White";
colors[2] = "Green";
colors[3] = "Red";
colors[4] = "Blue";
colors[5] = "Orange";
colors[6] = "Silver";
colors[7] = "Yellow";
colors[8] = "Brown";
colors[9] = "Maroon";
manufacturers = new String[10];
manufacturers[0] = "Mercedes";
manufacturers[1] = "BMW";
manufacturers[2] = "Volvo";
manufacturers[3] = "Audi";
manufacturers[4] = "Renault";
manufacturers[5] = "Opel";
manufacturers[6] = "Volkswagen";
manufacturers[7] = "Chrysler";
manufacturers[8] = "Ferrari";
manufacturers[9] = "Ford";
}
private final static String[] colors;
private final static String[] manufacturers;
private List<Car> carsSmall;
private List<Car> droppedCars;
public TableBean() {
carsSmall = new ArrayList<Car>();
droppedCars = new ArrayList<Car>();
populateRandomCars(carsSmall, 9);
}
private void populateRandomCars(List<Car> list, int size) {
for(int i = 0 ; i < size ; i++)
list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
}
public List<Car> getCarsSmall() {
return carsSmall;
}
private int getRandomYear() {
return (int) (Math.random() * 50 + 1960);
}
private String getRandomColor() {
return colors[(int) (Math.random() * 10)];
}
private String getRandomManufacturer() {
return manufacturers[(int) (Math.random() * 10)];
}
private String getRandomModel() {
return UUID.randomUUID().toString().substring(0, 8);
}
public void onCarDrop(DragDropEvent ddEvent) {
Car car = ((Car) ddEvent.getData());
droppedCars.add(car);
carsSmall.remove(car);
}
public List<Car> getDroppedCars() {
return droppedCars;
}
}
