JSF 2, Richfaces 4 and Select All Check box in Richfaces DataTable

adevedo's picture
No votes yet

RichFaces is an open source Ajax-enabled component library for JavaServer Faces, hosted by JBoss. It allows easy integration of Ajax capabilities into enterprise application development. One of the heavily used components is the DataTable which is used to display table of data based on a collection value and to define the required output columns of the resulted table. In this article we will explain how to add a column with check box, once click and submitted, you can retrieve the selected "checked" rows for backend access.

To make a rich datatable with check box column and a check box for select/deselect all in the column header, follow the following:

1 - Create an attirbute of type Map in your backing bean (i.e. selectedRecords)

2 - Add a column to your datatable with the following code inside:

  1. <rich:column rendered="#{user.userInRole('reserve_multiple_dials')}">
  2.         <f:facet name="header">
  3.            <h:selectBooleanCheckbox id="globalSelector" onclick="
  4.                 formEl = document.getElementById('dialsSearchResultsForm');                
  5.            for(i = 0; i != formEl.elements.length; ++i) {                    
  6.                 if(formEl.elements[i].id.indexOf(':selectRecordCheck') &gt;= 0) {
  7.                         formEl.elements[i].checked = this.checked;                                    
  8.                         RichFaces.ajax(formEl.elements[i], event,{ 'parameters':{'javax.faces.behavior.event':'change'} ,'sourceId':formEl.elements[i].id});
  9.                 }
  10.            }
  11.                         "/>
  12.         </f:facet>
  13.         <h:selectBooleanCheckbox
  14.                         id="selectRecordCheck"
  15.                         value="#{selectedDialsMap[record.number]}"
  16.                         onclick="if(this.checked == false) #{rich:element('globalSelector')}.checked = false;">
  17.                         <a4j:ajax event="change" />
  18.         </h:selectBooleanCheckbox>
  19. </rich:column>

In the table dataScroller, you need to add the following in the oncomplete event:

oncomplete="#{rich:element('globalSelector')}.checked = false;"

3 - To get the selected records Ids in the backing bean

  1. List<Long> list = new ArrayList<Long>();
  2. for (Object key : selectedRecords.keySet()) {
  3.         if ((Boolean) selectedRecords.get(key))
  4.                 list.add((Long) key);
  5. }

The list after the loop will contains the IDs of the selected records

Add new comment

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Enter the characters shown in the image.
By submitting this form, you accept the Mollom privacy policy.