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:

<h:form>
   <rich:panel>
      <h:panelGrid columns="2">
         <a4j:commandButton value="+" action="#{bean.add}" reRender="list" />
	 <a4j:commandButton value="-" action="#{bean.remove}" reRender="list" />
      </h:panelGrid>
      <rich:dataTable id="list" value="#{bean.list}" var="item" width="60px">
         <rich:column>
	    <h:outputText value="#{item}" />
	 </rich:column>
      </rich:dataTable>
   </rich:panel>
</h:form>

Managed bean:

@KeepAlive
public class Bean {
   private List<Integer> list;
 
   @PostConstruct
   public void init() {
      list = new ArrayList<Integer>();
      list.add(1);
      list.add(2);
      list.add(3);
   }
   public void remove() {
      // remove last
      if (!list.isEmpty()) {
         list.remove(list.size() - 1);
      }
   }
   public List<Integer> 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:

<managed-bean>
  <managed-bean-name>bean</managed-bean-name>
  <managed-bean-class>org.richfaces.example.Bean</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

That’s it.

7 comments

  1. Fabio Collini

    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

    Reply
  2. max

    @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.

    Reply
  3. Fabio Collini

    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

    Reply
  5. Fabio Collini

    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).

    Reply
  6. max

    @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.

    Reply

Leave a Reply