3 Replies Latest reply on Sep 23, 2010 11:51 AM by liumin hu

    Help with h:selectBooleanCheckbox

    Satya K Newbie

      Hi All,

       

      I needed to display a table something like the one shown in attached picture.

       

      The hierarchy of abjects is :

           1. Class M has list of Class S

           2. Class S has list of Class C

       

      So I have to iterate thru list of M to get list of S and then get list of C

      As shown in pic, "cursor and ad2" are of type C which are inside "PP_Stat-PP..." which is of type S and this is inside 3345_20100 of type M.

       

      Now I need to select all checkboxes if I select "3345_20100" or select only "cursor and ad2" if I select "PP_Stat-PP..."

       

      I have built this view by nesting the rich:dataTable


                   <rich:column sortable="false">
                          <h:outputLabel value="#{tempShoppingCartObj.nameToDisplay}" />
                          <rich:toolTip followMouse="true" direction="top-right" showDelay="300" styleClass="tooltip">
                              <span style="white-space:nowrap">#{tempShoppingCartObj.name}</span>
                          </rich:toolTip>
                      </rich:column>
                      <rich:column sortable="false">
                          <h:selectBooleanCheckbox valueChangeListener="#{channelsBean.selectCartItem}"
                              value="#{channelsBean.selectedItems[tempShoppingCartObj]}" />
                          <rich:toolTip followMouse="true" direction="top-right" showDelay="300" styleClass="tooltip">
                              <span style="white-space:nowrap">#{tempShoppingCartObj.name}</span>
                          </rich:toolTip>
                      </rich:column>
                     
                      <rich:columnGroup style="width:175px; margin: 10px 0px 0px 0px;">
                          <rich:column sortable="false" colspan="2" style="width:175px; margin: 10px 0px 0px 0px;">
                              <rich:dataTable value="#{tempShoppingCartObj.subMatrices}" var="smAttr" sortMode="single" >
                                  <rich:column sortable="false">
                                      <h:outputLabel value="#{smAttr.instanceName}" />
                                      <rich:toolTip followMouse="true" direction="top-right" showDelay="300" styleClass="tooltip">
                                          <span style="white-space:nowrap">#{smAttr.instanceName}</span>
                                      </rich:toolTip>
                                  </rich:column>
                                  <rich:column sortable="false">
                                      <h:selectBooleanCheckbox valueChangeListener="#{channelsBean.selectCartItem}"
                                          value="#{channelsBean.selectedItems[smAttr]}" />
                                      <rich:toolTip followMouse="true" direction="top-right" showDelay="300" styleClass="tooltip">
                                          <span style="white-space:nowrap">#{smAttr.instanceName}</span>
                                      </rich:toolTip>
                                  </rich:column>
                                 
                                  <rich:columnGroup style="width:175px; margin: 10px 0px 0px 0px;">
                                      <rich:column sortable="false" colspan="2" style="width:175px; margin: 10px 0px 0px 0px;">
                                          <rich:dataTable value="#{smAttr.channels}" var="chAttr" sortMode="single" >
                                              <rich:column sortable="false">
                                                  <h:outputLabel value="#{chAttr.nameToDisplay}" />
                                                  <rich:toolTip followMouse="true" direction="top-right" showDelay="300" styleClass="tooltip">
                                                      <span style="white-space:nowrap">#{chAttr.name}</span>
                                                  </rich:toolTip>
                                              </rich:column>
                                              <rich:column sortable="false">
                                                  <h:selectBooleanCheckbox value="#{channelsBean.selectedItems[chAttr]}" />
                                                  <rich:toolTip followMouse="true" direction="top-right" showDelay="300" styleClass="tooltip">
                                                      <span style="white-space:nowrap">#{chAttr.name}</span>
                                                  </rich:toolTip>
                                              </rich:column>
                                          </rich:dataTable>
                                      </rich:column>
                                  </rich:columnGroup>
                                 
                              </rich:dataTable>
                          </rich:column>
                      </rich:columnGroup>


      Can you please let me know how to achieve the selection of checkboxes if I select the parent checkbox.


      Regards,

      Satya

        • 1. Re: Help with h:selectBooleanCheckbox
          Siva P Master

          <h:selectBooleanCheckbox id="selectchk"
          onclick="SelectAllCheckboxesSpecific(this);">
          </h:selectBooleanCheckbox>
          <script>
          function SelectAllCheckboxesSpecific(spanChk)
          {
              var IsChecked = spanChk.checked;
              var Chk = spanChk;
              Parent = document.getElementById('urdataTableID');
              var items = Parent.getElementsByTagName('input');
              for (i = 0; i < items.length; i++)
              {
                  if (items[i].id != Chk && items[i].type == "checkbox")
                  {
                      if (items[i].checked != IsChecked)
                      {
                          items[i].click();
                      }
                  }
              }
          }
          </script>

          try like this

           

          <h:selectBooleanCheckbox id="selectchk"

          onclick="SelectAllCheckboxesSpecific(this);">

          </h:selectBooleanCheckbox>

           

           

          <script>

          function SelectAllCheckboxesSpecific(spanChk)

          {

              var IsChecked = spanChk.checked;

              var Chk = spanChk;

              Parent = document.getElementById('urdataTableID');

              var items = Parent.getElementsByTagName('input');

           

              for (i = 0; i < items.length; i++)

              {

                  if (items[i].id != Chk && items[i].type == "checkbox")

                  {

                      if (items[i].checked != IsChecked)

                      {

                          items[i].click();

                      }

                  }

              }

          }

           

          </script>

           

          add one more javascript function for the another datatable.

          • 2. Re: Help with h:selectBooleanCheckbox
            Satya K Newbie

            Yes I can achieve this by java script but I would like to perform this by mapping checkboxes to property of the objects of M or S or C.

             

            So if S is selected then I will loop thru all available objects of C and set them also to selected.

             

            Regards,

            Satya

            • 3. Re: Help with h:selectBooleanCheckbox
              liumin hu Master

              I remember there is a problem(bug) with selectbooleancheckbox in jsf, u can only use Boolean value.but the EL value is string when you use a map like your code even it is a Boolean map.