How to delete a row in JSF

There is more than one way to delete a row from data UI component in JSF. If you use RichFaces and Seam, there even more ways.

All the cases will use the following setup:


JSF view:

      Seven New Wonders of the World

public class WonderService {

   private ArrayList  list;
   public ArrayList getList() {
	return list;
   public void init () {
		list = new ArrayList ();
		list.add(new Wonder("Chichen Itza", "Mexico", ""));
		list.add(new Wonder("Christ the Redeemer", "Brazil", ""));
		list.add(new Wonder("Colosseum", "Italy", ""));
		list.add(new Wonder("Great Wall of China", "China", ""));
		list.add(new Wonder("Machu Picchu", "Peru", ""));
		list.add(new Wonder("Petra", "Jordan", ""));
		list.add(new Wonder("Taj Mahal", "India", ""));
   public WonderService() {}

public class Wonder{

   private String name; // setter and getter
   private String location; // setter and getter
   private String imageUrl; // setter and getter

   public Wonder(String name, String location, String imageUrl) {
	super(); = name;
	this.location = location;
	this.imageUrl = imageUrl;

public class WonderBean {

   private WonderService service;

   public WonderService getService() {
	return service;
   public void setService(WonderService service) {
	this.service = service;
   public WonderBean() {
   public ArrayList getWonders() {
	return service.getList();

All the code changes are done in


If you are only using plain JSF, one way is to bind to component instance

private UIData table; // getter and setter

   Seven New Wonders of the World

Let’s create delete() method:

public void delete() {

Using UIData.getRowData() method we can retrieve the row data the corresponds to raw clicked in the browser. JSF is smart to wire everything for us automatically.

Instead of using getRowData(), it’s also possible to use getRowIndex() method:

public void delete() {

We can also use f:setPropertyActionListener to help us set the row we want to delete.

private Wonder selected; // setter and getter

   Seven New Wonders of the World

setPropertyActionListener takes the current row object #{wonder} and assigns it to #{wonderBean.wonder}.

One more option is to use data modal class such as ListDataModal, bind it directly to the UI component and then wrap the list. Being a more exotic option, I will skip it in this post.


If you are using RichFaces, you get a few more options. Of course you can use everything you saw above.

With rich:dataTable you get access to row key defined by rowKeyVar attribute. We can use this attribute as the index of the row we want to delete.

   Seven New Wonders of the World

private int wonderIndex; // getter and setter

public void delete() {

Using rich:dataTable with ruby skin:


Keeping everything the same in the bean, instead of using f:setPropertyActionListener, it’s possible to use a4j:actionparam:


a4j:actionparam works like f:param but in addition automatically assigns the value (in our case #{row}) to assignTo property (in our case #{wonderBean.wonderIndex}). One thing to remember is that a4j:actionparam renders a request parameter on to the page. If you are trying to pass in a custom object, you need to write a converter.


Seam makes deleting even simpler. We can use two annotations that will inject the selected data row into a Seam component.

private List wonderList;

private Wonder wonder;

   Seven New Wonders of the World

@DataModelSelection will inject the actual row data which was clicked. Or we can @DataModelSelectionIndex which will inject the row index:

private Integer wonderIndex;

No changes in the page.

4 thoughts on “How to delete a row in JSF

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s