richfaces datatable and subtable

Question

I have the following datable:

<rich:dataTable id="grid1" value="#{monitorForm.customerList}" var="custRow">
 <rich:column width="5">
  <h:selectBooleanCheckbox value="#{custRow.selected}">
   <a:support event="onclick" action="#{monitorForm.selectOrderLines(custRow)}" 
      reRender="custTable_#{custRow.id}"/>
  </h:selectBooleanCheckbox>
 </rich:column>

 <rich:subTable id="custTable_#{custRow.id}"
      var="row" value="#{custRow.orderList}" rendered="#{custRow.show}">
<rich:column width="5">
 <h:selectBooleanCheckbox value="#{row.checked}" />
</rich:column>

    <rich:column>
 <h:outputText value="#{row.name}" />
</rich:column>
 </rich:subTable>

</rich:dataTable>

When I click on the checkbox the action #{monitorForm.selectOrderLines(custRow)} sets the checkboxes for the selected customer and I want only the subtable for that customer to be reRendered. The above does not work.

The error is [AjaxContext] Target component for id custTable_<id number> does not exist.

Everything works fine when I use reRender="grid1" but that can be very slow when there are many rows.

Is it possible to have rich:subTable with a dynamic id that I can use for reRendering only that subTable?

August August · Accepted Answer · 2010-11-02T11:42:19

A workaround I am using now is:

<rich:dataTable id="grid1" value="#{monitorForm.customerList}">
  <rich:column width="5">
    <h:selectBooleanCheckbox value="" onclick="selectAllPackingLists(this, '#{custRow.id}')"/>
  </rich:column>  

<rich:subTable var="row" value="#{custRow.orderList}" rendered="#{custRow.show}">
    <rich:column>
      <input type='hidden' value='#{custRow.id}'/>
    </rich:column>

<rich:column width="5">
 <h:selectBooleanCheckbox value="#{row.checked}" />
</rich:column>

</rich:subTable>

</rich:dataTable>

javascript function:

                function selectAllPackingLists(o, id) {
                    var elem = jQuery("table[id='monitorFrm:grid1'] > tbody");
                    var checked = o.checked;

                    var rows = elem.attr('rows');

                    jQuery.each(rows, function(index, row) {
                            // for each row check if the input value in 1st column
                            // matches the selected customer id
                        var td = jQuery('td:first', this);
                        var hiddenFld = jQuery('input:first', td);

                        if (hiddenFld.val() == id) {
                                  // set the checkbox in the 2nd column to true 
                            var td2 = jQuery('td:nth-child(2)', this);
                            var cb = jQuery('input:first', td2);

                            jQuery(cb).attr('checked', checked);
                        }
                    });
                }

What is great is that setting the checkboxes via JQuery also sets the values in the bean for each corresponding <h:selectBooleanCheckbox value="#{row.checked}" />

I did not know that it would do that.

richfaces datatable and subtable

2 Answers