0 Replies Latest reply on May 10, 2013 4:23 AM by Noor Jalillah Jeffri

    How to group each rows in <rich:dataTable> ?

    Noor Jalillah Jeffri Newbie

      Hello,i'm developing page using jsf 2 and richfaces 4.

      Does anybody have any suggestion to group each radio button inside the rows?  My problem now is im able to select every radio button in every rows. What i want is i just want to select only 1 radio button and unchecked the others.. i have tried using javascript to uncheck other radio buttons if one already checked but its not working.

      This is my code.

       

      <rich:panel bodyClass="style1">

                <f:facet name="header">

                          <h:panelGroup>

                         

                              <h:outputText value=" Search " /><br/>

                              <h:inputText value="#{rtpAction.currentStateFilterValue}"  >

                                  <a4j:ajax event="keyup" render="tablecp,selectradio" execute="@this"/>

                              </h:inputText>

                          </h:panelGroup>

                   

                          </f:facet>    

                    

                     

              <rich:dataTable  value="#{rtpAction.getAllCompoundProperties()}" var="as"  id="tablecp" rows="10" noDataLabel="Compound not found" >

        

               <rich:column id="column" filterValue="#{rtpAction.currentStateFilterValue}"

                      filterExpression="#">

                 

                   <f:facet name="header"><h:outputText value="Compound Property Name" /></f:facet>

                   

                        <h:selectOneRadio id="radio" layout="pageDirection" value="#{compound_properties.compound_property_id}" valueChangeListener="#{rtpAction.setSelectedItem}"

                        onchange="dataTableSelectOneRadio(this)" >

                      <f:selectItem id="selectradio"  itemLabel="#{as.compound_property_name}" itemValue="#{as.compound_property_id}" />

                 </h:selectOneRadio>

                     

           </rich:column>

              

                    <rich:column>

                <f:facet name="header"> <h:outputText value="Compound Property unit"></h:outputText></f:facet>

                 <h:outputText id="cpUnit" value="#{as.compound_property_units}"></h:outputText>

              </rich:column>

                

                         </rich:dataTable>  

                   

                       </rich:panel>

       

      javascript method

      -


      function dataTableSelectOneRadio(radio) {

                    var radioId =document.getElementById("radio");

                    radioId= radio.name.substring(radio.name.lastIndexOf(':'));

       

                    for (var i = 0; i;&lt; radio.form.elements.length; i++) {

                        var element = radio.form.elements[i];

       

                        if (element.name.substring(element.name.lastIndexOf(':')) == radioId) {

                            element.checked = false;

                        }

                    }

       

                    radio.checked = true;

                }

       

      Please give me some suggestion.Thanks.