How to update row in JSF Datatable-JavaTyro

This example is enhancing the previous JSF 2 dataTable example, by adding a “update” function to update row in dataTable.

Update Concept

The overall concept is quite simple :
1. Add a “ediatble” property to keep track the row edit status.

//...
public class Order{
 
	String orderNo;
	String productName;
	BigDecimal price;
	int qty;
 
	boolean editable;
 
	public boolean isEditable() {
		return editable;
	}
	public void setEditable(boolean editable) {
		this.editable = editable;
	}

2. Assign a “Edit” link to the end of each row, if clicked, set “ediatble” = true. In JSF 2.0, you can provide the parameter values in the method expression directly, see the edit action below :

//...
<h:dataTable value="#{order.orderList}" var="o">
 
<h:column>
 
    	<f:facet name="header">Action</f:facet>
 
    	<h:commandLink value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}" />
 
</h:column>

//...
public String editAction(Order order) {
 
	order.setEditable(true);
	return null;
}

3. In JSF page, if “ediatble” = true, display the input text box for edit; Otherwise just display the normal output text. A simple trick to simulate the update effect :)

//...
<h:dataTable value="#{order.orderList}" var="o">
 
<h:column>
 
    <f:facet name="header">Order No</f:facet>
 
    <h:inputText value="#{o.orderNo}" size="10" rendered="#{o.editable}" />
 
    <h:outputText value="#{o.orderNo}" rendered="#{not o.editable}" />
 
</h:column>

4. Finally, provide a button to save your changes. When you make changes in the input text box and save it, all values will bind to the associated backing bean automatically.

//...
<h:commandButton value="Save Changes" action="#{order.saveAction}" />
</h:column>

Example

A JSF 2.0 example to implement the above concept to update row in dataTable.

1. Managed Bean

A managed bean named “order”, self-explanatory.

package com.mkyong;
 
import java.io.Serializable;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="order")
@SessionScoped
public class OrderBean implements Serializable{
 
	private static final long serialVersionUID = 1L;
 
	private static final ArrayList<Order> orderList = 
		new ArrayList<Order>(Arrays.asList(
 
		new Order("A0001", "Intel CPU", 
				new BigDecimal("700.00"), 1),
		new Order("A0002", "Harddisk 10TB", 
				new BigDecimal("500.00"), 2),
		new Order("A0003", "Dell Laptop", 
				new BigDecimal("11600.00"), 8),
		new Order("A0004", "Samsung LCD", 
				new BigDecimal("5200.00"), 3),
		new Order("A0005", "A4Tech Mouse", 
				new BigDecimal("100.00"), 10)
	));
 
	public ArrayList<Order> getOrderList() {
		return orderList;
	}
 
	public String saveAction() {
 
		//get all existing value but set "editable" to false 
		for (Order order : orderList){
			order.setEditable(false);
		}
		//return to current page
		return null;
 
	}
 
	public String editAction(Order order) {
 
		order.setEditable(true);
		return null;
	}
 
	public static class Order{
 
		String orderNo;
		String productName;
		BigDecimal price;
		int qty;
		boolean editable;
 
		public Order(String orderNo, String productName, BigDecimal price, int qty) {
			this.orderNo = orderNo;
			this.productName = productName;
			this.price = price;
			this.qty = qty;
		}
 
		//getter and setter methods
	}
}

2. JSF page

JSF page to display the data with dataTable tag, and create a “edit” link to update the row record.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:head>
    	<h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>
 
    	<h1>JSF 2 dataTable example</h1>
    	<h:form>
    	   <h:dataTable value="#{order.orderList}" var="o"
    		styleClass="order-table"
    		headerClass="order-table-header"
    		rowClasses="order-table-odd-row,order-table-even-row"
    	   >
 
    	     <h:column>
 
                <f:facet name="header">Order No</f:facet>
 
    		<h:inputText value="#{o.orderNo}" size="10" rendered="#{o.editable}" />
 
    		<h:outputText value="#{o.orderNo}" rendered="#{not o.editable}" />
 
    	     </h:column>
 
    	     <h:column>
 
    		<f:facet name="header">Product Name</f:facet>
 
    		<h:inputText value="#{o.productName}" size="20" rendered="#{o.editable}" />
 
    		<h:outputText value="#{o.productName}" rendered="#{not o.editable}" />
 
    	     </h:column>
 
    	     <h:column>
 
    		<f:facet name="header">Price</f:facet>
 
    		<h:inputText value="#{o.price}" size="10" rendered="#{o.editable}" />
 
    		<h:outputText value="#{o.price}" rendered="#{not o.editable}" />
 
    	     </h:column>
 
    	     <h:column>
 
    		<f:facet name="header">Quantity</f:facet>
 
    		<h:inputText value="#{o.qty}" size="5" rendered="#{o.editable}" />
 
    		<h:outputText value="#{o.qty}" rendered="#{not o.editable}" />
 
    	     </h:column>
 
    	     <h:column>
 
    		<f:facet name="header">Action</f:facet>
 
    		<h:commandLink value="Edit" action="#{order.editAction(o)}" 
                                       rendered="#{not o.editable}" />
 
    	     </h:column>
 
    	  </h:dataTable>
 
    	  <h:commandButton value="Save Changes" action="#{order.saveAction}" />
 
      </h:form>
    </h:body>	
</html>