Learn how to add/delete table row with RichFaces [in 5 minutes]

I have seen this question more than once now, how do you add/delete a row in a table? Turns out it’s pretty simple. Although you can’t do partial table update which RichFaces supports, when adding or deleting a row, jut render the entire table. This will also work with a standard JSF table. Also, a related post is How to delete a row in JSF. RichFaces 3.3.3 is used.

The page looks like this:

JSF page:


   
      
         
	 
      
      
         
	    
	 
      
   

Managed bean:

@KeepAlive
public class Bean {
   private List list;

   @PostConstruct
   public void init() {
      list = new ArrayList();
      list.add(1);
      list.add(2);
      list.add(3);
   }
   public void remove() {
      // remove last
      if (!list.isEmpty()) {
         list.remove(list.size() - 1);
      }
   }
   public List getList() {
      return list;
   }
   public void add() {
      list.add(list.size()+1);
   }
}

The only thing to mention is that @KeepAlive gives us view scope. This way we can keep the same bean between requests. More on view scope in RichFaces.

JSF configuration file:


  bean
  org.richfaces.example.Bean
  request

That’s it.

Published by

7 responses to “Learn how to add/delete table row with RichFaces [in 5 minutes]”

  1. Hi, I have an editable dataTable with validation (for example some required fields). In this example is the “new row” button ajaxSingle=true?

    If I use ajaxSingle table reRender overwrites table data edited by the user, if I don’t use it (or if I add the table to process attribute) a new row can’t be added if there is a convertion/validator exception.

    What’s the best way to implement it? Am I doing something wrong? Thanks in advance

  2. @Fabio: no, the link or button within a row is not ajaxSingle=”true” by default. If you have a converter or validator error, your action will never be invoked. That’s just how JSF works.

  3. Ok, you are right but this case is strange. If I use ajaxSingle=true if the user modify something in an input field in the table and then add a new row original data are restored.
    If I don’t use ajaxSingle each time I add a new row I have the validation of the fields, so for example if I have a required field I can’t press two times the add button (the second time there is a validation error).
    How can I solve this problem?
    Thanks, Fabio

  4. @Fabio: if use use ajaxSingle=true on a button/link, then only that action will be executed, nothing else.

  5. Yes, of course. But I am talking about the “new row” button, it has ajaxSingle=true and reRender=dataTable. AjaxSingle works correctly but when it rerender the table old data are restored in the page (edited data are lost).

  6. @Fabio: if you have ajaxSingle=”true” on a button, no other components, including input will be processed. So, the input components are not processed on the server.

  7. Hey its really nice tutorial I got things working 🙂

Leave a Reply

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

WordPress.com Logo

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

Facebook photo

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

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.