DataTable - RadioCheckbox
RadioButton/Checkbox based row selection is a common use case and DataTable provides a solution for this with column selection mode feature.
Source
<h:form id="form">
<p:dataTable id="cars" var="car" value="#{tableBean.mediumCarsModel}" paginator="true" rows="10"
selection="#{tableBean.selectedCar}">
<f:facet name="header">
RadioButton Based Selection
</f:facet>
<p:column selectionMode="single" style="width:2%" />
<p:column headerText="Model" style="width:25%">
#{car.model}
</p:column>
<p:column headerText="Year" style="width:25%">
#{car.year}
</p:column>
<p:column headerText="Manufacturer" style="width:24%">
#{car.manufacturer}
</p:column>
<p:column headerText="Color" style="width:24%">
#{car.color}
</p:column>
<f:facet name="footer">
<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
update=":form:displaySingle" oncomplete="singleCarDialog.show()"/>
</f:facet>
</p:dataTable>
<br />
<p:dataTable id="multiCars" var="car" value="#{tableBean.mediumCarsModel}" paginator="true" rows="10"
selection="#{tableBean.selectedCars}">
<f:facet name="header">
Checkbox Based Selection
</f:facet>
<p:column selectionMode="multiple" style="width:2%" />
<p:column headerText="Model" style="width:25%">
#{car.model}
</p:column>
<p:column headerText="Year" style="width:25%">
#{car.year}
</p:column>
<p:column headerText="Manufacturer" style="width:24%">
#{car.manufacturer}
</p:column>
<p:column headerText="Color" style="width:24%">
#{car.color}
</p:column>
<f:facet name="footer">
<p:commandButton id="multiViewButton" value="View" icon="ui-icon-search"
update=":form:displayMulti" oncomplete="multiCarDialog.show()"/>
</f:facet>
</p:dataTable>
<p:dialog id="dialog" header="Car Detail" widgetVar="singleCarDialog" resizable="false"
showEffect="fade" hideEffect="explode">
<h:panelGrid id="displaySingle" 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}" style="font-weight:bold"/>
<h:outputText value="Year:" />
<h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>
<h:outputText value="Manufacturer:" />
<h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>
<h:outputText value="Color:" />
<h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>
</h:panelGrid>
</p:dialog>
<p:dialog id="multiDialog" header="Car Detail" widgetVar="multiCarDialog"
height="300" showEffect="fade" hideEffect="explode">
<p:dataList id="displayMulti" value="#{tableBean.selectedCars}" var="selectedCar">
Model: #{selectedCar.model}, Year: #{selectedCar.year}
</p:dataList>
</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;
import org.primefaces.view.CarDataModel;
public class TableBean implements Serializable {
private final static String[] colors;
private final static String[] manufacturers;
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 List<Car> cars;
private Car selectedCar;
private Car[] selectedCars;
private CarDataModel mediumCarsModel;
public TableBean() {
cars = new ArrayList<Car>();
populateRandomCars(cars, 50);
mediumCarsModel = new CarDataModel(cars);
}
public Car[] getSelectedCars() {
return selectedCars;
}
public void setSelectedCars(Car[] selectedCars) {
this.selectedCars = selectedCars;
}
public Car getSelectedCar() {
return selectedCar;
}
public void setSelectedCar(Car selectedCar) {
this.selectedCar = selectedCar;
}
private void populateRandomCars(List<Car> list, int size) {
for(int i = 0 ; i < size ; i++)
list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
}
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 CarDataModel getMediumCarsModel() {
return mediumCarsModel;
}
}
package org.primefaces.examples.view;
import java.util.List;
import javax.faces.model.ListDataModel;
import org.primefaces.examples.domain.Car;
import org.primefaces.model.SelectableDataModel;
public class CarDataModel extends ListDataModel<Car> implements SelectableDataModel<Car> {
public CarDataModel() {
}
public CarDataModel(List<Car> data) {
super(data);
}
@Override
public Car getRowData(String rowKey) {
//In a real app, a more efficient way like a query by rowKey should be implemented to deal with huge data
List<Car> cars = (List<Car>) getWrappedData();
for(Car car : cars) {
if(car.getModel().equals(rowKey))
return car;
}
return null;
}
@Override
public Object getRowKey(Car car) {
return car.getModel();
}
}
