Richfaces Datatable Checkbox

Richface Datatable with Checkbox Column and an CheckAll Checkbox in Header

 

 

             <rich:extendedDataTable value="#{myBean.entries}" var="entry" id="IdList" width="580px" height="400px" sortMode="single"

                    selectionMode="multi" selection="#{myBean.selectedEntries}">
                  <rich:column align="center" width="150px">
                    <f:facet name="header">
                      <h:panelGroup style="width:150px;" layout="block">

                         <script type="text/javascript">
                        //<![CDATA[
                            function checkAllCheckboxesInTable( inputId, state ){
                              var commonIdPart = inputId.substr(0, inputId.lastIndexOf(':'));
                              var tableId = commonIdPart + ':tu'
                              var tableElement = document.getElementById( tableId );
                              var inputs = tableElement.getElementsByTagName('input');
                              for (var i = 0; i <= inputs.length; i++){
                                  var input = inputs[i];
                                  if( input.getAttribute('type') == 'checkbox' && state){
                                    input.setAttribute('checked', state);
                                  }else{
                                    input.removeAttribute('checked');
                                  }
                              }
                            }
                            //]]>
                          </script>
                        <h:selectBooleanCheckbox id="checkAll" title="#{bundle.CHECK_ALL}" onclick="checkAllCheckboxesInTable( this.id, this.checked );">
                          <a4j:support event="onchange" reRender="IdList"/>
                        </h:selectBooleanCheckbox>
                        <h:outputText value="#{bundle.IDENTITY_CHECKBOX_SELECT_ALL}"/>
                      </h:panelGroup>
                    </f:facet>
                    <h:selectBooleanCheckbox id="checkEntry" value="#{entry.selected}" disabled="false"/>
                  </rich:column>

                  <rich:column sortable="true" sortBy="#{entry.name}" filterBy="#{entry.name}" filterEvent="onkeyup" width="170px" label="Name">
                      <f:facet name="header">
                          <h:outputText value="Name"/>
                      </f:facet>
                      <h:outputText value="#{entry.name}"/>
                  </rich:column>
              </rich:extendedDataTable>

 

"checkAll" Checkbox call a javascript function with two parameters, the ID and the checked of the actual input-element.  The Javascript function, build the id of the Table-Element. Same as the checkAll element but after the last ":" are "tu" not "checkAll". If the extendedDataTable has an own ID, so i thing the table-element-id ends with the own ID of the richfaces:extendedDataTable (i don't try this).

 

But warning: the Javascript set all checkboxes in Table als checked/unchecked. If you have more than one Column with checkboxes you can uses the ID of the h:selectBooleanCheckbox to differ.