Data displayed on datatable can be edited at row or cell level.
<h:form id="form">
<p:growl id="msgs" showDetail="true"/>
<div class="card">
<h5>Row Editing</h5>
<p:dataTable id="products1" var="product" value="#{dtEditView.products1}" editable="true"
style="margin-bottom:20px">
<p:ajax event="rowEdit" listener="#{dtEditView.onRowEdit}" update=":form:msgs"/>
<p:ajax event="rowEditCancel" listener="#{dtEditView.onRowCancel}" update=":form:msgs"/>
<p:column headerText="Code">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{product.code}"/>
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput" value="#{product.code}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Name">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{product.name}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{product.name}" style="width:100%" label="Name"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Status">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{product.inventoryStatus}"/></f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{product.inventoryStatus}" style="width:100%">
<f:selectItems value="#{dtEditView.inventoryStatusList}" var="status"
itemLabel="#{status.text}" itemValue="#{status}"/>
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Price">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{product.price}">
<f:convertNumber type="currency" currencySymbol="$"/>
</h:outputText>
</f:facet>
<f:facet name="input">
<p:inputNumber value="#{product.price}" style="width:100%" label="Price" symbol="$"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:6rem">
<p:rowEditor editTitle="Edit Row" cancelTitle="Cancel Edit" saveTitle="Save Row"/>
</p:column>
</p:dataTable>
</div>
<div class="card">
<h5>Cell Editing with Click and RightClick</h5>
<p:dataTable id="products2" var="product" value="#{dtEditView.products2}" editable="true"
editMode="cell" widgetVar="cellProducts">
<p:ajax event="cellEdit" listener="#{dtEditView.onCellEdit}" update=":form:msgs"/>
<p:column headerText="Code">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{product.code}"/>
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput2" value="#{product.code}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Name">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{product.name}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{product.name}" style="width:100%" label="Name"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Status">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{product.inventoryStatus}"/>
</f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{product.inventoryStatus}" style="width:100%">
<f:selectItems value="#{dtEditView.inventoryStatusList}" var="status"
itemLabel="#{status.text}" itemValue="#{status}"/>
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Price">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{product.price}">
<f:convertNumber type="currency" currencySymbol="$"/>
</h:outputText>
</f:facet>
<f:facet name="input">
<p:inputNumber value="#{product.price}" style="width:100%" label="Price" symbol="$"/>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</div>
<div class="card">
<h5>Cell Editing with Double Click Event (dblclick)</h5>
<p:dataTable id="products3" var="product" value="#{dtEditView.products3}" editable="true" editMode="cell"
widgetVar="cellCars2" editInitEvent="dblclick" style="margin-bottom:20px">
<p:ajax event="cellEdit" listener="#{dtEditView.onCellEdit}" update=":form:msgs"/>
<p:column headerText="Code">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{product.code}"/>
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput3" value="#{product.code}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Name">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{product.name}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{product.name}" style="width:100%" label="Name"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Status">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{product.inventoryStatus}"/>
</f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{product.inventoryStatus}" style="width:100%">
<f:selectItems value="#{dtEditView.inventoryStatusList}" var="status"
itemLabel="#{status.text}" itemValue="#{status}"/>
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Price">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{product.price}">
<f:convertNumber type="currency" currencySymbol="$"/>
</h:outputText>
</f:facet>
<f:facet name="input">
<p:inputNumber value="#{product.price}" style="width:100%" label="Price" symbol="$"/>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</div>
<p:contextMenu for="products2" widgetVar="cMenu">
<p:menuitem value="Edit Cell" icon="pi pi-search"
onclick="PF('cellProducts').showCellEditor();return false;"/>
<p:menuitem value="Hide Menu" icon="pi pi-times" onclick="PF('cMenu').hide()"/>
</p:contextMenu>
</h:form>
@Named("dtEditView")
@ViewScoped
public class EditView implements Serializable {
private List<Product> products1;
private List<Product> products2;
private List<Product> products3;
@Inject
private ProductService service;
@PostConstruct
public void init() {
products1 = service.getClonedProducts(10);
products2 = service.getClonedProducts(10);
products3 = service.getClonedProducts(10);
}
public List<Product> getProducts1() {
return products1;
}
public List<Product> getProducts2() {
return products2;
}
public List<Product> getProducts3() {
return products3;
}
public InventoryStatus[] getInventoryStatusList() {
return InventoryStatus.values();
}
public void setService(ProductService service) {
this.service = service;
}
public void onRowEdit(RowEditEvent<Product> event) {
FacesMessage msg = new FacesMessage("Product Edited", String.valueOf(event.getObject().getCode()));
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onRowCancel(RowEditEvent<Product> event) {
FacesMessage msg = new FacesMessage("Edit Cancelled", String.valueOf(event.getObject().getCode()));
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onCellEdit(CellEditEvent event) {
Object oldValue = event.getOldValue();
Object newValue = event.getNewValue();
if (newValue != null && !newValue.equals(oldValue)) {
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Cell Changed", "Old: " + oldValue + ", New:" + newValue);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
}
@Named
@ApplicationScoped
public class ProductService {
private List<Product> products;
@PostConstruct
public void init() {
products = new ArrayList<>();
products.add(new Product(1000, "f230fh0g3", "Bamboo Watch", "Product Description", "bamboo-watch.jpg", 65,
"Accessories", 24, InventoryStatus.INSTOCK, 5));
products.add(new Product(1001, "nvklal433", "Black Watch", "Product Description", "black-watch.jpg", 72,
"Accessories", 61, InventoryStatus.INSTOCK, 4));
products.add(new Product(1002, "zz21cz3c1", "Blue Band", "Product Description", "blue-band.jpg", 79,
"Fitness", 2, InventoryStatus.LOWSTOCK, 3));
products.add(new Product(1003, "244wgerg2", "Blue T-Shirt", "Product Description", "blue-t-shirt.jpg", 29,
"Clothing", 25, InventoryStatus.INSTOCK, 5));
products.add(new Product(1004, "h456wer53", "Bracelet", "Product Description", "bracelet.jpg", 15,
"Accessories", 73, InventoryStatus.INSTOCK, 4));
products.add(new Product(1005, "av2231fwg", "Brown Purse", "Product Description", "brown-purse.jpg", 120,
"Accessories", 0, InventoryStatus.OUTOFSTOCK, 4));
products.add(new Product(1006, "bib36pfvm", "Chakra Bracelet", "Product Description", "chakra-bracelet.jpg", 32,
"Accessories", 5, InventoryStatus.LOWSTOCK, 3));
products.add(new Product(1007, "mbvjkgip5", "Galaxy Earrings", "Product Description", "galaxy-earrings.jpg", 34,
"Accessories", 23, InventoryStatus.INSTOCK, 5));
products.add(new Product(1008, "vbb124btr", "Game Controller", "Product Description", "game-controller.jpg", 99,
"Electronics", 2, InventoryStatus.LOWSTOCK, 4));
products.add(new Product(1009, "cm230f032", "Gaming Set", "Product Description", "gaming-set.jpg", 299,
"Electronics", 63, InventoryStatus.INSTOCK, 3));
products.add(new Product(1010, "plb34234v", "Gold Phone Case", "Product Description", "gold-phone-case.jpg", 24,
"Accessories", 0, InventoryStatus.OUTOFSTOCK, 4));
products.add(new Product(1011, "4920nnc2d", "Green Earbuds", "Product Description", "green-earbuds.jpg", 89,
"Electronics", 23, InventoryStatus.INSTOCK, 4));
products.add(new Product(1012, "250vm23cc", "Green T-Shirt", "Product Description", "green-t-shirt.jpg", 49,
"Clothing", 74, InventoryStatus.INSTOCK, 5));
products.add(new Product(1013, "fldsmn31b", "Grey T-Shirt", "Product Description", "grey-t-shirt.jpg", 48,
"Clothing", 0, InventoryStatus.OUTOFSTOCK, 3));
products.add(new Product(1014, "waas1x2as", "Headphones", "Product Description", "headphones.jpg", 175,
"Electronics", 8, InventoryStatus.LOWSTOCK, 5));
products.add(new Product(1015, "vb34btbg5", "Light Green T-Shirt", "Product Description", "light-green-t-shirt.jpg", 49,
"Clothing", 34, InventoryStatus.INSTOCK, 4));
products.add(new Product(1016, "k8l6j58jl", "Lime Band", "Product Description", "lime-band.jpg", 79,
"Fitness", 12, InventoryStatus.INSTOCK, 3));
products.add(new Product(1017, "v435nn85n", "Mini Speakers", "Product Description", "mini-speakers.jpg", 85,
"Clothing", 42, InventoryStatus.INSTOCK, 4));
products.add(new Product(1018, "09zx9c0zc", "Painted Phone Case", "Product Description", "painted-phone-case.jpg", 56,
"Accessories", 41, InventoryStatus.INSTOCK, 5));
products.add(new Product(1019, "mnb5mb2m5", "Pink Band", "Product Description", "pink-band.jpg", 79,
"Fitness", 63, InventoryStatus.INSTOCK, 4));
products.add(new Product(1020, "r23fwf2w3", "Pink Purse", "Product Description", "pink-purse.jpg", 110,
"Accessories", 0, InventoryStatus.OUTOFSTOCK, 4));
products.add(new Product(1021, "pxpzczo23", "Purple Band", "Product Description", "purple-band.jpg", 79,
"Fitness", 6, InventoryStatus.LOWSTOCK, 3));
products.add(new Product(1022, "2c42cb5cb", "Purple Gemstone Necklace", "Product Description", "purple-gemstone-necklace.jpg", 45,
"Accessories", 62, InventoryStatus.INSTOCK, 4));
products.add(new Product(1023, "5k43kkk23", "Purple T-Shirt", "Product Description", "purple-t-shirt.jpg", 49,
"Clothing", 2, InventoryStatus.LOWSTOCK, 5));
products.add(new Product(1024, "lm2tny2k4", "Shoes", "Product Description", "shoes.jpg", 64,
"Clothing", 0, InventoryStatus.INSTOCK, 4));
products.add(new Product(1025, "nbm5mv45n", "Sneakers", "Product Description", "sneakers.jpg", 78,
"Clothing", 52, InventoryStatus.INSTOCK, 4));
products.add(new Product(1026, "zx23zc42c", "Teal T-Shirt", "Product Description", "teal-t-shirt.jpg", 49,
"Clothing", 3, InventoryStatus.LOWSTOCK, 3));
products.add(new Product(1027, "acvx872gc", "Yellow Earbuds", "Product Description", "yellow-earbuds.jpg", 89,
"Electronics", 35, InventoryStatus.INSTOCK, 3));
products.add(new Product(1028, "tx125ck42", "Yoga Mat", "Product Description", "yoga-mat.jpg", 20,
"Fitness", 15, InventoryStatus.INSTOCK, 5));
products.add(new Product(1029, "gwuby345v", "Yoga Set", "Product Description", "yoga-set.jpg", 20,
"Fitness", 25, InventoryStatus.INSTOCK, 8));
}
public List<Product> getProducts() {
return new ArrayList<>(products);
}
public List<Product> getProducts(int size) {
if (size > products.size()) {
Random rand = new Random();
List<Product> randomList = new ArrayList<>();
for (int i = 0; i < size; i++) {
int randomIndex = rand.nextInt(products.size());
randomList.add(products.get(randomIndex));
}
return randomList;
}
else {
return new ArrayList<>(products.subList(0, size));
}
}
public List<Product> getClonedProducts(int size) {
List<Product> results = new ArrayList<>();
List<Product> originals = getProducts(size);
for (Product original : originals) {
results.add(original.clone());
}
// make sure to have unique codes
for (Product product : results) {
product.setCode(UUID.randomUUID().toString().replace("-", "").substring(0, 8));
}
return results;
}
}